As you know from our discussion on inheritance last week, font properties are inherited from the parent. While this may seem straightforward, the user agent goes through a complicated process to come up with the actual rendered properties.
The final value of a property is the result of a three-step process:
- the value is determined through the specified value,
- then resolved into an absolute value as needed (the computed value),
- and finally adjusted according to the limitations of the display device (the actual value).
We will start this discussion with an examination of this process, and then focus on the effect of inheritance when using relative font size units.
Specified Values
User agents must first assign a specified value to a property based on the following mechanisms (in order of precedence):1
- If the cascade results in a value, use it.
- Otherwise, if the property is inherited, use the value of the parent element, usually the actual value.
- Otherwise use the property's initial value. The initial value of each property is indicated in the property's definition.
Mechanism 2 as it applies to font sizes ...
Inherited Font Size Values
If the element does not declare an absolute font size, and the font size for an element's parent is declared as a relative value, then use the actual (not the relative) value of the parent as the specified value for the font-size ... this is just the starting value.
Computed Values
If an element's value is in absolute units, such as pixels, points, etc., there is no need for the user agent to compute a value. E.g., 14px is simply taken as the computed value.
If the element's value is relative, then the computed value for the font must be calculated. Relative values must be multiplied by the actual value of the parent, and relative keyword values must be replaced by their absolute equivalents.
If for example the BODY tag is set to 100%, or the 16 pixel default of most browsers, then a specified relative value of 80% must be computed based on those settings.
16 pixels x 80% = 12.8 pixels
This computed result will then be used to determine the actual value ...
Actual Values
Once a value has been computed, it may be ready to apply. However the computed value must be rounded by the user agent so that it is compatible with the capabilities of the display device. This rounded value is the actual value which will be used for display, and to be inherited by any child elements.
The important points are:
- The actual value may be different than the specified values.
- The value inherited is the actual value - not the specified value or the computed value!
- Nested elements specifying relative values are cumulative ... the font-size will be different at each level of nesting!
The last point is important because the developer may have to devise rules to compensate for font size scaling effects when relative sized elements are nested, as you'll see in the following example.
An Example
Given this style sheet:
body { font-size: 100%; }
ul { font-size: 90%; }
...and this markup:
<ul>
<li>The BODY is styled at 80%, or 16px x 80% = 12.8px in most
browsers.</li>
<li>This is the outer list. It is 12.8px x 90% = 11.52px (computed)
<ul>
<li>
The nested list is 12.8px x 90% x 90% = 10.368px (computed)
</li>
<li>The text is getting smaller.
<ul>
<li>This list is nested 3 levels.</li>
<li>
The size is 12.8px x 90% x 90% x 90% = 9.3312px (computed)
</li>
<li>Pretty soon and I will not be able to read it!</li>
</ul>
</li>
</ul>
</li>
</ul>
...here is what 3 levels of nested lists look like. Notice that at each level the text is smaller because each nested list is being set at 90% of its parent... the property is inheriting the specified/calculated/actual relative value.
- The BODY is styled at 80%, or 16px x 80% = 12.8px in most browsers.
- This is the outer list, so it is 12.8px x 90% = 11.52px (computed)
- This is a nested list, 12.8px x 90% x 90% = 10.368px (computed)
- The text is getting smaller.
- This list is nested 3 levels.
- The size is 12.8px x 90% x 90% x 90% = 9.3312px (computed)
- Pretty soon and I will not be able to read it!
Notice in the screenshot of the Pixy favelet at the right, when I rollover the 3rd nested list,
the actual values being used by Firefox are different than what I calculated and
displayed in the text above.
These are the actual values being used and inherited by any descendants a list might have.
Now suppose you only wanted the first level of the list to be 90%, and all lower levels are to be 90% of the root element as well. That is, all list levels are to be the same font-size.
This can be accomplished by creating the following descendant selector:
ul ul { font-size: 100%; }
- The BODY is styled at 80%, or 16px x 80% = 12.8px in most browsers.
- This is the outer list, so it is 12.8px x 90% = 11.52px (computed)
- This nested list, 12.8px x 90% x 100% = 11.52px (computed)
- The text is getting smaller.
- This list is nested 3 levels.
- The size is 12.8px x 90% x 100% x 100% = 11.52px (computed)
