CSS px is an Angular Measurement

CSS px is an Angular Measurement(inamidst.com)

129 points by ned 14 years ago | 60 comments

gwillen 14 years ago |

This is dumb. The fact that one pixel subtends a particular visual angle does not imply that N pixels subtend N times that angle. It should be very plain to anybody implementing or using a rendering engine that pixels are intended to be linearly additive. This implies that N pixels will subtend less than N times the angle one pixel subtends. On a flat screen, this is normal and expected, because a pixel further from the eye will subtend less angle than a pixel closer to the eye.

modeless 14 years ago | |

The fact that this measurement is an approximation (and a very good one in fact) doesn't make it "dumb". In fact, it's flat displays that are "dumb". An optimal display would be curved so that each pixel subtends a roughly equal visual angle, and it's only the fact that most displays subtend a relatively small visual angle that allows us to approximate this with flat displays.

nwatson 14 years ago | | |

A curved display (let's say, spherical) centered approximately at the "primary" observer's eyeballs whose pixel elements all subtend equal solid angles would (a) lead to weird unintuitive and hard-to-program-for locations in their most natural expressions the further you wandered from the center-horizontal or center-vertical row/column of pixels; (b) make it very hard to those whose eyeballs aren't smack-dab in the center of the sphere to make an intuitive mapping from their distorted view of the screen to something that makes sense.

A flat screen is best for general use.

voyou 14 years ago | |

You're right, and the article linked here is wrong. The CSS spec doesn't say that px is an angular measurement, and the formula given that is supposed to convert between px and radians has no basis in the spec. The spec specifically defines px as a length; angular measurements only become relevant in calculating the reference pixel, which is a length used to define the size of 1px in circumstances where physical pixels are significantly different in size from the physical pixels of a computer monitor.

kijin 14 years ago | | |

OK, so based on the following spec:

> 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...

It would seem that the reference pixel is simply 1/2688 of the typical distance between your eyes and the device. If a device is meant to be used at half the "arm's length" distance (14 in), the reference pixel on that device would be only half as large. If a device is meant to be used at 3x times the distance (84 in), the reference pixel would be 3x larger. Much easier than angular diameters.

crazygringo 14 years ago | |

That's actually a very good point, don't know why you're being downvoted.

gwillen 14 years ago | | |

I find it interesting that I was downvoted to the negatives, then you posted this reply, and then I got upvoted to the top. I wonder what the causation is there.

I suspect I know why I was downvoted; I used unnecessary emotive language ("dumb") and didn't explain my point clearly. Most of the rest of the commenters were focused on one part of the article's point, which is very relevant -- the idea that a pixel is no longer a pixel, but a particular fraction of an inch of screen space. I was complaining about a different part, which is the article author's claim that the function mapping real pixels to CSS pixels is nonlinear (which I think is just a misreading of what the spec intended.)

javajosh 14 years ago | |

You're right: this implies that a browser needs to render pixels at the edges of the screen differently than the ones in the middle to fully conform to the spec, particularly very wide (e.g. 30") displays and/or when your face is very close to the screen.

gwillen 14 years ago | |

Is anybody else having problems with notifo-based comment notifications? I am receiving them, but the links stopped working sometime between Jan. 22 and March 8.

ars 14 years ago | | |

http://blog.notifo.com/notifo

javajosh 14 years ago |

This is one of the more important Hacker News submissions I've seen in a long time. It seems that there is, potentially, a fundamental disconnect between what "px" is supposed to mean and what it means in practice. Given the incredible importance of the web, particularly the front-end of the web, and the extraordinary increases in screen resolution (today the iPhone 4 and iPad 3, tomorrow most computers), it's very important to resolve this discrepancy.

Personally, I'm disgusted at the W3C standard. It's a great idea to have an angular measure (really great) but to call it a "pixel" is horrible. A pixel is the smallest controllable dot on a physical display, and nothing else. Call it an "aixle" abbreviated "ax" and short for "angular pixel" but don't overload the term "pixel".

colanderman 14 years ago |

Interesting. The angular resolution of the human eye is about 0.02° according to Wikipedia (http://en.wikipedia.org/wiki/Naked_eye#Basic_accuracies), which, using the provided calculator on this page, corresponds very nearly to one pixel (0.938 to be exact). Pretty sweet.

yonran 14 years ago |

Not only is the definition of pixel unexpected, but 1in is now defined to be 96px in CSS 2.1, because this was the default in Windows for so many years. In retrospect, given whole page zoom from Opera and high-resolution displays from Apple, probably CSS shouldn't have had units named "in" and "px" at all but instead should have had a single unit like SVG.

nthitz 14 years ago |

Ok, but does it matter?

JoelSutherland 14 years ago | |

Increasingly.

To my knowledge, all desktop browsers ignore this spec and treat each pixel as a pixel. (This will likely change with the upcoming Retina Macbook Pros)

For a while all mobile devices treated all pixels as a pixel. But then iOS and Android devices began to dramatically increase their DPI. In the case of iOS, the math is easy, everything gets multiplied by 2 (though chasing pixel precision in a browser does still require hacks [1]).

Android is much more fragmented (go figure). System-wide, there is a DPI setting that influences the viewport pixel-size that the browser claims. For a 800x480 screen, a 1.5x multiplier is used. The browser advertises the mobile-standard 320px viewport width.

For the most part, this is good because websites are easier to design for and look roughly as designed on more devices. On ultra-high DPI devices, they even appear pixel-precise.

The problem is on the very common mid-dpi devices like the millions of 4" 800x480 devices out there. Pixel-level control is lost, and the pixels are large enough for this to be visible. Some people don't care about pixel-level design precision, some people do. Most people, though, will recognize that a webpage looks not-quite-perfect even if they can't put a finger on it.

We're almost out of the woods on phones as DPI is quickly approaching the upper 200's across the board. Unfortunately we're just entering it for non iOS tablets.

[1] http://bradbirdsall.com/mobile-web-in-high-resolution

kickingvegas 14 years ago |

I've mentioned this before and I'm not the first to say it, but it's time to stop using px and start using in its place absolute measurements like inches or millimeters. It's the only sane approach to supporting different resolution displays.

bzbarsky 14 years ago | |

Absolute measurements (which no longer exist in CSS) are a sane approach to support different resolution displays that are all used at the same viewing distance.

Using absolute measurements to size things on a web page that is then viewed on a TV (viewing distance in the 5-15ft range), a tablet (viewing distance in the 1-2ft range), and an eyeglass HUD (viewing distance in the 1-3in range) would be a disaster.

The fact that people _were_ using inches and millimeters on the web and expecting them to somehow work across all these devices is why they're all now defined in terms of CSS reference pixels...

JoshTriplett 14 years ago | |

Unfortunately, devices stopped actually making "mm" a millimeter long a while ago; for instance, various mobile devices scale "mm" by a factor of 2 because they assume that sites don't actually want a physical unit of measure.

kickingvegas 14 years ago | | |

If you don't mind my asking: which devices?

tantalor 14 years ago |

Example Moon in px: https://gist.github.com/2025080

evincarofautumn 14 years ago |

This matters more still for a display with head-tracking. As I read this, the apparent angular size of 1px within a human’s FOV ought to remain constant, regardless of viewer position or physical pixels.