CSS Pixel Insenity

1 בפברואר 2015

no comments

There are lots of articles trying to explain what is a pixel from CSS perspective. Here are the most popular ones

Probably the most important knowledge base is the formal W3C document

If you read those articles and are still struggling to understand the true meaning of CSS pixel than keep reading.

Instead of just tell you the formal definition lets take a practical path to defining a CSS pixel

iPhone 3GS has a screen resolution of 320 x 480
iPhone 4 has a screen resolution of 640 x 960
However, both has exactly the same screen size of 3.5 inch

Imagine we are implementing a web application. We throw a div element and pick a size for it. Lets say, 160px wide.

Assuming 1 CSS pixel equals 1 device pixel our web application looks completely different between the two devices.

Of course, Apple knew that issue and didn't want to break existing web applications. Therefore, the browser of iPhone 4 is reporting a screen size of 320 x 480. This sounds great as web applications "just work" on the newer iPhone 4 screen resolution.

Conclusion #1: devices of "the same kind" should report the same screen resolution no matter hardware preferences

But wait, what about totally different devices? For example, a television or projector. How should they behave with respect to iPhone 3/4 baseline?

I think that most end users will agree that content on TV should be easily accessed/read as content on mobile device. This means that TV should "compensate" for larger viewing distance (the distance between the end user and the device) by "enlarging" the content. Can you think about the right formula for adjusting the size of a CSS pixel between TV and mobile device? Hmm … not an easy task

Well, the W3C has come with such a formula. Actually, a quite simple formula.

On a device that is viewed from an "arm distance" a pixel must be equal to 1/96 inch. No matter screen size or screen resolution. This is quite a revolutionary definition. It means that the size of a pixel is only related to the viewing distance between the eyes of the end user and the device's screen.

For a TV which is viewed from a "living room distance" a pixel must be adjusted (enlarged) with the appropriate ratio in order to compensate for the extra distance between the end user and the screen. Below is an image from W3C's document regarding CSS Values and Units which demonstrates the principle of adjusting CSS pixel to the device viewing distance

CSS Pixel

Conclusion #2: All devices should adjust their CSS pixel size according to the following baseline: 1 CSS pixel equals 1/96 inch for a device that is viewed from an "arm distance".

BTW, the W3C does not use the term baseline but rather uses "The reference pixel" term.

But wait a second … for "arm distance" devices 96 CSS pixels equal 1in. Should that relation be kept on other devices too? Sure, else, our web content is broken. Does it mean that on "far distance" devices 1in is much bigger than physical 1 inch? Yep … and that's the whole point.

Conclusion #3: Inch is not an inch. It is a relative unit.

According to W3C 96px must always equal to 1in no matter what is the screen size or resolution. That means that you must be careful when using physical units. In order not to break content the W3C "broke" the physical units … here is a W3C's quote that summarizes this issue

"This change was made because too much existing content relies on the assumption of 96dpi, and breaking that assumption breaks the content"

Conclusion #4: It's all relative, baby !

Of course, life should't be that simple (at least not according to W3C). Each device can select the way its defines the pixel size. The W3C recommends that print media and similar high resolution devices should relate the CSS pixel to a physical unit and only low resolution devices with unusual viewing distances use the baseline as we defined previously.
I guess that this "dual" definition only exist in order not to break existing content

To summarize, think about the following scenario. I run Windows 8.1 operating system both on my desktop machine and on my TV (located at our living room). Both screens have quite the same resolution but the viewing distance is different. As result, I just hate to visit/read web sites on my TV. I can change the TV resolution but then quality is heart. Microsoft should add an option to allow end user to define their viewing distance and adjust the pixel size accordingly. I wonder if that will happen …

Add comment
facebook linkedin twitter email

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>