Using the Text-Indent Property

Indenting first lines is more common in fiction than in technical texts. Some people consider it old-fashioned, although a large indent may look quite modern again. At the same time, a too-large indent can hamper readability.

Perhaps the best and most common reason for choosing to indent the first line is that it is a good way to indicate the start of a paragraph. That's why we used it in this book. Also, when used in this way, you can save space within the document. Without the indent, paragraphs must have extra space between them so that one paragraph can be distinguished from another. This adds to the length of the document. See Figure 7.3(b), which was achieved using this rule:

 P { text-indent: 1em } 

Figure 7.3. Using the text-indent property to indent paragraphs: (a) a nonindented paragraph; (b) a regular indented paragraph; (c) a negative indented paragraph; (d) a negative indent with a large indent that was done intentionally to achieve a particular design effect.

Interesting effects can be achieved with negative indents. A negative indent causes the first line to stick out, outside the bounding box of the paragraph. Some newspapers use this effect to distinguish commentaries from news articles, or to give a distinct visual appearance. Figure 7.3(c) shows a negative indent, achieved using this rule:

 P { text-indent: -1em } 

However, you have to be careful when using negative indents; otherwise, unexpected effects may result. Figure 8.5 in Chapter 8, "Space Around Boxes," shows an example of a negative indent that is too large: part of the first word ends up outside the window. This resulted from input like this:

 BODY { margin-left; 2em } P { text-indent: -4em } 

Similarly, an effect that may actually be desirable from a design perspective is when the first word overlaps something that is to the left of the text, such as a floating image. Code like this could produce that result:

 P { text-indent: -4em } IMG { float: left; margin: 2em } 

This effect is shown in Figure 7.3(d).

text-indent indents only the first line of any element. However, some elements have a first line that is actually inside another element. In this case, text-indent may not be able to indent the first line. Here's an example of how this works. A style sheet with these specifications

 DIV { text-indent: 2em } P { text-indent: 0em } 

and a document with this text

 <DIV><P>A nonindented paragraph...</DIV> 

results in the paragraph not having any indentation. This is because the first line of DIV occurs inside another element, P, which has a text-indent of 0. The 0em value of P overrides the 2em value of DIV.

On the other hand, an element may appear to consist of several paragraphs, but it is actually a paragraph that is interrupted by another element. It will still have only one first line and, hence, only that first line will be indented by text-indent. For example, suppose you were to specify this style sheet:

 P { text-indent: 2em } 

and interrupt a paragraph element with a BR element; this would be the result:

<P>This is a paragraph broken by another element. <BR><BR> This line is not indented.	This is a paragraph broken by another element.
	This line is not indented.