Next in Browser Development, High DPI Websites?

Joost de Valk writes "In a post at the WebKit blog, Dave Hyatt raises interesting points about the future of web development and browsers. He says, that with screens getting more and more pixels, it is imperative website design takes the next step: High DPI Website rendering. This could mean that a CSS pixel (px) is rendered as a 2x2 pixelblock. In the article he also mentions WebKit will be providing possibilities to use SVG for all kinds of purposes, like backgrounds. He calls upon other browser developers to take part in the discussion so that 'concrete standards in this area can be hammered out.'"

Re:hammer out standards?

[db48x]

Heh, actually this plan makes the product follow the CSS spec more closely, because the spec defines a pixel as a unit that subtends 0.0213, which gives dimensions of 1/96th of an inch (.26mm) at "arm's length" (28in). So far all browsers simplify that to 1 css pixel = 1 screen pixel. Browsers don't yet have any way of measuring the distance between your head and your monitor, so they'll just have to guess.

I agree...something fundamentally wrong with this.

[Joce640k]

To make this work you need more dots per inch on the monitor, not just "higher resolution". Current "high resolution" screens are bigger, not more densely pixelled.

Without changing the dot pitch 2x rendering would make the ducument twice as wide, and that's going to make things worse, not better.

FWIW, I currently see no industry interest in higher pixel density screens, in fact I see the total opposite. Most 19" screens on the market have the same number of pixels as 17" screens. This maybe good for filling a gamer's field of view but documents are much less readable on a 19" LCD than on a 17" one. The only big change which might happen in the near future is that 19" monitors catch up with 17" ones in terms of pixel density.

Re:Opera Zoom

[TeXMaster]

Indeed, that's just one of the many Opera features that make it so much more extremely convenient that any other browser I've used (IE, Mozilla Navigator (now in SeaMonkey), Mozilla Firefox, Konqueror ...). (It's not open source? Who gives a damn, it's still light years ahead.)

If your site requres a certain DPI for readability

[Rimbo]

...you fucked up.

So I can't believe this is even an issue.

Re:I agree...something fundamentally wrong with th

[zippthorne]

BS. My first monitor was 640x480 14 inch jobby. It was ok, but the pixels were very visible. My current monitor is 19" and capable of 1600x1200. I never use that mode for two reasons though. The first is that it's only capable of that at like 50 fps, and the second is that everything seems to specify font size in pixels, so if i put the resolution all the way up to make things look sharper, all the text is tiny.

The demand for better monitors is somewhat limited by the second contention. Why buy a high-rez monitor if it's going to make all the menues uncomfortably tiny?

Firefox in the browser world, and other tools elsewhere help out wrt. the second problem. Websites are all over the place in specifying font sizes though, so gestures comes in really handy for quickly resizing a page immediately after clickage. Unfortunately, putting the fonts at a reasonable size seems to mess up quite a few pages with complicated, hard-coded styles resulting in lots of text overlap or poorly flowing tables and whatnot.

I have decent eyesight, but I don't want all the text on my monitor to look like the system font from fifteen years ago that was all about minimizing memory usage. I want text to look like newsprint or a book. My monitor is capable of this, so why is the software lagging?

The physical size of the text on the screen should be independant of the pixel size of the monitor.

Re:A couple of things...

[featherstorm]

The default setting is 72 dpi for Macs and 96 dpi for Windows, not vice versa. Actually, neither is true for most of the displays available nowadays. Put a ruler to your screen and measure the pixels to an inch. My 23" Apple Cinema Display has 98 dpi, the PowerBook it's attached to 106 dpi.
In mozillaoid browsers you would therefore enter this into your user.js:

user_pref("browser.display.screen_resolution", 98);

Re:I agree...something fundamentally wrong with th

[wwwillem]

I fully agree with the point you make, but there are exceptions. Like my current notebook (Fujitsu P7010D) which has only a 10.5 inch (wide)screen, but still with 1280x768 pixels. I can tell you, those pixels ar pretty small!! A nice side effect of higher pixel resolutions is also that when you have a dead pixel, it becomes much less visible. In my case I've one blue pixel constantly on. My dealer was willing to replace the screen, but I left it as it is. You simply don't see it.

