• Home
• The em
  • The em square
  • Font size
• DPI and PPI
  • Screen dots per inch
  • Screen pixels per inch
  • Image dots per inch
• CSS Oddities
  • CSS Inch
  • CSS Pixel
  • CSS3 x-height
• Square Pixels
• Definitions
• Contact

The CSS Inch

Absolute length units Inches. As you might expect, this notation refers to the inches one finds on a ruler ...

Absolute length units are only useful when the physical properties of the output medium are known. The absolute units are: inches — 1 inch is equal to 2.54 centimeters.

Now that would lead you to believe that inches here are always the good old inches we get on our rulers. But you would be wrong!

The programmer has to turn ruler (absolute length) inches into pixels on a screen, as that’s where the results are gong to be displayed, so they have to determine how many pixels there are to a ruler inch on your screen, That’s right, your screen not theirs. How do they do that? - they don’t. The programmer does not know how many pixels make a ruler inch on your screen simply because there is no way they can accurately determine the physical size of your screen. So do they guess how many pixels to an inch? Of course not!

• Inches on a piece of paper are physical inches.
• Inches on a screen are logical inches explained here.
• The screen dpi setting sets the number of pixels in a logical inch.
• Changing the screen dpi setting in Control Panel changes the number of pixels in a logical inch.

It’s as simple as that!!

The CSS inch is a logical inch, not a physical inch.
The CSS centimeter is a logical centimeter, not a physical centimeter.

Look at this Eric Meyer page CSS2 Test Suite: 16.1 text-indent.

The text says “The first line of this paragraph should be indented half an inch”. Should? Well either it is or it isn’t. The literally minded will put their ruler up to the screen, measure the indent, find it’s not half an inch, and explain that by burbling about inches being only a print metric¹. That indent is not half a physical (ruler) inch but half a logical inch. So how many pixels is that indent, on that test page, on your screen?

• If your screen is set to 96 dpi (96 pixels per logical inch) then an indent of half an inch is 48 pixels.
• If your screen is set to 102 dpi (102 pixels per logical inch) then an indent of half an inch is 51 pixels.
• If your screen is set to 80 dpi (80 pixels per logical inch) then an indent of half an inch is 40 pixels.

Go on, count the number of pixels in that indent for yourself! There are any number of programs for counting screen pixels and Meazure is a free one.

1. Most applications let you change text size on screen by choosing a font size specified in points. For computers a point is 1/72 of an inch, so points are inches. When you can change the pixel size of text on screen by specifying its size in inches why would anyone think that inches are only for printing? Well they would if they didn’t understand the difference between paper (physical) inches and screen (logical) inches.