CSS: The Definitive Guide, 3rd Edition (20 page)

^[
ast
]
Hyphenation is not described in CSS because different languages have
different hyphenation rules. Rather than try to concoct a set of rules that
would most likely be incomplete, the specification simply avoids the
problem.

line-height

Every element in a line of text generates a
content
area
,
which is
determined by the size of the font. This content area in turn generates an
inline box
that is, in the absence of any other factors,
exactly equal to the content area. The leading generated by
line-height
is one of the factors that increases or
decreases the height of each inline box.

To determine the leading for a given element, simply subtract the computed
value of
font-size
from the computed value of
line-height
. That value is the total amount
of leading. And remember, it can be a negative number. The leading is then divided
in half, and each half-leading is applied to the top and bottom of the content
area. The result is the inline box for that element.

As an example, let's say the
font-size
(and
therefore the content area) is 14 pixels tall, and the
line-height
is computed to 18 pixels. The difference (four pixels)
is divided in half, and each half is applied to the top and bottom of the content
area. This creates an inline box that is 18 pixels tall, with 2 extra pixels above
and below the content area. This sounds like a roundabout way to describe how
line-height
works, but there are excellent
reasons for the description.

Once all of the inline boxes have been generated for a given line of content,
they are then considered in the construction of the line box. A line box is
exactly as tall as needed to enclose the top of the tallest inline box and the
bottom of the lowest inline box.
Figure
6-7
shows a diagram of this process.

Figure 6-7. Line box diagram

Let's now consider the possible values of
line-height
. If you use the default value of
normal
, the user agent must calculate the vertical space between
lines. Values can vary by user agent, but they're generally 1.2 times the size of
the font, which makes line boxes
taller than the value of
font-size
for a given
element.

Most values are simple length measures (e.g.,
18px
or
2em
). Be aware that even if
you use a valid length measurement, such as
4cm
, the browser (or the operating system) may be using an incorrect
metric for real-world measurements, so the line height may not show up as exactly
four centimeters on your monitor. For more details, see
Chapter 4
.

em
,
ex
, and
percentage values are calculated with respect to the
font-size
of the element. The markup is relatively straightforward,
and the results are shown in
Figure
6-8
:

body {line-height: 14px; font-size: 13px;}
p.cl1 {line-height: 1.5em;}
p.cl2 {font-size: 10px; line-height: 150%;}
p.cl3 {line-height: 0.33in;}
This paragraph inherits a 'line-height' of 14px from the body, as well as
a 'font-size' of 13px.

This paragraph has a 'line-height' of 19.5px(13 * 1.5), so
it will have slightly more line-height than usual.

This paragraph has a 'line-height' of 15px (10 * 150%), so
it will have slightly more line-height than usual.

This paragraph has a 'line-height' of 0.33in, so it will have
slightly more line-height than usual.

Figure 6-8. Simple calculations with the line-height property

When the
line-height
is inherited by one block-level element from another, things get a bit trickier.
line-height
values inherit from the parent
element as computed from the parent, not the child. The results of the following
markup are shown in
Figure 6-9
. It
probably wasn't what the author had in
mind:

body {font-size: 10px;}
div {line-height: 1em;}  /* computes to '10px' */
p {font-size: 18px;}

This paragraph's 'font-size' is 18px, but the inherited 'line-height'
value is only 10px.  This may cause the lines of text to overlap each
other by a small amount.

Figure 6-9. Small line-height, large font-size, slight problem

Why are the lines so close together? Because the computed
line-height
value of
10px
was inherited by the paragraph from its parent
div
. One solution to the small
line-height
problem depicted in
Figure 6-9
is to set an explicit
line-height
for every element, but that's not very
practical. A better alternative is to specify a number, which actually sets a
scaling
factor:

body {font-size: 10px;}
div {line-height: 1;}
p {font-size: 18px;}

When
you specify a number, you cause the scaling factor to be an inherited value
instead of a computed value. The number will be applied to the element and all of
its child elements, so that each element has a
line-height
calculated with respect to its own
font-size
(see
Figure
6-10
):

div {line-height: 1.5;}
p {font-size: 18px;}

