+
Showing that pixels must become larger if the + viewing distance increases +
A number with a unit identifier is a number immediately followed by a unit identifier. - -
-border-left: -1.2em --
A string is a sequence of characters enclosed by double quotes or single quotes. Double quotes cannot occur inside double quotes, unless escaped (as '\"' or as '\22'). Analogously for single quotes ("\'" or "\27"). @@ -459,201 +449,318 @@ Percentages: the ''<percentage>'' If the value is outside the allowed range, the declaration is invalid and must be ignored. -
Lengths are denoted by <length> in the property -definitions. Lengths refer to horizontal or vertical measurements. -Lengths are numbers with a unit identifier. After the '0' length, the -unit identifier is optional.
+Lengths refer to distance measurements and are denoted by
+ <length> in the
+ property definitions.
+ A length is a dimension. A zero length may be represented
+ instead as the <number> ''0''. (In other words,
+ for zero lengths the unit identifier is optional.)
Some properties allow negative length values, but this may -complicate the formatting and there may be implementation-specific -limits. If a negative length value is allowed but cannot be supported, -it should be converted to the nearest value that can be supported.
+ A dimension is a number immediately followed by a + unit identifier. It corresponds to theDIMENSION token in the
+ grammar.
+ [[!CSS21]] Like keywords, unit identifiers are case-insensitive within
+ the ASCII range.
-There are several types of length units. Relative length -units specify a length relative to other lengths, -while absolute length units express fixed lengths. +
Properties may restrict the length value to some range. + If the value is outside the allowed range, the declaration is invalid + and must be ignored. -
While some properties allow negative length values, this may + complicate the formatting and there may be implementation-specific + limits. If a negative length value is allowed but cannot be supported, + it must be converted to the nearest value that can be supported.
-Absolute length units are useful when the physical -properties of the output medium are known. The absolute units are:
+In cases where the used length cannot be + supported, user agents must approximate it in the + actual value. -
| unit | definition - |
|---|---|
| cm | centimeters - |
| mm | millimeters - |
| in | inches; 1 inch is equal to 2.54 centimeters. - |
| pt | points; 1pt is equal to 1/72 inch. - |
| pc | picas; 1 pica is equal to 12 points. - |
There are two types of length units: relative and absolute. -
+Relative length units specify a + length relative to another length. Style sheets that use relative + units can more easily scale from one output environment to another. + +
The relative units are:
+ +
| unit | relative to + |
|---|---|
| ''em'' + | font size of the element + |
| ''ex'' + | x-height of the element's font + |
| ''ch'' + | width of the "0" glyph in the element's font + |
| ''rem'' + | font size of the root element + |
| ''vw'' + | viewport's width + |
| ''vh'' + | viewport's height + |
| ''vm'' + | minimum of the viewport's height and width + |
Child elements do not inherit the relative values as specified for + their parent; they inherit the computed values. + +
Aside from ''rem'' (which refers to the font-size of the root element), + the font-relative lengths refer to the computed font metrics of the + element on which they are used. + The exception is when they occur in the value of the 'font-size' property + itself, in which case they refer to the font metrics of the parent element + (or the font metrics corresponding to the initial values of the 'font' + property, if the element has no parent). + +
Equal to the computed value of the 'font-size' property of + the element on which it is used. + +
The rule:
+h1 { line-height: 1.2em }
+ means that the line height of h1 elements will be
+ 20% greater than the font size of h1 element. 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.
Equal to 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 do not contain an "x". +
The x-height of a font can be found in different ways. Some fonts + contain reliable metrics for the x-height. If reliable font metrics + are not available, UAs may determine the x-height from the height + of a lowercase glyph. One possible heuristic is to look at how far + the glyph for the lowercase "o" extends below the baseline, and + subtract that value from the top of its bounding box. In the cases + where it is impossible or impractical to determine the x-height, + a value of 0.5em must be assumed. + +
Equal to the advance measure of the "0" (ZERO, U+0030) glyph + found in the font used to render it. + +
Equal to the computed value of 'font-size' on the root element. +
When specified on the 'font-size' property of the root element, the + ''rem'' units refer to the property's initial value.
+The viewport-relative lengths are relative to the size of the initial + containing block. When the height or width of the viewport is changed, + they are scaled proportionally. + +
In the example below, if the width of the viewport is 200mm,
+ the font size of h1 elements will be
+ 16mm (i.e. (8×200mm)/100).
+
h1 { font-size: 8vw }
+ Do we need this now that we have the min() function? +
The absolute length units are fixed in relation to + each other and anchored to some physical measurement. + They are mainly useful when the output environment is known. + The absolute units consist of the physical units (in, cm, mm, pt, pc) + and the px unit: + +
| unit | definition + |
|---|---|
| ''cm'' + | centimeters + |
| ''mm'' + | millimeters + |
| ''in'' + | inches; 1in is equal to 2.54cm + |
| ''px'' + | pixels; 1px is equal to 1/96th of 1in + |
| ''pt'' + | points; 1pt is equal to 1/72nd of 1in + |
| ''pc'' + | picas; 1pc is equal to 12pt + |
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 */
+h4 { font-size: 1pc } /* picas */
+p { font-size: 12px } /* px */
In cases where the specified length cannot be supported, user agents must -approximate it in the actual value.
+For a CSS device, these dimensions are either anchored (i) by + relating the physical units to their physical measurements, or + (ii) by relating the pixel unit to the reference pixel. + For print media and similar high-resolution devices, the anchor unit + should be one of the standard physical units (inches, centimeters, etc). + For 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. + +
Note that if the anchor unit is the pixel unit, + the physical units might not match their physical measurements. + Alternatively if the anchor unit is a physical unit, the pixel + unit might not map to a whole number of device pixels.
+ +Note that this definition of the pixel unit and + the physical units differs from previous versions of CSS. In + particular, in previous versions of CSS the pixel unit and the + physical units were not related by a fixed ratio: the physical + units were always tied to their physical measurements while the + pixel unit would vary to most closely match the reference pixel. + (This change was made because too much existing content relies + on the assumption of 96dpi, and breaking that assumption breaks + the content.) -
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). + +
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. -
Relative units are:
+
+
Showing that pixels must become larger if the + viewing distance increases +
| unit | relative to - | |||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| em | the font size of the element (or, to the parent element's font size if set on the 'font-size' property) - | |||||||||
| ex | the x-height of the element's font - | |||||||||
pxviewing device
-| rem | the font size of the root element
- | vw | the viewport's width
- | vh | the viewport's height
- | vm | the viewport's height or width, whichever is smaller of the two
- | ch | The width of the "0" (ZERO, U+0030) glyph found in the font for the font size used to render. If the "0" glyph is not found in the font, the average character width may be used. How is the "average character width" found?
- | |
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 +
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. +
When specified on the 'font-size' property of the root element, the ''em'' units refer to the -property's initial value.
+Angle values are dimensions denoted by + <angle>. + The angle unit identifiers are: +
For example, a right angle is '90deg' or '100grad' or '0.25turn' or + approximately '1.570796326794897rad'.
-The rule:
+
-h1 { line-height: 1.2em }
-
+ Time values are dimensions denoted by + <time>. + The time unit identifiers are: -
means that the line height of h1 elements will be 20% greater than the font size of the elements. On the other hand:
-h1 { font-size: 1.2em }
-
+ Properties may restrict the time value to some range. + If the value is outside the allowed range, the declaration is invalid + and must be ignored. -
means that the font size of h1 elements will be 20%
-greater than the font size inherited by h1 elements.
Frequency values are dimensions denoted by + <frequency>. + The frequency unit identifiers are:
- -
-h1 { margin: 0.5em } /* em */
-h1 { margin: 1ex } /* ex */
-p { font-size: 12px } /* px */
-
-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 -do not contain an "x". Should we say that ex is 0.5em if no better value exists?
- -When specified on the 'font-size' property of the root element, the ''ex'' units refer to the -property's initial value.
- - -The pixel unit, px is relative to the resolution of the viewing device. -For example, the viewing device can be a computer display or a -printer. Normally, the pixel unit refers to physical pixels of the -viewing device. However, 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 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.26mm -(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.21mm. 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 71cm (28 inch) results in a px of 0.26mm, while a -reading distance of 3.5m (12 feet) requires a px of 1.3mm.
- -
-
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).
- -
-
The rem unit ("root em") is -relative to the computed value of 'font-size' on the root element. - -
When specified on the 'font-size' property of the root element, the -''rem'' units refer to the property's initial value.
- -The vw unit is relative to -the viewport's width. The viewport's width is equal to 100 -'vw' units. - -
-h1 { font-size: 8vw }
-
-If the width of the viewport is 200mm, the font size of h1 elements will be 16mm ((8×200)/100). When
-the width of the viewport is changed (for example, when the browser
-window is enlarged), lengths specified in the 'vw' unit are scaled
-proportionally.
-
-
The vh unit is relative to -the viewport's height. The viewport's height is equal to 100 -'vh' units. When the height of the viewport is changed (for example, -when the browser window is enlarged), lengths specified in the 'vh' -unit are scaled proportionally. - - -
Do we need this now that we have the min() function? - -
The vm unit is relative to -the viewport's height or width, whichever of the two is smaller. -The minimum of the viewport's width/height is equivalent to 100 ''vm'' -units. When the height or width of the viewport is changed, lengths -specified in the 'vm' unit are scaled proportionally. - +
For example, when representing sound pitches, 200Hz (or 200hz) + is a bass sound, and 6kHz (or 6khz) is a treble sound.
Angle values (denoted by <angle> in the text) are -used with aural cascading style sheets.
- -Their format is a <number> -immediately followed by an angle unit identifier.
- -Angle unit identifiers are:
-Angle values should be normalized to the range -0-360deg by the user agent. For example, -10deg and 350deg are equivalent.
- -For example, a right angle is '90deg' or '100grad' or -'1.570796326794897rad'.
- - - -Time values are denoted by <time> in the text. Their format is a <number> immediately -followed by a time unit identifier.
- -Time unit identifiers are:
- -Time values are always positive. - - -
Frequency values (denoted by <frequency> in the text) are used with aural cascading style sheets.
- -Their format is a <number> immediately -followed by a frequency unit identifier.
- -Frequency unit identifiers are:
-For example, 200Hz (or 200hz) is a bass sound, and 6kHz (or 6khz) is a -treble sound.
- -Frequency values are always positive. - - - -
Describe the feature fully here, not just a delta from CSS 21.