| |||||||||||||
Retina display supportRetina display supportPosted Jan 9, 2013 12:16 UTC (Wed) by niner (subscriber, #26151)In reply to: Retina display support by roc Parent article: Firefox 18 is now available
I thought we were slowly moving past browser differences. But suddenly not even the very basic and most reliable distance unit in CSS is the same anymore? Just great...
(Log in to post comments)
Retina display support Posted Jan 9, 2013 12:34 UTC (Wed) by NAR (subscriber, #1313) [Link]
A Hungarian news portal recently redesigned its look. It doesn't worth mentioning that it works with some browsers and doesn't with others. Even the same browser on the same operating system could lead to different (working vs non-working) results. I my opinion this "web application thing" is a really stupid idea, just doesn't work. It is probably no wonder that there's so much demand for apps on mobile - the browsers just don't work.
Retina display support Posted Jan 12, 2013 16:14 UTC (Sat) by intgr (subscriber, #39733) [Link]
The designers at one website got it wrong and you're saying that the whole web is broken because of it?
Retina display support Posted Jan 14, 2013 10:38 UTC (Mon) by NAR (subscriber, #1313) [Link]
Not one - I have 4 browsers installed and running, because some sites work only with certain browsers. Probably LWN is the only site I use that works with all browsers, even gmail is broken in Opera.
Retina display support Posted Jan 21, 2013 23:30 UTC (Mon) by oak (subscriber, #2786) [Link]
At least last year Gmail seemed frequently broken also in Debian Stable's old version of Google's Chromium browser (Gmail tab freezes after the page has loaded). If Google's mail web service doesn't work in Google's web browser, I think it a good indication that web indeed is broken.
Retina display support Posted Jan 9, 2013 12:56 UTC (Wed) by roc (subscriber, #30627) [Link]
CSS pixels have always been defined to be a resolution-independent unit (since CSS1 in 1995, at least). They were never defined to be screen pixels. The new Firefox behavior is completely consistent with the spec. It's also consistent with other Mac browsers. And it doesn't really impact Web sites at all; for almost all sites, the only impact is that they look nicer.
Retina display support Posted Jan 9, 2013 13:18 UTC (Wed) by robert_s (subscriber, #42402) [Link]
"CSS pixels have always been defined to be a resolution-independent unit (since CSS1 in 1995, at least)."
_What_
"They were never defined to be screen pixels. The new Firefox behavior is completely consistent with the spec."
Thing is, they _have_ effectively been screen pixels for the last ~20 years, and that's how people have been using them.
Being able to describe things in terms of screen pixels is fairly critical in order to avoid fuzzy graphics.
Retina display support Posted Jan 9, 2013 13:35 UTC (Wed) by Kit (guest, #55925) [Link]
Zooming. That already caused screen pixels to not be the same as device pixels, and most browsers have supported it for many years now (whole page zooming, not just text size adjustment). Hell, zooming is a major portion of what makes modern mobile browsers usable without special coding.
I wouldn't be surprised if it hadn't been true in practice even before that.
Retina display support Posted Jan 9, 2013 13:36 UTC (Wed) by roc (subscriber, #30627) [Link]
Thanks to browser zoom features, and mobile browsers, CSS pixels haven't reliably corresponded to screen pixels for quite some time now.
We've found ways to avoid almost all problems when zooming Web pages.
Retina display support Posted Jan 9, 2013 15:02 UTC (Wed) by robert_s (subscriber, #42402) [Link]
"CSS pixels haven't reliably corresponded to screen pixels for quite some time now."
Depends what you mean by reliably. I'd say it's a good 90% of the time people aren't zooming or using a mobile browser and they do correspond. And in a world where nearly half of visitors use IE so nothing really works properly anyway, I call that relatively reliable.
I'm just quite depressed by the whole way "retina" has been handled by everyone. There have been many efforts at resolution independence over the last ten years - now when significantly different resolution devices come into the market all that seems to have been thrown out the window and everyone seems to need to go round adding "retina"-specific hacks, "retina"-specific icons and whatnot to everything under the sun.
"We've found ways to avoid almost all problems when zooming Web pages."
As a web developer I look at that statement with eyebrows askew.
Retina display support Posted Jan 9, 2013 15:40 UTC (Wed) by Cyberax (✭ supporter ✭, #52523) [Link]
There really were not any serious attempts at resolution independence earlier. Most of available displays had DPI in range of 96-140 and that allowed to simply ignore occasional problems.
Retina displays allow no such slack. So everyone suddenly realized that their code is not actually that resolution independent and they have to do something about it.
Retina display support Posted Jan 9, 2013 18:59 UTC (Wed) by redden0t8 (guest, #72783) [Link]
I'm not really sure what you mean by Retina-specific hacks. As a notebook Retina-display user, I can say in 6 months of daily browsing, I have yet to find a website that doesn't render correctly.
The browser still lays things out identically, it just renders extra pixels for text+vector graphics, and anti-aliases raster images. That's the whole reason why it's implemented using a pixel-ratio. Everything automatically works.
Coding webpages in real units is impractical anyways, as you don't know the device it'll be displayed on. No one on a phone wants a webpage to be initially zoomed to be 10 inches wide when their screen is only 2-3 inches wide. The first thing they'll do is zoom out to figure out where to scroll to before zooming back in. Same idea for a tablet. Laptops/desktops are a little easier, but you still don't know the size of the display (9" netbook or 30" desktop?), how far away the user is sitting (HTPC or netbook?), and how good their eyesight is. Ultimately, it's up to the device-maker and end user.
All the web-developer needs is a reference unit. The "pixel", while poorly named, already provides this. Each device maker can decide how to handle the scaling ratio for a given form-factor. Ideally one day, once desktop OS's are truly resolution independent, they'll let end-users pick their "ideal" ratio with a slider somewhere that affects the entire UI.
Yes you'll need to start serving up higher resolution images soon or later, but this is caused by hi-dpi displays in general and not just Retina(TM) displays. It's already possible to query the device pixel ratio in a browser-independent way, or alternately blindly serve up high-res images to everyone.
Retina display support Posted Jan 9, 2013 20:09 UTC (Wed) by Cyberax (✭ supporter ✭, #52523) [Link]
HTML actually has an abstract 'em' unit which is linked to the text size.
I've actually long wished that we had some kind of 'pixels' with fixed angular size. But I kinda doubt that most web-developers would like to work with steradians :)
Retina display support Posted Jan 9, 2013 21:41 UTC (Wed) by roc (subscriber, #30627) [Link]
CSS pixels are exactly "some kind of 'pixels' with fixed angular size".
Retina display support Posted Jan 9, 2013 21:59 UTC (Wed) by Cyberax (✭ supporter ✭, #52523) [Link]
Then we lose ability to use sub-pixel positioning (last time I checked you can't use fractional pixels).
That's not a problem right now, since browser does all the drawing. But once we move into the brave new Canvas world, we'll start to get this kinds of problems. 1 pixel on a Retina display might be below eye's resolution, but 1px misalignment is easily noticeable.
Retina display support Posted Jan 10, 2013 10:35 UTC (Thu) by roc (subscriber, #30627) [Link]
You absolutely can use fractional CSS pixels.
Retina display support Posted Jan 11, 2013 10:02 UTC (Fri) by jezuch (subscriber, #52988) [Link]
Speaking of resolution-independence, I remember being excited about promises made by KDE people regarding resolution-independent desktop in KDE4 - things like vector icons and such. I don't think I'm seeing it in the final result. On my work laptop I had to increase font sizes in the GUI and now it looks somewhat out of place, like Frankenstein's monster living in a doll house. I suspect I'm missing something here...
Retina display support Posted Jan 13, 2013 11:01 UTC (Sun) by jospoortvliet (subscriber, #33164) [Link]
i guess it turned out to be harder than expected. The Oxygen style can scale only partially and while there are vector icons (and a high resolution Oxygen icon set), you simply cant make one icon which.looks good in all sizes. Note that retina in the way apple did it it, as far as i know at least, isn't resolution independent either - it is mostly just a doubling of the resolution of everything. Having a scaling of 125% for example is much harder, let alone arbitrary %s.
Retina display support Posted Jan 9, 2013 16:08 UTC (Wed) by niner (subscriber, #26151) [Link]
Actually the behaviour seems not to be consitent with the spec. To quote the spec:
"For a CSS device, these dimensions are either anchored (i) by relating the physical units to their physical measurements, or (ii) by relating the pixel unit to the reference pixel. For print media and similar high-resolution devices, the anchor unit should be one of the standard physical units (inches, centimeters, etc). For lower-resolution devices, and devices with unusual viewing distances, it is recommended instead that the anchor unit be the pixel unit."
So for example a 3rd generation Apple iPad with so called "Retina display" has a screen resolution of 263.92 PPI which is much closer to a 300 DPI print than to the usual 90 DPI of a computer screen. Google Nexus 10 features 300.24 PPI. So I would say these devices are what the spec call "print media and similiar high-resolution devices" and 1px sould be 0.75pt or 0.26458333mm.
Using 2x2 device pixels seems to be just as wrong as using 1x1. 2 display pixels on the Nexus 10 for example are just 0.1692mm wide compared to ~ 0.26mm width of the reference pixel the CSS spec uses.
Retina display support Posted Jan 9, 2013 21:39 UTC (Wed) by butlerm (subscriber, #13312) [Link]
96 CSS pixels per inch is normal (or at least nominal) for a desktop computer screen. A handheld device is typically going to have a substantially different viewing distance, and as a consequence it isn't at all natural to display the same content at the same number of CSS pixels per inch. A CSS pixel should (roughly) encompass the same angle, not the same physical size.
As a result, 2 x 2 device pixels per CSS pixel is just about ideal for a 192 DPI desktop display. Ideal as in minimizes aliasing for pixel oriented page designs, which are commonplace. If you have a handheld device, the DPI should be higher because the viewing distance is going to be less. 384 or even 400 dpi sounds about right for 2 x 2 scaling (2 dppx) on a device like that. 4x4 scaling someday (~768 DPI handheld, 384 DPI desktop) sounds well within the retina limit to me, at least if you want to avoid eyestrain.
Retina display support Posted Jan 9, 2013 21:45 UTC (Wed) by roc (subscriber, #30627) [Link]
You're not taking into account viewing distance. Tablets and phones are viewed at a shorter distance than desktop displays. For a desktop display viewed at arm's length, a CSS pixel should be one device pixel on a 96dpi screen, but for a phone viewed at half that distance, a CSS pixel should be one device pixel on a 192dpi screen (assuming default zoom).
|
|||||||||||||