Length Units


The point unit is the traditional measurement of length in typography, but not always the best for Web design. CSS accepts a range of different units, which fall into three categories:

  • Absolute units This category includes the point unit previously described as well as other units (mm, cm, in, pc) that describe physical distances that can be measured with a measuring band.

  • Relative units These units describe distances relative to other distances. The em unit, described in Chapter 3, "The amazing em unit and other best practices," is the foremost member of this group, which also includes the ex unit.

  • The pixel unit The pixel unit, as defined in CSS, forms a group of its own since it has some unique characteristics. On normal computer screens, the pixel unit does what you expect. On printers and other high-resolution devices, it does what you hope!

The three groups and their units are described in more detail next. Common for all the units is the way they are combined with numbers to form values. Here are some examples: 12pt, 0.9in, 2.54cm, -3px.

To form a value, a number is combined with a unit. The number can be a whole number (0, 1, 2...), a fractional number (0.5, 2.57, 1.04...), or a negative number (-1, -3.14, -0.25...). If the integer part of the fractional number is 0, it can be omitted (.25, -.61). The unit of measure is added directly after the number with no space between the number and the unit. All units are two-letter abbreviations with no period at the end.

Properties may restrict the numbers and lengths they accept. For example, the font-size property cannot be set to a negative length. All CSS properties that accept lengths also accept the number 0 without a unit of measure. (If a length is 0, it doesn't matter whether it is points or inches.)

Absolute Units

An absolute unit is a unit of measure that specifies a fixed length, which is a length that can be measured with a measuring band. The units are as follows:

  • Millimeter: mm

  • Centimeter: cm (1 cm = 10mm)

  • Inch: in (1in = 25.4mm)

  • Point: pt (72pt = 1in)

  • Pica: pc (1pc = 12pt)

The mm and cm units come from the metric system of measurements. The other units are all defined as fractions of an inch. A pica is 12 points. Six picas equal 1 inch.

Absolute units have limited usefulness because they cannot be scaled. In general, they should be used only if you know the physical properties of the output medium. For example, if you write a style sheet for a document you know will only be printed on A4-sized paper, absolute units may be the correct choice. In most cases, however, you are better off using relative units.

Relative Units

A relative unit is a unit of measure that specifies a value that is relative to the font size. There are two relative units in CSS: em and ex. Usually, the font size they refer to is the font size of the element itself. (The only exception is the font-size property, which we discuss later in this chapter, for which the value scales to the font size of the element's parent.) Relative units have an advantage over absolute units in that they scale automatically. When you choose a different font, all properties that were expressed in em or ex don't have to be changed.

The em unit was heavily promoted in Chapter 3, and we will not repeat all the good arguments for using the em unit here, but merely state the facts. In CSS, the em is exactly equal to the font size (i.e., the height of the font). For example, in a 12pt font, the em is 12pt wide, while in a 15pt font, the em is 15pt wide. (There are other historical definitions of em that we don't go into. We chose for CSS the one that appeared to be the most convenient.)

The ex unit is also relative to the font size but in a different way. It is called "ex" because it is defined as the x-height (see Figure 5.11). The em can be set explicitly in CSS1, but the ex is a characteristic of the font, so it cannot be set explicitly. This means you can determine how big it is only by inspecting the font. For example, Times Roman has a relatively large ex (x-height) compared to Baskerville. So, even though a 12pt Times Roman and a 12pt Baskerville both have an em of 12pt, their ex values will vary because their x-heights vary. Times Roman's will be somewhat larger than Baskerville's. (Figure 5.11 illustrates this.) An ex is usually around 0.45em, but may be as large as 0.58em (in Verdana) or as small as 0.28em (in some cursive fonts).

Figure 5.11. Times Roman and Baskerville with the same em values have different ex values.


The Pixel Unit

The term pixel is derived from Picture Element. The pixel is the smallest element on a video-display screen, such as a computer monitor or a television. It also applies to the output from certain types of printers, such as laser printers. The pixel unit in CSS is based on pixels, but is slightly more refined than the name implies.

On current generation computer screens, the pixel unit behaves as you expect it to. Consider these two rules:

 H1 { border-width: 4px } H2 { border-width: 3px }

In this example, the width of the border surrounding H1 elements is set to 4 pixels and the border around H2 elements is set to 3 pixels. On a normal computer screen, these values are used as specified. That is, the border around H1 elements will actually be 4 pixels wide, and the border around H2 elements will be 3 pixels wide. Another seemingly obvious fact is that the H1 border will be exactly 1 pixel thicker than the H2 border.

When we try to print the document, things get more complicated. Typically, the resolution the density of pixels on a laser printer is much higher than the resolution on a computer screen. Therefore, a four-pixel border on a laser printer appears much thinner than a four-pixel border on a computer screen. CSS deals with this problem by saying that pixel measurements should always appear as they would on a computer screen. When printing, the browser should therefore replicate pixels so that, for example, the borders will be roughly as thick as they would on a computer screen.

For example, a 600dpi laser printer has six times more pixels per inch than a typical computer monitor does. Most often, however, the paper that it prints is held closer to the eyes than a computer screen, so to get the same perceived effect on screen and on paper, the laser printer could use a square of four by four pixels to emulate one screen pixel.

Pixels are a useful unit of measure because, on any medium, it is guaranteed that a difference of one pixel will actually be visible. On the other hand, the difference between 0.5em and 0.6em may disappear on a computer screen because the screen cannot show differences of less than 1 pixel.



Cascading Style Sheets(c) Designing for the Web
Cascading Style Sheets: Designing for the Web (3rd Edition)
ISBN: 0321193121
EAN: 2147483647
Year: 2003
Pages: 215

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net