Screen Density and Web Design: What's a CSS Pixel?

, , …,
Want to master JavaScript in a week? Example based, to the point. Xah JavaScript Tutorial.

What's CSS pixel? How big is a pixel?

CSS spec allows 2 interpretations of CSS px unit.

pixel1
reference pixel

See: Syntax and basic data types#length-units

〔☛ CSS: Understanding CSS Units

Screen density is getting higher and higher. In the 1990s, CRT monitors from Apple Computers Inc is standardized at 72 ppi (pixels per inch), which became a de facto standard for desktop publishing (Apple started this field). But since ≈2000, LCD replaced CRT, then came laptops, and now smart phones and tablets are more popular than desktop PCs. The iPad 3 has a density of 264 PPI. See:

This creates a problem for web designs. In CSS, there are 3 types of units for length:

  1. Physical: cm centimeter, mm millimeter, in (inch), pt (point = 1/72 inch), pc (pica = 12/72 inch)
  2. Pixel: px.
  3. Relative: % percent, ex (height of letter “x” of current element's font), em (roughly width of M of current font. (exactly what it is, is complex. See: Em (typography)))

Physical unit is entirely useless. The problem with physical length such as centimeter is that usually the browser doesn't know the density of your display device. (i.e. it doesn't know how many pixels is a centimeter. Around ≈2005, browser's preference pane lets you set it manually.)

The more serious problem with physical length is that you don't really want to use it. Because, screen size varies. On big screen, you might want text be 1 cm in height. But on a hand-held tablet, you might want it to be just 0.2 cm.

The problem with pixels is that it's device dependent. On a desktop computer display, you might want text to be 20 pixels. But on a high-density tablet, 20 pixels needs a magnifying glass to see.

However, most web designers want exact layout. So, they just use pixels, and assume a particular display dimensions and density, based on what's most common. Around ≈1998, it is 640×480. In ≈2005, it's 800×600. Today, it's 1024×800. See: Web Design 2012: Minimal Windows Width of Popular Sites.

Due to the rise of high-density display starting with iPhone in ≈2008 and now tablets, the web standard body seems to have retrofitted the meaning of px in CSS. It used to mean the pixel on your screen. Now, W3C seem to say that the pixel unit in CSS is meant to be a abstract pixel.

Here's what the spec says. 〔CSS 2.1 By W3C. @ http://www.w3.org/TR/CSS21/syndata.html#pixel-units〕 Quote:

Absolute length units are fixed in relation to each other. They are mainly useful when the output environment is known. The absolute units consist of the physical units (in, cm, mm, pt, pc) and the px unit:

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. For such devices it is recommended that the pixel unit refer to the whole number of device pixels that best approximates the reference pixel.

Note that if the anchor unit is the pixel unit, the physical units might not match their physical measurements. Alternatively if the anchor unit is a physical unit, the pixel unit might not map to a whole number of device pixels.

Note that this definition of the pixel unit and the physical units differs from previous versions of CSS. In particular, in previous versions of CSS the pixel unit and the physical units were not related by a fixed ratio: the physical units were always tied to their physical measurements while the pixel unit would vary to most closely match the reference pixel. (This change was made because too much existing content relies on the assumption of 96dpi, and breaking that assumption breaks the content.)

Extremely complex. In summary, it's like this: a pixel is a pixel, but if the device has high density, the browser should rescale the meaning of pixel so that it has the same width as a pixel on a normal screen of the time.

Here's a bunch of articles addressing issues related to screen density.

They are all giant hacks.

The bottom line of the problem is, that HTML is never designed for page layout. It is only meant to capture the meaning of content, mostly of the academic publications type. That is, you have Title, Chapter Header, Sections, Subsections, Paragraphs, Lists. But, most people actually need layout and exact appearance specification. The vast majority of web use is not academic papers. It's online stores, for-profit publishing, stocks, entertainment, random chats (online forums), and porn. So, font tag, tables, Spacer GIF, CSS, and all are hacked in, with various degrees of blessing by standard bodies or tech geekers.

blog comments powered by Disqus