An Inquiry Into Values
The Style Sheet's Bequest Continued
|
| ||||
| ||||
|
|
Percentages and Relative Values
Now, remember last time when we illustrated Navigator's bad handling of relative font sizes? When the font size was made larger several times and then smaller the same number of times, we did not end up with the same size. This is because Navigator seems to inherit the actual value of the property and not the computed value. So, since it rounds off font sizes to a certain number, the scaling was not uniform.
We have already illustrated some relative values. These include
larger and smaller for
font-size, and bolder and
lighter for font-weight. Many of these
relative values can be given using percentages, for instance the
following two rulesets are equivalent (assuming a scaling factor
of 1.5):
SPAN.big { font-size: larger; } SPAN.big { font-size: 150%; }
It is not always clear what the percentage refers to. For
font-size, it refers to the inherited or default
size. For line-height, however, it refers to the font
size of the element. This is illustrated in the following example:
DIV { font-size: 14pt; line-height: 200%; /* Computed value 28pt */ } P.small { font-size: 12pt; line-height: 120%; }
<DIV> <P>This is some text inside the paragraph, which is inside the division. There is plenty of text here so we can be sure it wraps around and illustrates the line height.</P> <P CLASS=small>This is some text inside the paragraph, which is inside the division. There is plenty of text here so we can be sure it wraps around and illustrates the line height.</P> <P>This is some text inside the paragraph, which is inside the division. There is plenty of text here so we can be sure it wraps around and illustrates the line height.</P> </DIV>
This is some text inside the paragraph, which is inside the division. There is plenty of text here so we can be sure it wraps around and illustrates the line height.
This is some text inside the paragraph, which is inside the division. There is plenty of text here so we can be sure it wraps around and illustrates the line height.
This is some text inside the paragraph, which is inside the division. There is plenty of text here so we can be sure it wraps around and illustrates the line height.
The line height in the DIV element is computed based
on the font size, so it is 14pt × 200% = 28pt. If the
line height for the paragraph was computed based on the inherited
value, then the value would be 28pt × 120% = 33.6pt,
which is not what we want. Instead, it is computed based on the font
size of the paragraph and is equal to 12pt × 120% =
14.4pt.
Each property that accepts percentages as values handles
percentages differently. Most (including font-size),
just apply them to their default value (either specified or
inherited), but certain, such as line-height, apply them
to some other quantity. From now on, I will mention any special
handling of percentages when I present new properties.
Two other properties I have told you about that accept percentage
values are vertical-align and
text-indent.
vertical-align accepts percentage values that are
relative to the line height and place the text that far up (or down,
if the number is negative) from the baseline. Neither Explorer nor
Navigator support this, however.
text-indent accepts percentage values that refer to
the width of the element. So, text-indent:
20% means that the element should have an indent equal to
20% of its width.
Line Height and the Navigator Inheritance Bug
I mentioned earlier that the line-height property
cheats when it comes to inheritance. If you remember from Tutorial 7,
the line height property may either have a length (expressed with units
or percentages) or a number as a value. If the value is a number, it
is the ratio of font size to line height, just like a percentage. The
difference is that when you use a number, the number itself is
inherited, not the computed value that results from it. Let's take a
look at an example.
DIV { font-size: 12pt; } DIV.percent { line-height: 200%; } DIV.number { line-height: 2.0; } P { font-size: 16pt; }
<DIV CLASS="percent"> <P>This is some text inside the paragraph, which is inside the division. There is plenty of text here so we can be sure it wraps around and illustrates the line height.</P> </DIV> <DIV CLASS="number"> <P>This is some text inside the paragraph, which is inside the division. There is plenty of text here so we can be sure it wraps around and illustrates the line height.</P> </DIV>
What happens in the above example depends on your browser. Internet
Explorer 4.0 handles the situation correctly. The first paragraph
inherits the computed line height from its parent DIV,
which is 12pt × 200% = 24pt, while the second paragraph
inherits the number ratio and computes the line height based on its
own font size, making it 16pt × 2.0 = 32pt. Navigator
doesn't do this, and treats the number just like a percentage, giving
both paragraphs a line height of 24 points.
This is the same situation we had with the font-size
property: Navigator insists on inheriting the actual values
of properties, not the computed (or, in this case, specified)
values. So care must be taken not to rely too much on inheritance to
give a precise result. It is better to specify absolute values for
most cases to make sure Navigator doesn't make a mess of them.
