[javajosh]

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]

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.

[JoshTriplett]

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

[bzbarsky]

What are the use cases for expressing "device pixels" in a world of widely varying (both across devices and in time) device pixel densities?

[bzbarsky]

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.

[jonah]

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

[bzbarsky]

Interesting. Do printers use halftone screens for pure black-and-white content as well?

[jonah]

If it's pure crisp black like text, then no.

Sometimes pure black is printed incorrectly and looks "fuzzy" with dots around the edges - in that case it is rendered with a halftone screen.

[alexchamberlain]

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!

[bzbarsky]

Everyone was already using the existing "px" unit because UAs had shipped it. Would you have preferred that every single web page broke on high-res devices (so that no manufacturer would ever introduce any high-res devices to the market) to the status quo?

What would you have used the "device pixel" unit for, exactly?

[gauravk92]

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

[JoshTriplett]

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.

[gauravk92]

I was at the same time telling myself that we really need to start using em more often. I have used px so many times at this point because it's more convenient for precise aligning. This is actually going to be a problem considering retina display macbooks might be coming soon.

[bzbarsky]

It's not going to be a problem, precisely because a "px" in CSS doesn't mean an actual device pixel.

And that's because we've had "retina" devices for many years now, called "printers" and CSS was designed to deal with that situation from the start.