It'll reach a point where you can't

[Sycraft-fu]

Let's say you have one of the ultra high rez wquxga monitors that's 3840x2400 in 24" (those are real by the way). At a size developed for normal monitors, you wouldn't be able to see anything. One pixel is just not visible with the naked eye. It's the kind of dsiplay you can literally hold a magnifying glass to to get more detail.

However I think they are wrong in that web standards need to deal with this. What should deal with it, and what will allegedly deal with it, is OSes. As OSes gain hardware acceleration of their desktops, real resolution independance becomes easy to achieve. You know the rez of the monitor and its' size (monitors report how large they are). Then you just need the user to specify zoom level. At 100%, a 12 point font is rendered as 12 points, at 50%, it's rendered as 6 points. Graphics could likewise be scaled.

Vista is allegedly supposed to be able to do this, though I'm not sure it'll actually make it in for release. Either way, I suspect it's something comming for all OSes sooner rather than later.

What's new?

[Lobais]

Opera has for a long time supported page "zoom", that allows you to make things bigger, without messing up the layout. IE7 will, as far as I know, have this feature too.

Why all this new standards/browsers/websites talk?

It's good start, but...

[Captain Perspicuous]

It's good start, but I think it needs one change. They say about the img-element: "the only tradeoff being that the higher resolution artwork would be slower to load on low DPI displays that couldn't render all the detail anyway". To gain widespread adoption, this has to be solved first. A possible solution would be to add an additional "device-pixel-ratio" element to the http request header itself, so a server serves different size of images (jpgs, gifs, pngs) based on the resolution of a requesting device.

Re:Please no...

[caffeination]

My grandfather's monitor (at work) of resolution > 1024x720 is set at 800x600, because the magnifying effect makes it easier for him to read. This added detail would benefit him.

Re:It's good start, but...

[Capacitance]

It'd be easy enough to side-step... just use a progressive image format, stop downloading when you have enough detail... for added niftiness, put a table in the header of dpi->length mappings, so you know when you're done without having to watch the data.

Re:Small Screens

[ablaze]

You seem to miss the fact, that this is all part of what Apple plans to do with their OS and apps in the near future. Think of Front Row and Apple's way to digital home entertainment. They need to accomodate for big screens. Dashboard needs to scale up, too, as this is a visible part of the OS, that will need to be supported for big screens, and relies on html and javascript. It could probably play an important role in some digital home entertainment device of Apple's.

Taken into consideration that resolution independent UI could be turned on for testing purposes on Tiger, it's a bet that HD-computing will be an important part of Leopard (Mac OS X 10.5) which is supposed to be revealed in august at the WWDC.

I bet we will see a switch from pixel based gui elements to svg-elements all the way in the Mac OS X gui. Moreover, resolution independent ui will be switched on by default, bringing a whole new experience to the end user. Expect Apple to add some wow-features! :)

I guess at the time the iTunes Movie Store gets online, they will have a more or less complete and unique infrastructure for it ready with Leopard. I expect it to sport a new Front Row, too, which will eventually integrate with your new HD-TV. All this together will probably be without compare elsewhere on the market, like it is with iTunes, the iPod and the iTunes Music Store.

Re:Flexibility

[asc99c]

The main problem with the web - and with GUIs in general - is that they assume that the designer knows better than the user how the user wants things.

It is a real shame that so many people think this as originally HTML was designed with exactly the opposite premise - that the user knows how they want things. Slashdot's 'Allowed HTML' bit when posting messages is a great example of how HTML was meant to work - the designer puts in breaks, paragraphs, lists, emphasis, bold text and so on. The browser has some default settings that render these fairly abstract ideas in pleasing ways but the user should be able to override them as they see fit.

Unfortunately, with a load of bolted on technology such as CSS, power has been leaking back to designers over time with hardcoded font sizes and table widths etc. The web undoubtedly looks better now, but for non-standard setups such as higher resolution monitors, it has lost some of it's original utility.