CSS Text-Indent Mastering Text Indentation for Better Typography

Introduction

The text-indent property in CSS is a handy tool for web designers. It adds extra space before the first line of a block of text, which is great for styling paragraphs in articles or documents. This feature has been supported by all major browsers since July 2015, so it works well across different devices and browsers.

Specification

The text-indent property is part of the CSS Text Module Level 3 specification. This specification explains how to use and implement this property. You can find the official details in the CSS Text Module Level 3 documentation.

Description

The text-indent property in CSS is used to add space before the first line of a block of text. This is useful for creating indented paragraphs, a common practice in typography to improve readability and visual appeal. You can specify the indentation using different units like pixels, percentages, or ems.

By default, text-indent affects only the first line. You can also apply it to each line after a forced line break or invert it to affect all lines except the first one using specific keywords. This property is widely supported across all major browsers, making it a reliable choice for enhancing text readability and aesthetics.

Syntax

The syntax for the text-indent property is straightforward and allows for various values:

/* <length> values */
text-indent: 3mm;
text-indent: 40px;

/* <percentage> value relative to the containing block width */
text-indent: 15%;

/* Keyword values */
text-indent: 5em each-line;
text-indent: 5em hanging;
text-indent: 5em hanging each-line;

/* Global values */
text-indent: inherit;
text-indent: initial;
text-indent: revert;
text-indent: revert-layer;
text-indent: unset;

Values

The text-indent property accepts various values to specify the indentation:

Length Values

You can specify the indentation using absolute length units like px, em, rem, mm, cm, etc. Negative values are also allowed.

Percentage Values

Indentation can be defined as a percentage of the containing block’s width, which is useful for responsive designs.

Keyword Values

• each-line: Applies the indentation to the first line and each line after a forced line break, but not after soft wrap breaks.
• hanging: Inverts the indentation, so all lines except the first are indented.
• hanging each-line: Combines the effects of hanging and each-line.

Global Values

• inherit: Inherits the value from the parent element.
• initial: Sets the property to its default value (0).
• revert: Reverts the property to the user agent’s default stylesheet.
• revert-layer: Reverts the property to the value specified in a previous layer of the cascade.
• unset: Resets the property to its inherited value if it inherits, or to its initial value if not.

Formal Definition

The text-indent property is formally defined to control the amount of space added before the first line of a block of text. Key aspects include:

• Initial Value: 0
• Applies To: Block container elements
• Inherited: Yes
• Percentages: Relative to the width of the containing block
• Computed Value: The specified percentage or the absolute length, along with any specified keywords
• Animation Type: Can be animated using a length, percentage, or the calc() function

Formal Syntax

The formal syntax for the text-indent property is:

text-indent =
  [[] <length-percentage> []] &&
  hanging? &&
  each-line?

<length-percentage> =
  <length> |
  <percentage>

Examples

Simple Indent

HTML

<p>
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
  nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>

CSS

p {
  text-indent: 30px;
}

Skipping Indentation on the First Paragraph

HTML

<h2>Lorem ipsum</h2>

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu
  venenatis quam. Vivamus euismod eleifend metus vitae pharetra. In vel tempor
  metus. Donec dapibus feugiat euismod. Vivamus interdum tellus dolor. Vivamus
  blandit eros et imperdiet auctor. Mauris sapien nunc, condimentum a efficitur
  non, elementum ac sapien. Cras consequat turpis non augue ullamcorper, sit
  amet porttitor dui interdum.
</p>

<p>
  Sed laoreet luctus erat at rutrum. Proin velit metus, luctus in sapien in,
  tincidunt mattis ex. Praesent venenatis orci at sagittis eleifend. Nulla
  facilisi. In feugiat vehicula magna iaculis vehicula. Nulla suscipit tempor
  odio a semper. Donec vitae dapibus ipsum. Donec libero purus, convallis eu
  efficitur id, pulvinar elementum diam. Maecenas mollis blandit placerat. Ut
  gravida pellentesque nunc, in eleifend ante convallis sit amet.
</p>

<h2>Donec ullamcorper elit nisl</h2>

<p>
  Donec ullamcorper elit nisl, sagittis bibendum massa gravida in. Fusce tempor
  in ante gravida iaculis. Integer posuere tempor metus. Vestibulum lacinia,
  nunc et dictum viverra, urna massa aliquam tellus, id mollis sem velit
  vestibulum nulla. Pellentesque habitant morbi tristique senectus et netus et
  malesuada fames ac turpis egestas. Donec vulputate leo ut iaculis ultrices.
  Cras egestas rhoncus lorem. Nunc blandit tempus lectus, rutrum hendrerit orci
  eleifend id. Ut at quam velit.
