Tuesday, September 14, 2010

Using text-indent for print-like paragraphs

Because of people’s familiarity with non-indented paragraphs on the Web, the W3C recommends
staying away from indented ones. However, there are times when designers
yearn for a more print-based design, as in the following image.

For this effect, two things not previously discussed in this book are required: the textindent
CSS property and an adjacent sibling selector. This type of selector uses the syntax
A+B, where B is the subject of the selector. For paragraph indentation, the CSS rule would
look something like the following code block:
p+p {
text-indent: 1.5em;
}
In plain English, this is saying, “If a paragraph follows another paragraph, indent the text by
1.5 ems”. Therefore, paragraphs preceded by a different element, such as a heading, won’t
be indented, as is traditional in print.

**Note that prior to version 7, Internet Explorer didn’t support adjacent sibling selectors,
and so this effect won’t work in version 6 or below of Microsoft’s browser. A
workaround would be to use a style sheet linked via a conditional comment to indent
all paragraphs for Internet Explorer 6 and below. See the “Dealing with Internet
Explorer bugs” section in Chapter 9 for more on conditional comments. 

No comments:

Post a Comment