1. Skip to Content
  2. Accessibility
  3. Site Map

Philippine Web Accessibility Group

A Philippine Initiative to UN Web Accessibility Design Compliance

Home | About PWAG | Membership | Recommendations | Resources | Seal | Websites | Archives | FAQs | Contact Us
PWAG logo of name in markup format with crossing arrows on top

CSS Distance Units - Lemuel Cabia

> in other words, try to use relative rather than absolute units in your
> (markup language attribute values or) in your stylesheet property
> values for text size like *percent* instead of pixels (e.g. font-size:
> 75%;). ah yes,..pixel is an example of absolute unit.

Correction lang po. "pixel" is a relative distance (length) unit, not absolute. :-) Why? Because, according to W3C's CSS syntax definition, pixel units are relative to the resolution of the viewing device (e.g. most often a computer display). If the pixel density of the output device is very different from that of a typical computer display, the user agent should rescale pixel values.

This works fine with Mozilla browsers, but not in IE. I don't know why.

By the way, to summarize, there are two types of length units in CSS, the relative and absolute. "relative" length units are:

  1. em -- the current 'font-size' of the relevant font
  2. ex -- the 'x-height' of the relevant font or the height of a small x
  3. px -- pixels is relative to the viewing device

The "absolute" length units are only useful when the physical properties of the output medium are known. The absolute units are:

  1. in -- inches, 1 inch is equal to 2.54 centimeters
  2. cm -- centimeters
  3. mm -- millimeters
  4. pt -- points, the points used by CSS2 are equal to 1/72th of an inch
  5. pc -- picas, 1 pica is equal to 12 points or 1 pica to 6 inches

For more info, please browse: http://www.w3.org/TR/REC-CSS2/syndata.html#length-units

Back to top

Copyright©2006-2007 Philippine Web Accessibility Group. All Rights Reserved. Email: info at pwag dot org