
CSS px is an Angular Measurement - ned
http://inamidst.com/stuff/notes/csspx
======
gwillen
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
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
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.

~~~
modeless
I agree that a spherical display the size of a monitor or TV would be
unweildy; however a head-mounted display with a large field of view would work
best if it was curved.

~~~
jonah
Well, if you want to program for a spherical display there's the 30 foot
diameter AlloSphere: <http://www.allosphere.ucsb.edu/>

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

~~~
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...](http://en.wikipedia.org/wiki/Halftone#Resolution_of_halftone_screens)

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

------
colanderman
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
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
Ok, but does it matter?

~~~
JoelSutherland
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>

~~~
voyou
"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>

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

~~~
JoshTriplett
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
If you don't mind my asking: which devices?

~~~
JoshTriplett
Take a look at [http://robert.ocallahan.org/2010/08/css-units-changes-
landed...](http://robert.ocallahan.org/2010/08/css-units-changes-
landed_20.html) for some of the details.

------
tantalor
Example Moon in px: <https://gist.github.com/2025080>

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

