#12 4.3.2 Lengths

[Matt]

Lengths refer to horizontal or vertical measurements.

The format of a length value (denoted by <length> in this
specification) is an optional sign character ('+' or '-',
with '+' being the default) immediately followed by a
<number> (with or without a decimal point) immediately
followed by a unit identifier (e.g., px, deg, etc.). After
the '0' length, the unit identifier is optional.

Some properties allow negative length values, but this
may complicate the formatting model and there may be
implementation-specific limits. If a negative length value
cannot be supported, it should be converted to the
nearest value that can be supported.

There are two types of length units: relative and
absolute. Relative length units specify a length relative
to another length property. Style sheets that use relative
units will more easily scale from one medium to another
(e.g., from a computer display to a laser printer).

Relative units are:

em: the 'font-size' of the relevant font
ex: the 'x-height' of the relevant font
px: pixels, relative to the viewing device
Example(s):

H1 { margin: 0.5em } /* em */
H1 { margin: 1ex } /* ex */
P { font-size: 12px } /* px */

The 'em' unit is equal to the computed value of the 'font-
size' property of the element on which it is used. The
exception is when 'em' occurs in the value of the 'font-
size' property itself, in which case it refers to the font
size of the parent element. It may be used for vertical or
horizontal measurement. (This unit is also sometimes
called the quad-width in typographic texts.)

The 'ex' unit is defined by the font's 'x-height'. The x-
height is so called because it is often equal to the
height of the lowercase "x". However, an 'ex' is defined
even for fonts that don't contain an "x".

Example(s):

The rule:

H1 { line-height: 1.2em }

means that the line height of H1 elements will be 20%
greater than the font size of the H1 elements. On the
other hand:

H1 { font-size: 1.2em }

means that the font-size of H1 elements will be 20%
greater than the font size inherited by H1 elements.

When specified for the root of the document tree
(e.g., "HTML" in HTML), 'em' and 'ex' refer to the
property's initial value.

Pixel units are relative to the resolution of the viewing
device, i.e., most often a computer display. If the pixel
density of the output device is very different from that of
a typical computer display, the user agent should
rescale pixel values. It is recommended that the
reference pixel be the visual angle of one pixel on a
device with a pixel density of 90dpi and a distance from
the reader of an arm's length. For a nominal arm's
length of 28 inches, the visual angle is therefore about
0.0227 degrees.

For reading at arm's length, 1px thus corresponds to
about 0.28 mm (1/90 inch). When printed on a laser
printer, meant for reading at a little less than arm's
length (55 cm, 21 inches), 1px is about 0.21 mm. On a
300 dots-per-inch (dpi) printer, that may be rounded up
to 3 dots (0.25 mm); on a 600 dpi printer, it can be
rounded to 5 dots.

The two images below illustrate the effect of viewing
distance on the size of a pixel and the effect of a
device's resolution. In the first image, a reading distance
of 71 cm (28 inch) results in a px of 0.28 mm, while a
reading distance of 3.5 m (12 feet) requires a px of 1.4
mm.

[D]

In the second image, an area of 1px by 1px is covered
by a single dot in a low-resolution device (a computer
screen), while the same area is covered by 16 dots in a
higher resolution device (such as a 400 dpi laser printer).

[D]

Child elements do not inherit the relative values
specified for their parent; they (generally) inherit the
computed values.

Example(s):

In the following rules, the computed 'text-indent' value of
H1 elements will be 36pt, not 45pt, if H1 is a child of the
BODY element.

BODY {
font-size: 12pt;
text-indent: 3em; /* i.e., 36pt */
}
H1 { font-size: 15pt }

Absolute length units are only useful when the physical
properties of the output medium are known. The
absolute units are:

in: inches -- 1 inch is equal to 2.54 centimeters.
cm: centimeters
mm: millimeters
pt: points -- the points used by CSS2 are equal to
1/72th of an inch.
pc: picas -- 1 pica is equal to 12 points.
Example(s):

H1 { margin: 0.5in } /* inches */
H2 { line-height: 3cm } /* centimeters */
H3 { word-spacing: 4mm } /* millimeters */
H4 { font-size: 12pt } /* points */
H4 { font-size: 1pc } /* picas */

In cases where the specified length cannot be
supported, user agents must approximate it in the
actual value.

[Matt]

Logged In: YES
user_id=1307954

The parser is capable of using most units, those including
inches, centimeters, millimeters, points, picas, and pixels.
Unfortunately, em is only available for fonts (and
coincidentally the only unit of measure for fonts available).
Although the support is not great, the ability to adjust the
number of pixels in length any of the supported units of
measure (except pixels, of course) is available simply by
changing the values of a few public variables.