An Inquiry Into Values
Example: Units compared
|
| ||||
| ||||
|
|
This document shows the various units in action. There are seven paragraphs in each section, and each has an indent specified in a different unit. All indents except for the last one in each section are equal to 1 inch. The absolute units used are set at the correct values to be equal (1 inch = 2.54 cm = 25.4 mm = 72pt = 6pc). The relative values for em and ex are different for each section, but are also equal to an inch (12em = 12 × 6pt = 6em = 6 × 12pt = 4em = 4 × 18pt = 72pt = 1in). The pixel measurements cannot be set to exactly one inch (unless you happen to have a display with exactly 100dpi resolution), which is an example of the weakness of this unit.
Normally, the ex values should not be equal to an inch, but both Explorer and Navigator set an ex to be equal to half an em, rendering the value slightly useless. Also, you'll notice that Navigator doesn't quite get the em and ex values right; another case of Navigator inheriting actual values instead of computed values, most probably.
BODY { background-color: black; color: white; } DIV.six P { font-size: 6pt; } DIV.twelve P { font-size: 12pt; } DIV.eighteen P { font-size: 18pt; } P.blurb { color: black; font-size: medium !important; } P { margin: 0.1cm; } DIV { background-color: white; border: solid 2px black; } SPAN { background-color: #888; }
<DIV CLASS="six"> <P CLASS="blurb">Absolute and relative units with 6pt text:</P> <P STYLE="text-indent: 25.4mm"><SPAN>This is a paragraph with 25.4mm of indent.</SPAN></P> <P STYLE="text-indent: 2.54cm"><SPAN>This is a paragraph with 2.54cm of indent.</SPAN></P> <P STYLE="text-indent: 1in"><SPAN>This is a paragraph with 1in of indent.</SPAN></P> <P STYLE="text-indent: 72pt"><SPAN>This is a paragraph with 72pt of indent.</SPAN></P> <P STYLE="text-indent: 6pc"><SPAN>This is a paragraph with 6pc of indent.</SPAN></P> <P STYLE="text-indent: 12em"><SPAN>This is a paragraph with 12em of indent.</SPAN></P> <P STYLE="text-indent: 24ex"><SPAN>This is a paragraph with 24ex of indent.</SPAN></P> <P STYLE="text-indent: 100px"><SPAN>This is a paragraph with 100px of indent.</SPAN></P> </DIV> <DIV CLASS="twelve"> <P CLASS="blurb">Absolute and relative units with 12pt text:</P> <P STYLE="text-indent: 25.4mm"><SPAN>This is a paragraph with 25.4mm of indent.</SPAN></P> <P STYLE="text-indent: 2.54cm"><SPAN>This is a paragraph with 2.54cm of indent.</SPAN></P> <P STYLE="text-indent: 1in"><SPAN>This is a paragraph with 1in of indent.</SPAN></P> <P STYLE="text-indent: 72pt"><SPAN>This is a paragraph with 72pt of indent.</SPAN></P> <P STYLE="text-indent: 6pc"><SPAN>This is a paragraph with 6pc of indent.</SPAN></P> <P STYLE="text-indent: 6em"><SPAN>This is a paragraph with 6em of indent.</SPAN></P> <P STYLE="text-indent: 12ex"><SPAN>This is a paragraph with 12ex of indent.</SPAN></P> <P STYLE="text-indent: 100px"><SPAN>This is a paragraph with 100px of indent.</SPAN></P> </DIV> <DIV CLASS="eighteen"> <P CLASS="blurb">Absolute and relative units with 12pt text:</P> <P STYLE="text-indent: 25.4mm"><SPAN>This is a paragraph with 25.4mm of indent.</SPAN></P> <P STYLE="text-indent: 2.54cm"><SPAN>This is a paragraph with 2.54cm of indent.</SPAN></P> <P STYLE="text-indent: 1in"><SPAN>This is a paragraph with 1in of indent.</SPAN></P> <P STYLE="text-indent: 72pt"><SPAN>This is a paragraph with 72pt of indent.</SPAN></P> <P STYLE="text-indent: 6pc"><SPAN>This is a paragraph with 6pc of indent.</SPAN></P> <P STYLE="text-indent: 4em"><SPAN>This is a paragraph with 4em of indent.</SPAN></P> <P STYLE="text-indent: 8ex"><SPAN>This is a paragraph with 8ex of indent.</SPAN></P> <P STYLE="text-indent: 100px"><SPAN>This is a paragraph with 100px of indent.</SPAN></P> </DIV>
