This is a legacy document, and retained on the site in order to avoid link rot. The content is likely no longer (a) accurate, (b) representative of the views and philosophies of current site management, or (c) up to date.

Implementation of line-height

Table of contents

A CSS suggestion for a visual presentation is based on the idea
that a browsers rendering engine first generates suitable boxes
to come up with a page layout that conforms to the cascaded
result of all stylesheets made available to the renderer to be
used for a given media type.

At the very bottom of the box rendering idea for text
presentation we can find a box that is defined inside the
current font file in use, namely the character cell box . Each
character defined in a font has its own box where the height of
the box is equal to the current font-size and the
width of the box will depend on the character it self, for
proportional fonts, or have a constant and equal width for all
characters for a mono spaced font.

A CSS1 conforming rendering engine can not do much about the
proportions of character cell boxes while a CSS2 conforming
renderer can make use of a few properties like
font-size-adjust and font-stretch to
suggest a few changes to the character cell box it self.

A series of characters set in succession forms a line box with
a height at least equal to the currently defined
font-size and such a line box, is in most
practical situations, the box with the smallest height that can
be used for running text. Several successive lines of text
based on such line boxes placed flush below each other would
then form a block of multi line text where the
line-height would be equal to the
font-size .

Reference to the CSS1 specification

All elements have a line-height property that,
in principle, gives the total height of a line of text. Space
is added above and below the text of the line to arrive at
that line-height .

For example, if the text is 12pt high and
line-height is set to '14pt', an extra space of
2pt is added, namely 1pt above and 1pt below the line.

Empty elements influence these calculations just like
elements with content. The difference between the
font-size and the line-height is
called the leading . Half the leading is called the
half-leading . After formatting, each line will form a
rectangular line-box . The box properties set the size,
circumference and position of the boxes that represent
elements.
» » »

The illustration that goes
along with this section is an example of a block of text that
has been formed using two line boxes directly set together as
described in the previous section.

The illustration is based on a type design (MS Georgia) where
characters with diacritical marks are available and it can be
viewed in full size here for easier detail study
of character cell sizes, font size and baseline distance.

Text that has been set as close as this example shows is said
to have a compact setting and is almost never
used for normal presentation of information. Exceptions may be
when a certain area is already specified and a specific amount
of text has to be fitted into that area, but that would then be
the result of a careful examination of available options.

Ép … And these lines
should, for users of conforming CSS Browsers, come out in a way
that demonstrates a Compact setting of text at double the
default font-size … Ép.

(please note that the top and bottom of
character cells are sitting very close to the corresponding top
and bottom border lines respectively).

Traditional typesetting during the lead for print era used a
method called leading to adjust the distance
between text lines within blocks of text. Leading was done in
practice by inserting strips of brass, with a known thickness,
between the lines made up from casted types and the typesetter
had full freedom here to balance his black & white
impression as required to meet a condition of best possible
readability.

CSS1/2 as defined, does not offer a property that would
replicate the old leading practice full out, the closest it
comes is in the property line-height that has a
basic definition in CSS1 and is further defined, as to how
it should be implemented, in CSS2 . As it turns out, the
suggested method for implementation of line-height
adds a little bit of sand in the
machinery , as the next section is set up to illustrate.

For this example
of line-height in action, the following illustration has been created, where you
can find the same two lines of text as in the previous example,
but this time in a setting that reflects the way they would
come out if a value of 1.3 is given for the
line-height property.

As the CSS specs now suggests, the net effect of a stylesheet
that specifies {line-height:1.3} for these two
lines of text, is to create line boxes for the two lines that
have a height of 1.3 times the
font-size , and place the character cell boxes
from the font vertically centered in these line boxes so we end
up with an area of white space sized at 0.15 times
the font-size at the top and bottom of each line
of text.

The result of this will of course be that we get the base lines
of our two lines of text separated to 1.3 times
the font-size , but it should be noted that the
principle of above & below half leading is
to be implemented even for the first and last
line of said block.

Ép … And these lines
should, for users of conforming CSS Browsers, come out in a way
that demonstrates a Non Compact setting of text at double the
default font-size … Ép.

(please note that the top and bottom of
character cells now have got a small gap between them and their
corresponding top and bottom border lines respectively).

In a CSS guided presentation this last demo will show that each
character linebox has been increased to 1.3 times the font-size
in use, so now the lines of text are separated that much extra
as compared to the compact example in Demo1 in the previous section.

It's a bit unfortunate that the recommended way to implement
the line-height property allows for half-leading to be used
above the top line, and below the bottom line, of a standard
block of text. The net result of that is an area of white space
is created above and below that block that is no longer
accessible for any kind of separate sizing suggestion by the
CSS author.

The basic reason for that is that the line-height property is
not designed to suggest spacing of text baselines to start
with, contrary to what's said in the CSS1 spec, but instead it
is just the property that controls the height of the box that
lives as the most inner part of the CSS box rendering model.

(and forget about trying to use negative
values for the padding property to get at that top/bottom white
space area, that is not valid as per current CSS specs)

Others have penetrated the line-height mystery of CSS to much
greater depths than I have set out to do in this page, so if
you happen to be up to the follow through story after reading
my touch base summary, the following two links are the best I
know to point you to.