W3C home > Mailing lists > Public > www-style@w3.org > October 2013

Re: line-height: normal and multiple descendant font sizes

From: Alan Gresley <alan@css-class.com>
Date: Fri, 18 Oct 2013 12:49:59 +1100
Message-ID: <526093C7.3010403@css-class.com>
To: Glenn Adams <glenn@skynav.com>, W3C Style <www-style@w3.org>
On 18/10/2013 3:52 AM, Glenn Adams wrote:
> In CSS2.1, we have the following in Section 10.8.1:
> "When an element contains text that is rendered in more than one font, user
> agents may determine the 'normal'
> 'line-height'<http://www.w3.org/TR/CSS2/visudet.html#propdef-line-height>
> value
> according to the largest font size."
> I'm curious if any UA actually implements this. I have tested Chrome,
> Opera, and Safari UAs, and none of these UAs seems to use the largest font
> size (of descendant fonts).
> My test consisted of the following fragment:
> <p style="line-height: normal">
> <span style="font-size: 12pt; border: 1px solid #C0C0C0">X</span></br>
> <span style="font-size: 36pt; border: 1px solid #C0C0C0">X</span></br>
> <span style="font-size: 18pt; border: 1px solid #C0C0C0">X</span></br>
> </p>

Where the spec says "When an element contains text that is rendered in 
more than one font," it is referring to types of font style like 'Times 
New Roman', Georgia, 'Lucida Bright', etc.

Your test is testing font-size, and it had anything to do with 
line-height, then it should be coded as follows.

<style type="text/css">
span { background: yellowgreen; }

<p id="test" style="border: 1px solid #C0C0C0">
<span style="font-size: 12pt;">X</span>
<span style="font-size: 36pt;">X</span>
<span style="font-size: 18pt;">X</span>

<button onclick="document.getElementById('test').style.lineHeight = 

Selecting the button does nothing.

> If a UA implements the above language, then I would expect that each of the
> three lines be assigned a single line height (of 36pt), where the leading
> on each line is computed according to the following language:
> "Still for each glyph, determine the leading L to add, where L =
> 'line-height' <http://www.w3.org/TR/CSS2/visudet.html#propdef-line-height>
>   - AD. Half the leading is added above A and the other half below D, giving
> the glyph and its leading a total height above the baseline of A' = A + L/2
> and a total depth of D' = D + L/2."
> Also, I should note that "the largest font size" is ambiguous in the above
> language, since it might mean:
>     1. largest font size of descendant non-replaced elements, i.e.,
>     descendants only;
>     2. largest font size of descendant non-replaced elements and element (on
>     which line-height of 'normal' is specified), i.e., descendants and self.
> G.

There is nothing ambiguous. Where is the red line in this test case? 



Alan Gresley
Received on Friday, 18 October 2013 01:50:27 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:08:36 UTC