CSS px is an Angular Measurement
inamidst.com
CSS px is an Angular Measurement
1–10 of 62 posts
Re: CSS px is an Angular Measurement
#2Ok, but does it matter?
Re: CSS px is an Angular Measurement
#3Ok, but does it matter?
Only to people who freak out when they realize that 1 px = 2 pixels on Retina displays.
Re: CSS px is an Angular Measurement
#4Ok, but does it matter?
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.
Re: CSS px is an Angular Measurement
#5This 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.
Re: CSS px is an Angular Measurement
#6Re: CSS px is an Angular Measurement
#7Ok, but does it matter?
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.
Re: CSS px is an Angular Measurement
#8Earlier quoted context omitted.
Only to people who freak out when they realize that 1 px = 2 pixels on Retina displays.
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.
If they had set 1 px = 1 pixel, almost all Web pages would be unreadably small. AFAIK, Web designers don't use pt.
Re: CSS px is an Angular Measurement
#9Earlier quoted context omitted.
Only to people who freak out when they realize that 1 px = 2 pixels on Retina displays.
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.
I'm not a web designer. Can you explain to me why it's important to be able to position/size something to exactly N pixels, rather than to exactly kN pixels (where k is some integer decided by the browser implementor)?
Re: CSS px is an Angular Measurement
#10Interesting. 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.