Values, Units, and Colors - Values, Units, and Colors - page 10

Pixel theory
In its discussion of pixels, the CSS specification recommends that in cases where a
display type is significantly different than 96 pixels per inch (ppi), user agents should
scale pixel measurements to a “reference pixel.” CSS2 recommended 90ppi as the ref-
erence pixel, but CSS2.1 and CSS3 recommend 96ppi. The most common example is
a printer, which has dots instead of pixels, and which has a lot more dots per inch than
96! In printing web content, then, it may assume 96 pixels per inch and scale its output
accordingly.
If a display's resolution is set to 1,024 pixels wide by 768 pixels tall, its screen size is
exactly ten and two-thirds inches wide by eight inches tall, and the screen it is filled
entirely by the display pixels, then each pixel will be 1/96 of an inch wide and tall. As
you might guess, this scenario is a fairly rare occurrence. So, on most displays, the actual
number of pixels per inch (ppi) is higher than 96—sometimes much higher. The Retina
display on an iPhone 4S, for example, is 326ppi; the display on the iPad 3,264ppi.
As a Windows 7 user, you should be able to set your display driver to
make the display of elements correspond correctly to real-world meas-
urements. To do so, click Start → Control Panel. In the Control Panel
click Display; then click “Set custom text size (DPI)” in the left sidebar;
then hold a ruler up to the screen and move the slider until the onscreen
ruler matches the physical ruler. Click OK until you're free of dialog
boxes, and you're set.
In Windows XP, the path to the ruler dialog is Start → Control Panel;
double-click Display; click the Settings tab; then click Advanced to re-
veal a dialog box (which may differ on each PC). You should see a drop-
down or other form control labeled “Font Size;” select “Other.”
Resolution Units
With the advent of media queries, three new unit types were introduced in order to be
able to describe display resolution:
Dots per inch ( dpi )
The number of display dots per linear inch. This can refer to the dots in a paper
printer's output, the physical pixels in an LED monitor or other device, or the
elements in an e-ink display such as that used by a Kindle.
Dots per centimeter ( dpcm )
Same as dpi , except the linear measure is one centimeter instead of one inch.
Dots per pixel unit ( dppx )
The number of display dots per CSS px unit, as described previously. As of CSS3,
1dppx is equivalent to 96dpi because CSS defines pixel units at that ratio. Of course,
that ratio could change in future versions of CSS.