How a CSS pixel size is calculated? - css

Question

While delving into CSS units I've encountered a definition of the reference pixel. However, I wasn't able to find a consistent and comprehensive description of its relation to the CSS pixel unit. I've done some research on this matter, yet it's still a little bit unclear to me.
1. Gathered information
1.1 A pixel definition
There are two distinct types/definitions of a pixel:
"Device pixel" — a single physical point on a display.
And:
CSS pixel — a unit most closely matching the reference pixel. [1]
Two parallel concepts under the same name definitely don't clarify the confusion.
I fully understand the purpose of introducing the second one, but I find its nomenclature misleading. The CSS pixel is classified as an absolute unit and:
"Absolute length units are fixed in relation to each other." [1]
The above statement seems pretty obvious for every unit except for the pixel. Following the w3c specification:
"For a CSS device, these dimensions are either anchored (i) by relating the physical units to their physical measurements, or (ii) by relating the pixel unit to the reference pixel.
(...) Note that if the anchor unit is the pixel unit, the physical units might not match their physical measurements. Alternatively if the anchor unit is a physical unit, the pixel unit might not map to a whole number of device pixels." [1]
Considering the aforementioned quotation I assume that absolute units are not all that absolute, since they may be anchored to the reference pixel.
1.2 The reference pixel
The reference pixel itself is actually an angular measurement [2]:
"The reference pixel is the visual angle of one pixel on a device with a pixel density of 96dpi and a distance from the reader of an arm's length. For a nominal arm's length of 28 inches, the visual angle is therefore about 0.0213 degrees." [1]
What is illustrated on the image below:
Despite defining the reference pixel as a visual angle, we can further read:
"For reading at arm's length, 1px thus corresponds to about 0.26 mm (1/96 inch)."
Leaving inconsistencies aside, we are able to establish a value of the angle:
α = 2 * arctan(0.026/142) = 0.02098°
where:
α — a value of the visual angle
Thus a size of the displayed unit equals:
y = 2x * tan(0.01049°)
where:
y — a displayed unit size
x — a reading distance
Given the above formula, in order to calculate a unit size we need to determine what's the actual reading distance. As it may vary among users, its categorisation has been based on a device's DPI.
1.2.1 DPI
For convenience, let's assume that DPI == PPI.
This measurement allows us to guess a display type.
Quick check:
IPhone 6 (4.7", 1334×750): 326 ppi;
Sony Bravia 4K (54.6", 3840×2160): 75 ppi.
So, in general, the bigger PPI the closer to a screen a user sits. The table below [3] presents reading distance recommendations for devices with particular DPI:
———————————————————————————————————————
| DPI | Pixel size | Reading distance |
—————————————————————————————————————————————————————
|PC's CRT | 96 | ~0.2646 mm | ~71 cm |
|display | | | |
—————————————————————————————————————————————————————
|Laptop's LCD | 125 | 0.2032 mm | ~55 cm |
|display | | | |
—————————————————————————————————————————————————————
|Tablet | 160 | ~0.159 mm | ~43 cm |
—————————————————————————————————————————————————————
However, it's unclear to me how those distance values were obtained. Is the relation to DPI described with a function or is it just an empirical observation?
1.2.2 Device Pixel Ratio
The introduction of the Retina display complicated the matter even further. Its PPI tends to be approximately 2 times bigger than non-Retina one's, while a recommended reading distance should remain the same.
Since a CSS pixel size doesn't necessarily correspond with a device pixel size, I assume that the unit size on the Retina display is firstly translated into a reference pixel size (expressed in device pixels) and then multiplied by pixel ratio. Is it correct?
1.2.3 Zooming
While zooming in, the displayed reference pixel size grows [4], ergo a distance from a display grows. It's quite counterintuitive, because it means that we are "stepping away" from the screen, not getting closer to it.
2. Questions
Concluding my doubts and articulating questions:
How a CSS pixel size is calculated when the anchor unit is a physical unit?
How to establish the formula for a relation between DPI and a reading distance?
How a CSS pixel size is calculated for non-standard, high DPI/PPI devices such as printers and Retina Displays?
Also, please correct me if my reasoning is invalid or I am missing something. Thanks for replies.
3. References
W3C Specification
inamidst.com, Sean B. Palmer's site
Mozzilla Hacks
1uirksmode.org

Answer 1

I may be wrong but I don't think it's possible for CSS pixel to have the physical unit as an anchor.
Based on this article:
The px unit is the magic unit of CSS. It is not related to the current
font and also not related to the absolute units. The px unit is
defined to be small but visible, and such that a horizontal 1px wide
line can be displayed with sharp edges (no anti-aliasing). What is
sharp, small and visible depends on the device and the way it is used:
do you hold it close to your eyes, like a mobile phone, at arms
length, like a computer monitor, or somewhere in between, like a book?
The px is thus not defined as a constant length, but as something that
depends on the type of device and its typical use.
UPDATE: I was wrong. It is possible just not implemented in any browser currently. In cases where that is indeed the case, as per spec: "these dimensions are either anchored (i) by relating the physical units to their physical measurements" meaning that 1px will be equal to 1/96th of a physical inch.
As for the relation between DPI and reading distance in the table, it takes that if DPI = 96 then reading distance is ~71cm or 28in and these values are inversely proportional meaning higher DPI will result in a smaller reading distance.
From that it's easy to come up with a formula:
x = 125/96
y = 71/x
where:
x - ratio between second and first DPI value
y - reading distance for second DPI value
For higher resolution devices there is an example given lower in Mozilla Hacks article:
Let’s take iPhone 4 as the most famous example. It comes with a 326
DPI display. According to our table above, as a smartphone, it’s
typical viewing distance is 16.8 inches and it’s baseline pixel
density is 160 DPI. To create one CSS pixel, Apple chose to set the
device pixel ratio to 2, which effectively makes iOS Safari display
web pages in the same way as it would on a 163 DPI phone.
So that means we have two resolutions - physical (PPI) and CSS one (cssppi). It seems that cssppi is used for calculating reference pixel size and then device manufacturers choose how much reference pixels will they map to one CSS pixel (I assume this number is equal to device pixel ratio value but not 100% sure).
Here's table with comparisons for some common devices pixel ratio, PPI, and cssppi: http://mydevice.io/devices/
For more information and reference check following articles:
A List Apart - A Pixel Identity Crisis
Pixels Per Inch Awareness and CSS Px
Physical Size of CSS Units On Smartphones, Tablets & Co

Answer 2

IN THE PAST
1 CSS pixel = 1 pixel on a 96 DPI inch monitor
(common on old windows monitors)
TODAY 1 CSS pixel = (???) pixels on a newer DPI display (smart phones, newer monitors, tv's. etc.)
There are now two different interpretations of the pixel today. The past one and the present one. That's the source of the confusion. But a "CSS pixel" has always been a CSS pixel. It was renamed a "reference pixel" only recently to help associate a CSS pixel's recalculation into "device pixels" on newer HD displays. The old CSS pixel was closely associated with the physical units on screens and printers prior to 2011. At least, the W3C recommendation was asking vendors to follow that spec. It was not till the invention of the iPhone and later HD device screens that the "1 CSS pixel = 1/96th of an inch on a screen" interpretation failed and was abandoned.
The solution was to allow manufacturers with HD screens to "reinterpret", as they like, the "CSS pixel" or "reference pixel" into a new "Device pixel" only they control. So now, how many CSS pixels should fit into a given physical dimension on a screen and its affect on viewers on newer digital devices has changed. The new "device pixel" that tries to follow the 1 CSS pixel = 1/96th of an inch (modified by user viewing distance for smaller screens) no longer applies because screen PPI depth or "pixel density" has increased.
On most newer HD sceens today, the CSS pixel is now recreated across multiple device pixels depending upon the size and PPI of the device. A 72 dpi image on an old Windows monitor would look tiny on a modern iPhone screen, if it did not do that. But you will notice each phone and screen now has its own pixel density (PPI or DPI), screen resolution (pixel width x height), its own physical viewport size (inches), its own default zoom and font resizing systems, its own layout rules (landscape, etc.), and thus their own rules for how they reinterpret the CSS pixel into device pixels (2, 3, 4, etc). You ask what is the formula? I say there is no formula. The industry, in my opinion, does not follow any known standard and has not since abandoning W3C standards after 2010.
Below is some history that may help...
HISTORY OF THE CSS PIXEL
Years ago in the Golden Age of Web Development (pre-2010), defining an "inch" (in) in Cascading Style Sheets would be correctly correlated to an inch on the screen or in print, allowing the 96 pixels per inch to a reader viewing it at arms length always getting the same experience. That was why and how the 96 dots per inch standard was invented. It was designed to force manufacturers to give users the same visual experience with the almighty digital or CSS pixel.
Starting in the 1990's, these CSS standards fell on the shoulders of computer OS manufacturers and their monitors. When it was done right on old Windows and Mac screens prior to 2011, they mapped 96 DPI correctly. You saw Macs and Windows computer screens correctly laying the right pixels per inch onto the screen, so that the CSS "pixel" would fit consistently into it, regardless of manufacturer, vendor, screen, or device. There were visual differences as far as website displays between Macs and Windows due to their slightly different screen dimensions and pixel densities. But that was based on their views of how large or small visuals should be for their viewers. But that did not change the overall CSS standard.
After 2000, an "inch" of website in a browser looked close to an inch on most screens and worked that way for most viewers. Sure, you could increase resolution, or how many pixels could be crammed into a screen. But that did not change the 96 pixels per inch rule, as it worked on the natural assumption a user might choose larger or small text or DPI from the default. This was the same as zoom back then. But after 2000, the CSS pixel and millions of supporting websites fit perfectly on millions of desktop screens, devices, and printed pages.
Prior to 2007, most screens translated every web page and CSS pixel to the "per inch" expectation. So as developers, we initially started trying to fit pixel-based layouts and our favorites font size choices into strict physical layouts using standard 96 dpi and Windows monitors and 72 dpi Mac screens. Of course, after 2001, monitors starting getting larger and resolution settings higher. But everyone knew an inch was still an inch, and a pixel was still a pixel. We could design website layouts to expand and grow based on that 96 DPI standard.
Macs using 72 DPI, we always knew Mac people saw things a little differently, however. As a web developer in 2000, I remember using this system and it worked quite well. But when testing on Macs and Windows, I remember seeing a strange effect...how websites looked slightly larger on Mac screens. Because 72 dpi was the lowest common denominator that is what we used for the default resolution on everything, including sizes of images, web layouts in pixels, etc. That's why there's so much 72 dpi imagery on the web now. But this worked well for over a decade after 2000. CSS pixels worked as expected!
THE IPHONE
After the invention of the iPhone in 2007 the idea of the 96 DPI pixel started to change. Why? The resolution or number of pixels per inch (PPI) increased on tiny screens dramatically. That meant at say 200 PPI, the general resolution of a high density iPhone small screen device, a normal website would look tiny and compressed, the text unreadable and the images less that half their expected size as seen on Windows 96 DPI monitors.
But that is the way the CSS pixel was supposed to work. The way CSS addressed these small-screen, high resolution issues was with the "handheld" media query.
I remember building a website using CSS "handheld" and shifting the pixels in my layout, even revealing higher resolution images for iPhones. This worked initially except for one simple fact.....these new screens and devices REFUSED TO ADOPT THE CSS STANDARDS! Why? They wanted millions of websites to look good out-of-the-box without special CSS adaptions. This is a failure in my book, but se la vi.
So....the W3C by 2011 realized their great standards would never look consistently on these new vendor devices, who wanted quick profits, not standards. So they flipped the definition to start at 96 DPI as a "reference" pixel, then allow vendors to keep creating greater and greater resolution screens but then "reinterpret" the CSS pixel to a "device pixel" they control.
After 2011, the W3C stopped expecting common displays, screens, and devices to correctly define what an absolute dimensional unit in CSS (cm, mm, in, etc) should look like on screens. This was because the vendors making HD screens started increasing resolutions so websites got tinier and tinier until the CSS standards broke. That was when the concept of the "device pixel" was born where devices recreate your CSS pixel by cramming multiple pixels into it.
What does this mean? It means every device automatically regenerates your website design and its reference CSS pixel to a new pixel size. In other words, your website becomes larger and more readable on these tiny screens by default. Your 1 pixel may be remapped to 2 pixels. Average "device pixel" ranges are 2-4 now. Apple iPhone people had no choice in how they chose to translate CSS pixels when their high resolution devices came on the scene. If they didn't adapt to a new device pixel interpretation, we would all be looking at very teeny-tiny 72 dpi GIFs on 400+ dpi retina displays and 4k monitors all over the web. We would have unreadable websites on millions of new modern devices.
You cannot control this. All you can do is focus on avoiding strict pixel-based layouts and PPI/DPI imagery and focus on website layout flexibility. That is why I avoid pixels in 2022 and try and use text-based unit layouts that change based on the user's font-size and using absolute font-size unit layouts and rem/em units rather than pixels. My websites now naturally stretch to fill whatever the screen, phone, monitor, or tv settings use based on the natural size of fonts and text set by the user.
But this is how and why the "device pixel" was born and why pixels now are very difficult to control. The device pixel simply holds double or triple the website pixels given it, in most cases now. It tries to figure out how many web design CSS pixels are crammed into one inch of their physical HD displays.
Kids today building websites just assume its always been that way. They have no clue. That's why most experienced, modern web developers now use relative font sizing and avoid pixels as units for anything. Doing so, your layouts can now stretch based on either the percentages needed to fill the screens and odd view-ports used today, adapt to a user's larger or smaller font sizes, use a user's zoom settings, or just use the default device pixel settings the device uses out of the box. We aren't chained to precise pixel-based layouts any more because of this mess. Pages can stretch in websites to fill what's there. But many kids developing websites still cling to the "css pixel" as if its a God. It's not guys. Its dead.
I think that is how we got here and why new screen technology destroyed what used to be a very simple and elegant website technology. Today its a mess! Why? Because vendors hate standards. They never could come together as a tech industry and define it. There's no money in adopting any of it. So this website pixel translation problem will just get worse as newer devices come online the next 50 years. By then CSS will likely adopt a "hack" that allows us to control how pixels display. In fact in CSS3 you can already sniff for resolutions, set dimensions based on physical view-port sizes, mobile devices, device pixel settings, zoom, media queries, etc.
But those new ideas do not help fix the problem, in my book. They just layer over more complexity and confusion rather than forcing all screen and device manufacturers to use the same, simple CSS pixel, which should be universal across all screens, past and present.