This paragraph's 'font-size' is 18px, and since the 'line-height'
set for the parent div is 1.5, the 'line-height' for this paragraph
is 27px (18 * 1.5).

Figure 6-10. Using line-height factors to overcome inheritance problems

Though it seems like
line-height
distributes extra space both above and below each line of text,
it actually
adds (or subtracts) a certain amount from the top and bottom of an inline
element's content area to create an inline box. Assume that the default
font-size
of a paragraph is
12pt
and consider the
following:

p {line-height: 16pt;}

Since
the "inherent" line height of 12-point text is 12 points, the preceding rule will
place an extra 4 points of space around each line of text in the paragraph. This
extra amount is divided in two, with half going above each line and the other half
below. You now have 16 points between the baselines, which is an indirect result
of how the extra space is apportioned.

If you specify the value
inherit
, then the element will use the
computed value for its parent element. This isn't really any different than
allowing the value to inherit naturally, except in terms of specificity and
cascade resolution. See
Chapter 3
for details
on these topics.

Now that you have a basic grasp of how lines are
constructed, let's talk about vertically aligning elements relative to the line
box.

vertical-align

Remember:
vertical-align
does
not
affect the alignment of content within a block-level
element. You can, however, use it to affect the vertical alignment of elements
within table cells. See
Chapter 11
for
details.

vertical-align
:
baseline
forces the baseline of an element to align with the
baseline of its parent. Browsers, for the most part, do this anyway, since you'd
obviously expect the bottoms of all text elements in a line to be
aligned.

If a vertically aligned element doesn't have a baseline—that
is, if it's an image, a form input, or another replaced element—then the bottom of
the element is aligned with the baseline of its parent, as
Figure 6-11
shows:

img {vertical-align: baseline;}
The image found in this paragraph  has its
bottom edge aligned with the baseline of the text in the paragraph.

Figure 6-11. Baseline alignment of an image

This alignment rule is important because it causes some web browsers
to always put a replaced element's bottom edge on the baseline, even if there is
no other text in the line. For example, let's say you have an image in a table
cell all by itself. The image may actually be on a baseline, but in some browsers,
the space below the baseline causes a gap to appear beneath the image. Other
browsers will "shrink-wrap" the image with the table cell, and no gap will appear.
The gap behavior is correct, according to the CSS Working Group, despite its lack
of appeal to most authors.

The declaration
vertical-align
:
sub
causes an
element to be subscripted, meaning that its baseline (or bottom, if it's a
replaced element) is lowered with respect to its parent's baseline. The
specification doesn't define the distance the element is lowered, so it may vary
depending on the user agent.

super
is the opposite of
sub
; it raises the element's baseline (or bottom of a
replaced element) with respect to the parent's baseline. Again, the distance the
text is raised depends on the user agent.

Note that the values
sub
and
super
do
not
change the element's font size, so
subscripted or superscripted text will not become smaller (or larger). Instead,
any text in the sub- or superscripted element should be, by default, the same size
as text in the parent element, as illustrated by
Figure
6-12
:

span.raise {vertical-align: super;}
span.lower {vertical-align: sub;}
This paragraph contains superscripted
and subscripted text.

Figure 6-12. Superscript and subscript alignment

vertical-align
:
bottom
aligns the bottom of the element's inline box with the bottom of
the line box. For example, the following markup results in
Figure
6-13
:

.feeder {vertical-align: bottom;}
This paragraph, as you can see quite clearly, contains
a  image and
a  image,
and then some text that is not tall.

Figure 6-13. Bottom alignment

The second line of the paragraph in
Figure 6-13
contains two inline elements,
whose bottom edges are aligned with each other. They're also below the baseline of
the text.

vertical-align
:
text-bottom
refers to the bottom of the text in the line. For the
purposes of this value, replaced elements, or any other kinds of non-text
elements, are ignored. Instead, a "default" text box is considered. This default
box is derived from the
font-size
of the parent
element. The bottom of the aligned element's inline box is then aligned with the
bottom of the default text box. Thus, given the following markup, you get a result
like the one shown in
Figure
6-14
:

img.tbot {vertical-align: text-bottom;}
Here: a 
image, and then a  image.

Figure 6-14. Text-bottom
alignment