Posted by Ben C on 11/03/07 09:46

On 2007-11-03, dorayme <doraymeRidThis@optusnet.com.au> wrote:
> In article <472b6e1d$0$25482$ba620dc5@text.nova.planet.nl>,
> JWS <jws@my.home> wrote:
>
>> dorayme wrote:
>>
>> > Also try the other thing I suggested and leave it out
>> > altogether
>>
>> No, I wouldn't do that; it is a taste thing. The 20% 'leading'
>> makes the text (IMHO) more readable than when the lines are just
>> packed together without strips of lead between them. I tried it
>> again just now, and decided I really want the 20% extra space.
>>
>> Do you have an explanation of why 1.2 does not equal 120%?
[...]
> As you might appreciate, a pure number acts as a multiplier of
> the elements font-size. But a percentage is different. I rewrote
> the following to include a spiel on percentages which might
> explain the situation to you a bit. Please forgive me if there
> are any typos or mistakes. Will correct any that are pointed out
> of course:
>
> http://netweaver.com.au/test/lineHeight.html

I think the point is that if you inherit a percentage line-height, you
get that percentage of the font-size of the ancestor that you inherited
line-height from.

This is because you don't inherit it as a percentage, but you inherit
the result of that percentage applied to the ancestor it was set on.

But if you inherit a pure number line height, you inherit it _as a pure
number_, and you get that multiplied by your own font-size.

The spec is rather unclear on this:

<number>

The used value of the property is this number multiplied by the
element's font size. Negative values are illegal. The computed value [p.
88] is the same as the specified value.

<percentage>

The computed value [p. 88] of the property is this percentage
multiplied by the element's computed font size. Negative values are
illegal.

They sound the same, until you consider inheritance: you compute the
computed value before bequeathing a property to your descendents.

So, in your example, #percentage has line-height: 72% and font-size:
50px. Its computed line-height is therefore 36px. So <p class="small">
inherits 36px directly, not 72%.

But if you give #percentage line-height of .72, then <p class="small">
inherits .72 (since for <number>, above, "the computed value is the same
as the specified value"). That's why in that case it gets .72 of its
_own_ font-size.

[Back to original message]