Section 18.8. Text Alignment Properties | Web Design in a Nutshell: A Desktop Quick Reference (In a Nutshell (OReilly))

18.8. Text Alignment Properties

One of the ways text can be formatted to improve visual hierarchy and readability is through alignment. CSS provides several properties for adjusting the horizontal and vertical alignment of text.

18.8.1. Indents

Use the text-indent property to specify an amount of indentation for the first line of text in an element.

text-indent

Values:

     <length> | <percentage> | inherit

Initial value:

Applies to:

Block-level elements and table cells

Inherited:

Yes

The value of text-indent may be any unit of length or a percentage value (calculated as a percentage of the parent element width), as shown in these examples and Figure 18-13:

     p#1 { text-indent: 3em; }     p#2 { text-indent: 50%; }     p#3 { text-indent: -20px; }

The third rule in this list shows an allowable negative text-indent value. Negative values can be used to create hanging-indent effects. This feature should be used with care, as it may cause text to disappear off the left edge of the browser (add left padding to compensate) or may not be supported properly in older browser versions.

One last thing to know about indents is that a child element inherits the computed indent value from its parent, not the specified value. So if a div is set to 800 pixels wide with a 10% margin, the computed indent will be 80 pixels. A paragraph within the div will inherit the 80-pixel indent, not the 10% text-indent value.

Designers may be accustomed to specifying indents and margins in tandem, but to be consistent with the CSS model, margins will be discussed in relation to the box model in Chapter 19.

Figure 18-13. The text-indent property

18.8.2. Horizontal Alignment

Use the text-align property to adjust the horizontal alignment of text within block elements.

text-align

Values:

     left | right | center | justify | inherit

Initial Values:

left for languages that read left to right

right for languages that read right to left

Applies to:

Block-level elements and table cells

Inherited:

Yes

The resulting text behavior of the various text-align property keyword values should be fairly intuitive as illustrated in Figure 18-14.

     p { text-align: left; }     p { text-align: right; }     p { text-align: center; }     p { text-align: justify; }

It is worth pointing out that the text-align property controls the horizontal alignment of the inline elements within the element, not the alignment of the element itself. In other words, it is not equivalent to the deprecated center element. Notice that the paragraph elements in Figure 18-14 remain aligned on the left margin.

Figure 18-14. The text-align property

The proper way to horizontally align elements is through manipulation of their left and right margins, as discussed in Chapter 19.

18.8.3. Vertical Alignment

Use the vertical-align property to specify the vertical alignment of an inline element. Vertical alignment values are relative to the baseline, text height (font size), or the total height of the text line. In the course of looking at vertical alignment values, this section introduces other important CSS concepts such as replaced elements and the inline box model.

vertical-align

Values:

     baseline | sub | super | top | text-top | middle |     text-bottom | bottom | <percentage> |<length> | inherit

Initial value:

     baseline

Applies to:

Inline elements and table cell elements

Inherited:

The vertical-align property applies to inline text elements as well as nontext elements that may appear in the flow of text, such as images or form inputs. Images and inputs are examples of replaced elements, because the source document contains only a reference to the element that is replaced by the actual content when the page is assembled. Most XHTML elements are non-replaced elements, which means their content appears in the source document, like the text of a paragraph (p).

18.8.3.1. Aligning relative to the baseline

Many of the vertical-align values move inline elements with respect to the baseline of the surrounding text. The default value is baseline, which aligns the baseline of textor the bottom edge of a replaced elementwith the baseline of the parent element.

The sub and super values allow subscripting and superscripting. The sub value causes the element to be lowered relative to the baseline. super causes the element to be raised relative to the baseline. CSS does not prescribe the distance it should be raised or lowered, so it depends on the browser. It is significant to note that aligning an element with sub or super does not reduce the font size of the element.

These examples of baseline, sub, and super are shown in Figure 18-15.

     <p>Aliquam erat <span style="vertical-align: baseline">volutpat</span></p>     <p>Aliquam erat <span style="vertical-align: sub">volutpat</span></p>     <p>Aliquam erat <span style="vertical-align: sup">volutpat</span></p>

Figure 18-15. vertical-align relative to baseline

18.8.3.2. Aligning relative to text height

The text-top and text-bottom values align an element relative to the top and bottom edges of the surrounding text, respectively. Although it depends on the font design, the "top" of text corresponds roughly to the top of the ascenders and the "bottom" of text corresponds roughly to the bottom of the descenders. More accurately, it is the top and bottom of the text box for that font and is derived from the font size of the parent element. Replaced elements in the line are ignored in the calculation of the top and bottom of the text box.

The inline box model for the calculation of line height is discussed in detail in Chapter 19.

Figure 18-16 shows elements aligned with text-top and text-bottom. It is easy to see that the aligned elements are positioned relative to the text and not to the overall height of the line.

     <p>A tall <img style="vertical-align: middle" src="/books/4/439/1/html/2/img/placeholder_tall.gif" alt=     "" /> image and a short <img style="vertical-align: text-top" src="/books/4/439/1/html/2/img/     placeholder_short.gif" alt="" /> image.</p>     <p>A tall <img style="vertical-align: middle" src="/books/4/439/1/html/2/img/placeholder_tall.gif" alt= "" /> image and a short <img style="vertical-align: text-bottom" src="/books/4/439/1/html/2/img/     placeholder_short.gif" alt="" /> image</p>

Figure 18-16. Text-top and text-bottom

The final text-based alignment is middle, which aligns the vertical midpoint of the element (typically an image) with an imaginary line drawn through the middle of the x-height of the parent. A font's x-height is the height of its lowercase letters, but browsers usually calculate it as .5 em. According to the specification, then, the line against which an element will be vertically centered is only .25 em above the baseline, as indicated by the gray line in Figure 18-17.

     <p>A tall <img style="vertical-align: middle" src="/books/4/439/1/html/2/img/     placeholder_tall.gif" alt="" /> image and a short <img style="vertical-     align: middle" src="/books/4/439/1/html/2/img/placeholder_short.gif" alt="" /> image.</p>

Figure 18-17. Text aligned with the middle value

18.8.3.3. Aligning relative to line height

The top and bottom values align elements relative to the top and bottom of the line box for that line. The line box is an implied box that is generated for each line of text in a block element. It is drawn high enough to enclose the tallest inline element, including its leading. Replaced elements, like images, are included in the calculation of the line box height, so they influence the position of elements aligned with top and bottom.

Figure 18-18 shows elements aligned with top and bottom in relation to the line box.

     <p>A tall <img style="vertical-align: middle" src="/books/4/439/1/html/2/img/placeholder_tall.gif" alt=     "" /> image and a short <img style="vertical-align: top" src="img/placeholder_short.gif" alt="" /> image.</p>     <p>A tall <img style="vertical-align: middle" src="/books/4/439/1/html/2/img/placeholder_tall.gif" alt=     "" /> image and a short <img style="vertical-align: bottom" src="/books/4/439/1/html/2/img/placeholder_short.gif" alt="" /> image</p>

Figure 18-18. Text aligned top and bottom relative to the line box

18.8.3.4. Aligning with percentage values

When you use a percentage value with vertical-align, the baseline of the element is moved by your specified amount relative to the baseline. The distance is calculated as a percentage of the element's line-height value. Both positive and negative percentage values are accepted.