The Style Sheet's Bequest Continued - An Inquiry Into Values - HTML with Style

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>

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.

Produced by Stephanos Piperoglou

All Rights Reserved. Legal Notices.

URL: https://www.webreference.com/html/tutorial8/
Created: Oct 30, 1998
Revised: Nov 4, 1998