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

On Thu, Oct 17, 2013 at 7:49 PM, Alan Gresley <alan@css-class.com> wrote:

> 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<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.
>

Actually, the spec means font size not font [family] when it says rendered
in more than one font. Otherwise, it wouldn't say the largest font* size*.
Font family is not related to line height computation. So that's one spec
problem (if one wants to make reference to this language).

The other spec problem is that it isn't clear about what is meant by "font
size". Does it mean the computed font size of all descendant elements or
the computed font size of all descendent elements and itself.

The third problem is that the spec allows for implementation dependent
behavior, which makes the results ambiguous. It does this by suggesting
more than one interpretation.

The fourth problem is that if a UA does *not* adopt the "use largest font
size" interpretation, then it isn't quite clear what the definition of line
height 'normal' means when there are different font sizes as descendants.
I'm assuming that what is intended in this case is the language "Tells user
agents to set the used value to a "reasonable" value based on the font of
the element. The value has the same meaning as
<number><http://www.w3.org/TR/CSS2/syndata.html#value-def-number>.
We recommend a used value for 'normal' between 1.0 to 1.2."

If no UA actually implements the "use largest font size" interpretation,
then the spec should adopt the common implemented behavior and define (that
behavior) by using a more concrete definition of 'normal'. For example, it
could be changed as follows:

(1) change definition of normal to:

*normal*

The used value is set to the same used value that would be produced if a
value of *1.2* were specified.


(2) remove paragraph "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."


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

Yes, that is intended, since this is about how the UA computes the meaning
of 'normal'.


>
> <style type="text/css">
> span { background: yellowgreen; }
> </style>
>
> <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>
> </p>
>
> <button onclick="document.**getElementById('test').style.**lineHeight =
> 'normal';">Test</button>
>
> Selecting the button does nothing.
>

Since the initial value of line-height is 'normal', then setting it to
normal is a NO-OP. The point of my test was to demonstrate that UAs do
*not* implement
the "use largest font size" interpretation.


>
>  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 <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?
> Halfway?
>

Sorry, I don't agree. The spec is ambiguous for the reasons cited above.


>
> http://css-class.com/test/css/**text/linebox-line-height-011.**html<http://css-class.com/test/css/text/linebox-line-height-011.html>
>
>
> ALan
>
>
> --
> Alan Gresley
> http://css-3d.org/
> http://css-class.com/
>