The proposed changes below alter the CSS2.1 specification to disengage points and picas from the other physical units (millimeters, centimeters, and inches) and tie them instead to the CSS pixel.

4.3.2 Lengths

Lengths refer to horizontal or vertical distance measurements.

The format of a length value (denoted by <length> in this specification) is a <number> (with or without a decimal point) immediately followed by a unit identifier (e.g., px, em, etc.). After a zero 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.

If a negative length value is set on a property that does not allow negative length values, the declaration is ignored.

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

There are three types of length units: relative units, device units, and physical units.

Relative length units specify a length relative to another length property. Style sheets that use relative units will can more easily scale from one medium to another (e.g., from a desktop display to a laser printer) output environment to another.

Relative units are:

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. [...]

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 pixel unit refer to the whole number of device pixels that best approximates the reference pixel. It is recommended that the reference pixel be the visual angle of one pixel on a device with a pixel density of 96dpi 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.0213 degrees.

For reading at arm's length, 1px thus corresponds to about 0.26 mm (1/96 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.20 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 inches) results in a px of 0.26 mm, while a reading distance of 3.5 m (12 feet) requires a px of 1.3 mm.

Showing that pixels must become larger if the viewing distance increases   [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).

Showing that more device pixels (dots) are needed to cover a 1px by 1px area on a high-resolution device than on a low-res one   [D]

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

Example(s):

In the following rules, the computed 'text-indent' value of "h1" elements will be 36px, not 45px, if "h1" is a child of the "body" element. 


body {
  font-size: 12px;
  text-indent: 3em;  /* i.e., 36px */
}
h1 { font-size: 15px }

Device length units are fixed in relation to each other and related to the physical properties of the device. The device units consist of the px, pt, and pc units.

For a CSS device, these dimensions are either anchored (i) by relating the pixel unit to the reference pixel or (ii) by relating the point unit to the PostScript point (1/72nd of an inch). For print and similar output media, the anchor unit should be the point. For other devices, especially lower-resolution devices, and devices with unusual viewing distances, it is recommended instead that the anchor unit be the pixel unit. For such devices it is recommended that the pixel unit refer to the whole number of device pixels that best approximates the reference pixel.

The reference pixel is the visual angle of one pixel on a device with a pixel density of 96dpi 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.0213 degrees. For reading at arm's length, 1px thus corresponds to about 0.26 mm (1/96 inch).

Example: The following rules are all equivalent.


h4  { font-size: 16px }    /* px */
h4  { font-size: 12pt }    /* points */
h4  { font-size:  1pc }     /* picas */

Note that this definition of the point and pica units differs from previous versions of CSS. In previous versions of CSS, the point and the pica were physical units and not related to the pixel unit. (This change was made because the use of points in much existing content relies on the assumption of 96dpi and the resulting 4:3 ratio of pixels to points.)

The image below illustrates the effect of viewing distance on the size of a reference pixel: a reading distance of 71 cm (28 inches) results in a reference pixel of 0.26 mm, while a reading distance of 3.5 m (12 feet) results in a reference pixel of 1.3 mm.

Showing that pixels must become larger if the viewing distance increases   [D]

This second image illustrates the effect of a device's resolution on the pixel unit: an area of 1px by 1px is covered by a single dot in a low-resolution device (e.g. a typical computer display), while the same area is covered by 16 dots in a higher resolution device (such as a printer).

Showing that more device pixels (dots) are needed to cover a 1px by 1px area on a high-resolution device than on a low-res one   [D]

Absolute Physical length units are related to physical measurements. They are only useful when the physical properties of the output medium are known.

If the effective resolution of a device is not known (as, for example, in most projection environments), then the UA must treat the inch as equivalent to 72 CSS points (96px) and scale all other physical units accordingly. However, if the resolution is known, the UA must use this information to map the physical units to the actual physical measurements.

Authors should avoid mixing device units and physical units, as their relations to each other will change depending on the output device.

Example(s):


h1 { margin: 0.5in }      /* inches  */
h2 { line-height: 3cm }   /* centimeters */
h3 { word-spacing: 4mm }  /* millimeters */
@page   { margin: 0.5in }     /* inches  */
.button { height: 2cm }       /* centimeters */
small   { font-size: 2.8mm }  /* millimeters */
h4 { font-size: 12pt }    /* points */
h4 { font-size: 1pc }     /* picas */

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