Recipe 2.19. Creating a Hanging Indent

Problem

You want to create a hanging indent.

Solution

Use a negative value for the text-indent property:

p.hanging {  text-indent: -5em; }

Discussion

The typographic treatment of a hanging indent is already commonplace in most browsers in definition lists. With this simple code, a series of hanging indents (see Figure 2-30) is created without breaking a proverbial sweat.

Figure 2-30. Definition lists render hanging indents by default

<dl>  <dt>Hanging Indent</dt>  <dd>A common typographic effect where the first line of a paragraph is aligned  with the left margin while the proceeding lines are indented.  The technique  creates the visual effect where the first line is left hanging over other lines of  text.</dd> </dl>

When you want a hanging indent on just a paragraph (not a list), the use of definition list markup will not suffice. The straightforward approach shown in the solution involves the use of the text-indent property in CSS.

Hanging indents safely

Before putting the text-indent property into a style sheet, make sure the code is implemented the right way. For example, by putting just the text-indent property into a CSS rule along with some basic font styling properties, that hanging indent could cause a legibility issue.

In Figure 2-31, note that the hanging indent extends to the left of the viewport. A reader may be able to determine the words being cropped off through the context of the rest of the paragraph, but that's simply an unneeded burden to place on them.

In order to work around this situation, check out Figure 2-31; apply a value equal to the indent to the left margin of the paragraph. The hanging indent then extends over the area already made clear by the margin ensuring that that text in the hanging indent remains visible.

p.hanging {  text-indent: -5em;  margin-left: 5em; }

Figure 2-31. The hanging indent exits stage left

The paired hanging indent

In addition to having just the first line indent, moving a heading to the left as well results in a paired hanging indent (see Figure 2-32):

#content p.hanging {  text-indent: -60px;  margin: 0 0 0 60px;  padding: 0; } #content h3 {  text-indent: -60px;  margin: 0 0 0 60px;  padding: 0; }

The HTML markup for this effect is:

<div >  <h3>Once more time with feeling</h3>  <p > Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy  nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat&hellip;</p> </div>

Figure 2-32. Double stacking the hanging indent

Or with some slight adjustment, have only the heading become the hanging indent like in Figure 2-33:

#content p {  margin: 0;  padding: 0 0 0 60px; } #content h3 {  text-indent: -60px;  margin: 0 0 0 60px;  padding: 0; }

The refined HTML markup follows:

<div >  <h3>Once more time with feeling</h3>  <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy  nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat&hellip;</p> </div>