Is it true that the pt unit will ALWAYS physically measure consistently?
Let's say I want to use the pt unit to make sure that my html pages look consistent across device/browser/os. My understanding of the pt is that it's supposed to be equal to 1/72 of an inch on the screen.
HTML
<html>
<body>
<div></div>
</body>
</html>
CSS
div {
background-color:black;
height: 72pt;
width: 72pt;
}
This produces more or less what looks like a 1" x 1" square on my screen (this is just a screenshot of what I see). However, I can physically put a ruler up to my display and measure it, and the result is more like 1 3/16".
My browser zoom level is 100%, so that is not affecting things. I'm using Chrome on Windows 8.1 with the default font size set (16 in Chrome). My OS scaling level is 100%. I have a 24" monitor set to 1920x1080 resolution. Also of note, Chrome reports that the square is exactly 96x96 px.
This leads me to believe that what I have have heard, that 72pt = 1 physical inch in the real world on any given display/browser/OS combo, is NOT accurate. Is this correct?
Given this behavior, I assume that if I had a 22" monitor with the same resolution, the pixel density would be greater, and thus the square would appear smaller (perhaps closer to being exactly 1" as measured by a physical ruler).
How do Retina displays work with all of this? I assume the square will not appear twice as small (that would be silly). Is the browser doing some kind of internal handling of super high DPI displays? For instance, Chrome seems to have some concept of "device pixel ratio (DPR)" so that it can treat an iPad with a "true" resolution of 2048 x 1536 (DPR 2) as a more standard 1024 x 768. So I assume DPR ends up somewhat normalizing screens of drastically different DPI, but after that has been accounted for, different devices with different DPI/PPI will still see slightly different physical sizes of our square.
Is it true that the pt unit will ALWAYS physically measure consistently?
No, CSS abandoned that requirement in 2011 as most ignored it anyway.
https://www.w3.org/Style/Examples/007/units.en.html has more detailed explanation
The so-called absolute units (cm, mm, in, pt and pc) mean the same in CSS as everywhere else, but only if your output device has a high enough resolution. On a laser printer, 1cm should be exactly 1 centimeter. But on low-resolution devices, such as computer screens, CSS doesn't require that. And indeed, the result tends to be different from one device to another and from one CSS implementation to another. It's better to reserve these units for high-resolution devices and in particular for printed output. On computer screens and handheld devices, you'll probably not get what you expect.
In the past, CSS required that implementations display absolute units correctly even on computer screens. But as the number of incorrect implementations outnumbered correct ones and the situation didn't seem to improve, CSS abandoned that requirement in 2011. Currently, absolute units must work correctly only on printed output and on high-resolution devices.
CSS doesn't define what “high resolution” means. But as low-end printers nowadays start at 300 dpi and high-end screens are at 200 dpi, the cut-off is probably somewhere in between.