W3C home > Mailing lists > Public > www-style@w3.org > March 2008

RE: [CSS21] [css3-values] px and device pixels

From: Alex Mogilevsky <alexmog@exchange.microsoft.com>
Date: Tue, 25 Mar 2008 14:33:44 -0700
To: fantasai <fantasai@inkedblade.net>, "www-style@w3.org" <www-style@w3.org>
Message-ID: <04F36FB4ED0F85459AA447F72711526F012EF49B359F@DF-GRTDANE-MSG.exchange.corp.microsoft.com>

We have recently reviewed scenarios involving pixels and pixel use in IE. I think I have something to say on all issues raised on this thread. Some questions don't have a simple answer though...

'pixel' unit is designed for pixilated devices. It provides fine control for graphics that are tuned to the pixel to produce sharp-edged images. It is therefore inevitable, as long as there are devices with pixels.

However when device resolution varies, 'px' may or may not continue to exactly match the device resolution, while 'inch' is always a physical inch. When 'px' scaling is not in sync with physical unit scalint, the layout gradually falls apart, negating the very purpose of enabling fine-tuned design.


1) Device pixel: "Pixel is a pixel"

Pixel is always exactly one device pixel.
'px' per inch varies with resolution.
96px image is not an 1 inch on resolutions other than 96dpi.

Pro: 1px line is nice and sharp and always 1px
Pro: Images don't rescale at varied resolution, avoiding scaling artifacts and computation-expensive scaling.
Con: layout is deformed, especially when resolution is far enough from 96dpi (140 and beyond)
Con: images scale differently from text

In IE: this is the default mode, except when printing.

2) Physical unit (usually defined as 1/96 of an inch)

Pixel has the same ratio to any other unit
96px image exactly 1 inch at all resolutions

Pro: layout ”hape doesn't change with resolution change
Pro: images scale with from text
Con: 1px line is not a round number of screen pixels. Anti-aliasing helps with drawing 1.5px lines but it is never as sharp as 'designed-to pixel', nor it is available in all platforms.
Con: images have to rescale, which is expensive on some platforms; good scaling algorithms are not always supported by host system.

In IE: this is what happens on printing and in "high dpi mode" :

3) Zoom

In all zoom scenarios 'px' should scale, as if it were a physical unit (based on 100% zoom).
96px image at 200% zoom is twice as big as at 100% zoom, regardless of what was the size of 'px' at 100%.

There appears to be a consensus on this in all browsers that support zoom.


I don't think this should or can be a requirement.
Scenarios that involve zoom certainly would be broken if it is a requirement.
New displays running at 144 DPI or higher would probably work fine with 'px' = 2 device pixels, but implementations should have freedom to use 1/96 or any other physical unit.

> -----Original Message-----
> From: www-style-request@w3.org [mailto:www-style-request@w3.org] On
> Behalf Of fantasai
> Sent: Friday, March 21, 2008 8:02 PM
> To: www-style@w3.org
> Subject: Re: [CSS21] [css3-values] px and device pixels
> fantasai wrote:
> >
> > I always thought it was in the spec, but it seems to be an unwritten
> > assumption, that CSS 'px' units should map to a whole number of
> device
> > pixels. The examples in the spec all assume rounding to a whole
> number
> > of device pixels.
> Recorded as ISSUE-1
>    http://www.w3.org/Style/CSS/Tracker/issues/1
> ~fantasai
> who is using this issue to test Tracker
Received on Tuesday, 25 March 2008 21:34:30 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:27:35 UTC