Converting between physical pixels and CSS pixels

Question

Mozilla's documentation from elementFromPoint explains that the coordinates are not in physical pixels, but "CSS pixels". Exactly what are CSS pixels? I was under the impression that a pixel in CSS was the same as the physical pixel.

If this is not the case, how does one convert between physical and CSS pixels?

Answer 1

A pixel is a physical screen pixel as far as any web page can reasonably concern itself.

The wording ‘CSS pixel’ refers to a pixel as defined in CSS 2

the whole number of device pixels that best approximates the reference pixel. It is recommended that the reference pixel be 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.

What this is saying is that a CSS pixel is a device pixel for the normal, simple screen cases. However, for specialist super-high-res screens where the OS scales up its normal dimensions by two, a CSS pixel may be two device pixels wide.

We now also have a ‘zoom’ feature in most browsers, which will naturally change the size of the CSS pixel (along with all other units) so it doesn't match a device pixel.

Answer 2

As I'm sure you know, CSS provides a number of different units for representing length. Some are based on physical, real-world measurements (inches, millimeters, points) while others are relative to something else (em width, percentage).

But pixels are neither of these. Originally, they were (as you assumed) merely the smallest addressable dot on a user's screen. However, this is problematic for a number of reasons:

• The renderer may actually be using sub-pixel positioning to avoid rounding errors.
• The output device may not have pixels - a ten-dot font on a 600dpi printer is unlikely to reflect what the designer actually wanted.
• Similar to printing, pages designed for common, low-resolution displays (72-96dpi) may be unreadable on high-resolution displays.
• Modern browsers offer powerful tools to scale / magnify pages.

And so CSS pixels are a useful abstraction: they have well-defined relations to other measurements (at least, within a given browser...) and thus page designers can rely on the results looking reasonably close to their designs even when the browser must change the relationship to actual, device pixels.

To answer your second question, you don't convert between physical and CSS pixels. That would defeat the whole point by destroying an abstraction that the renderer needs in order to operate properly. Gecko does provide a way to determine the relationship, but only to chrome scripts - normal web pages should remain blissfully unaware...

Further reading: Units Patch Landed