CSS px is an Angular Measurement

http://inamidst.com/stuff/notes/csspx

by ned • 14 years ago

129 60 14 years ago

inamidst.com

nthitz• 14 years ago

Ok, but does it matter?

wmf5• 14 years ago

Only to people who freak out when they realize that 1 px = 2 pixels on Retina displays.

tlb2• 14 years ago

That includes me. Making a pixel not be a pixel is surely one of the great pooch-screws of modern standards. 'pt' existed to be resolution-independent.

kwamenum86• 14 years ago

I think the important part is that setting something to be 1000px wide does not mean it will take up 1000 pixels on a 1000 pixel wide screen.

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

voyou2• 14 years ago

"all desktop browsers ignore this spec and treat each pixel as a pixel"

That's not ignoring the spec, though, it's following it. Where the device pixel is close to the reference pixel (as it is, on desktop browsers), the px measurement is supposed to represent one device pixel. See the CSS 2.1 spec: http://www.w3.org/TR/CSS2/syndata.html#length-units

Stratoscope• 14 years ago

> To my knowledge, all desktop browsers ignore this spec and treat each pixel as a pixel.

Not really. Most desktop browsers support pixel scaling with Ctrl+Plus and Ctrl+Minus or user preferences, and they may even remember this setting for each domain.

So not only is a CSS pixel not always a device pixel, but it may be a different (fractional) number of device pixels on different websites.

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

crazygringo• 14 years ago

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

gwillen4• 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.)

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

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

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

gwillen4• 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

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

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

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.

javajosh2• 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".

ned• 14 years ago

I'm afraid this boat has long sailed. The "pixel" term is in the CSS 2.1 Spec. It's set in stone.

Personally I've made peace with it. I say either "CSS pixels" or "device pixels", depending on what I want to express.

And although the high resolution screens have only made the difference between the two more visible, it was there since Opera featured full pages zoom many years ago, and when Mobile Safari introduced the "viewport" meta-tag in 2007.

JoshTriplett8• 14 years ago

Unfortunately, redefining "px" from its original meaning as "device pixels" to a new meaning of "probably one 96th of an inch except on mobile browsers where ..." means that CSS no longer has any way to express "device pixels".

gauravk922• 14 years ago

So basically use em, like we should have all along?

JoshTriplett8• 14 years ago

Use em, yes, but meanwhile "px" should have continued to mean "pixel", not "96th of an inch except on mobile where ...". Occasionally you really do need to talk about pixels in CSS, and redefining "px" makes that impossible.

bzbarsky7• 14 years ago

High-resolution devices (that includes iPhone 4 and iPad 3, but also every single printer anyone's used in the last 5+ years) are exactly why the spec says what it says. The only other option was to not have a "px" unit in the spec at all.

I mean, think about it. Say you have a 600dpi printer. Take a typical web page that sets its body element to be 1000px wide, because the person writing it was using a 96dpi display. If "px" really meant "smallest controllable dot", that web page would print about 1.66 inches wide. Which is obviously undesirable. On the other hand, if "px" means "the length that looks about as long as one pixel on a 96dpi display" then the same web page would print about 8 inches wide, which is probably much closer to what both author and user wanted.

This is also exactly why Apple did the "pixel doubling" thing on iPhone 4 and iPad 3: it was done to prevent existing content that made certain assumptions about the visible size of "px" from breaking.

alexchamberlain• 14 years ago

A pixel is the smallest controllable dot on a screen. The spec shouldn't have changed the definition of this, but introduced a new unit instead. Personally, I'd have both!

jonah3• 14 years ago

Confusion between px and dpi are common for people who haven't done work for both screen and print:

Screens are more accurately measured in PPI (pixels per inch) while the smallest elements a printer can produce (more akin to each of the 8 bit sub-pixels on a screen) are measured in DPI (dots per inch). Since ink is 1 bit more smaller elements (dots) are needed in some sort of dithered pattern to represent grays and colors.

Using halftone screening [1] the image elements are called lines and so a 600dpi printer is capable of producing 85–105 LPI (lines per inch)[2].

The lines per inch of print are more analogous to the pixels per inch of a screen than dots per inch are.

So, that 96ppi LCD and the 600dpi printer have around the same information density for practical purposes.

[1] http://en.wikipedia.org/wiki/Halftone [2] http://en.wikipedia.org/wiki/Halftone#Resolution_of_halftone...

tantalor• 14 years ago

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

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

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

kickingvegas2• 14 years ago

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

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

CSS px is an Angular Measurement

Related Stories