Absolute Measurement OS-defined 1 cm

← → ← 1 inch → ← 72 points → ← 96 pixels → cm in pt px 1 cm ≈ 0.393701 in 1 in = 2.54 cm = 72 pt = 6 pc 1 pt = 1⁄12 pc = 1⁄72 in 1 pc = 12 pt = 1⁄6 in 96 px = 1 in (defined by Windows)

CSS (Cascading Style Sheets) technology employs absolute and relative length encoding. Absolute lengths are most useful in the mark-up of pages designed for print, while relative lengths are well suited for screen display. There are, however, no restrictions to when and where the different units can be applied. Otherwise, the illustration above wouldn't work properly.



Commonly used units for absolute length are centimeter (cm), inch (in), point (pt), and pica (pc). Their interrelation is given above. The three displayed squares (cm, in, and pt) are specified via CSS using absolute measurement. The square sizes you see depend somehow on the precision of your hardware and software, including the operating system (OS) under which your browser is running. But otherwise they are absolute—independent of external specifications. In contrast, the pixel (px) unit is variable: it is defined via device and usage—meeting needs of scalability.



Windows has set one inch as 96 pixels by default. Therefore, the above right-most square should have the same size as its two left neighbors; at least, when browsing under Windows. Generally, exact size equality is not guaranteed, since pixel size is device-dependent. It is desirable to have such a length specification that automatically adjusts to a particular device and displays marked-up texts and figures in relation to device proportions. Using the pixel unit in HTML-CSS documents is doing the trick.



Included as <div id='pixels'>px</div> in an HTML document, the olive-colored 96px square in the illustration is obtained with the following CSS code:

div#pixels {

background-color: olive;

color: white;

width: 96px;

height: 96px;

text-align: center;

vertical-align: top;

}



This defines a 96px × 96px square, which may show up as a 1in × 1in square or a smaller or larger square depending on your device—but always with 96px-long edges.

References and other helpful resources

[1] W3school: Measurement Values

[2] W3C: EM, PX, PT, CM, IN, ...

[3] Pixels Per Inch Awareness and CSS Px

[4] DPI and Device-Independent Pixels

