Cr-48 Resolution and CSS

One of my complaints about the Cr-48 is that reading text on many sites is difficult. My vision isn't perfect, but it seems like most sites are unreasonably small.

I found out via the (quite good) Cr-48 subreddit that I'm not the only one with this problem. Linked to from the comments is a rather lengthy debate on the Webkit bug tracker on what to do about relative DPI differing from screen to screen on modern devices.

Basically, Webkit currently defines one CSS inch as 96 device pixels, exactly, always. This causes web content to look smaller on screens where a device pixel is less than 1/96 of an inch. The Cr-48 device pixels are about 1/125th of an inch (the screen is 125 DPI). Therefore, if I (as a web developer) want an element on the screen to be one inch wide (all other units in CSS are defined in terms of the inch), it will only be .8 inches wide on a Cr-48.

Further complicating the problem is that most web developers are not using 96 dpi screens either. Older computer screens are actually less than 96 dpi. 96 was made a de facto standard by Microsoft even in the face of this fact with the justification that things on a computer screen ought to be bigger than the same thing on paper since screens are generally further from your face than paper documents.

As if that wasn't enough, the CSS unit "px" is actually defined by the CSS2 spec as 1/96th of an inch. This is extremely unintuitive. For most modern monitors, the proper size of a CSS pixel is not one pixel. And the proper thing (by the spec) for the browser to do would be to treat pixel units as more or less than one pixel.

The only browser that I know of that does this correctly, incidentally, is Mobile Safari on the iPhone 4, mostly because of its very high density screen. Firefox apparently deviates from the CSS2 spec and displays "relative" CSS units (inches, points, picae, mm, cm) as being in terms of the DPI while keeping pixels (as an "absolute" unit) fixed. This would cause problems on many websites, but, fortunately (I suppose) for Firefox users, does not affect many people, as Windows does not automatically set the DPI (instead defaulting to 96 DPI, per above). Chrome and Safari do nothing, completely ignoring any DPI information in the OS.

Fortunately for me, a poor user suffering as a result of this widespread confusion and misinformation among browser devs, web devs, designers, and users, and a resulting lack of automatic fix for this sort of problem, a workaround exists. Chrome (at least very recent versions) has an option in the settings menu (in Under the Hood) to set the default zoom level. The closest I can get to the desired DPI is 120% zoom (resulting in 96 * 120% ~= 115 DPI), which I find works quite well.

 

2087 views and 0 responses