</p>

<p>
  Aenean rutrum tempor ligula, at luctus ligula auctor vestibulum. Sed
  sollicitudin velit in leo fringilla sollicitudin. Proin eu gravida arcu. Nam
  iaculis malesuada massa, eget aliquet turpis sagittis sed. Sed mollis tellus
  ac dui ullamcorper, nec lobortis diam pellentesque. Quisque dapibus accumsan
  libero, sed euismod ipsum ullamcorper sed.
</p>

CSS

p {
  text-align: justify;
  margin: 1em 0 0 0;
}
p + p {
  text-indent: 2em;
  margin: 0;
}

Percentage Indent

HTML

<p>
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
  nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
<p>
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
  nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>

CSS

p {
  text-indent: 30%;
  background: plum;
}

Browser Compatibility

The text-indent property is widely supported across all major browsers, ensuring compatibility with a broad range of devices and browser versions.

Summary of Browser Compatibility

• Google Chrome: Supported since version 1.0 (December 2008).
• Firefox: Supported since version 1.0 (November 2004).
• Internet Explorer/Edge: Supported since version 3.0 (August 1996).
• Opera: Supported since version 3.5 (November 1998).
• Safari: Supported since version 1.0 (June 2003).

Browser Compatibility Table

Ensuring Compatibility

To ensure the best compatibility and user experience, test your web pages across different browsers and devices. While the text-indent property is well-supported, thorough testing can help identify any potential issues.

Related CSS Properties

In addition to the text-indent property, there are several other CSS properties that can be used to enhance text styling and layout:

• text-justify: Controls how text is justified within a block.
• text-orientation: Specifies the orientation of the text within a line.
• text-overflow: Defines how overflowed content that is not displayed is signaled to the user.
• text-rendering: Provides information to the rendering engine about what trade-offs to make as it renders text.
• text-transform: Controls the capitalization of text.
• hanging-punctuation: Specifies whether a punctuation mark should hang at the start or end of a line box.

These properties, along with text-indent, provide a comprehensive set of tools for styling text in web design.

FAQs

What is the purpose of the text-indent property in CSS?

The text-indent property in CSS is used to define the indentation of the first line of text in a block-level element, like a paragraph. This helps make paragraphs more readable and visually appealing.

How do I create a 30px indentation for the first line of a paragraph?

To create a 30px indentation for the first line of a paragraph, use the following CSS:

text-indent: 30px;

This moves the first line of the paragraph 30 pixels to the right.

Can text-indent accept negative values?

Yes, text-indent can accept negative values. Negative values will pull the first line of text to the left, creating a hanging indent effect.

Does text-indent apply to all lines of text?

No, text-indent only affects the first line of text within the block element. Subsequent lines are unaffected by this property.

What units can be used with text-indent?

text-indent can use various units, including pixels (px), em, rem, percentages (%), and other length units to define the indentation. This flexibility allows for precise control over the indentation based on the specific design requirements.

How can I create a hanging indent?

A hanging indent can be created using the hanging keyword with the text-indent property. For example:

text-indent: 2em hanging;

This will invert the indentation, so all lines except the first are indented by 2em.

Is text-indent supported in all browsers?

Yes, text-indent is widely supported across all major browsers, including Google Chrome, Firefox, Internet Explorer/Edge, Opera, and Safari. This makes it a reliable choice for web developers looking to enhance the visual presentation of their text content.

Can text-indent be used to indent each line after a forced line break?

Yes, by using the each-line keyword with the text-indent property, you can apply the indentation to the first line of the block and each line after a forced line break. For example:

text-indent: 2em each-line;

This will indent the first line and each subsequent line after a forced line break by 2em.

How can I skip the indentation for the first paragraph?

To skip the indentation for the first paragraph, you can use the next-sibling combinator in CSS. For example:

p {
  text-align: justify;
  margin: 1em 0 0 0;
}
p + p {
  text-indent: 2em;
  margin: 0;
}

This will apply the indentation to all paragraphs except the first one after a heading.

What is the default value for text-indent?

The default value for text-indent is 0, meaning there is no indentation applied to the text.

How can I reset text-indent to its default value?

To reset text-indent to its default value, you can use the initial keyword:

text-indent: initial;

This will set the property back to its default value of 0.

By understanding and effectively using the text-indent property, web designers and developers can create visually appealing and well-structured text content that enhances the user experience. The property’s flexibility and wide browser support make it a valuable tool in web design.