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

On Fri, Oct 18, 2013 at 4:52 AM, Alan Gresley <alan@css-class.com> wrote:

> On 18/10/2013 4:34 PM, Glenn Adams wrote:
>
>> 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<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).
>>
>
> Then why is font size only mention at the end of the paragraph?


Poor drafting.


>
>
>   | When an element contains text that is rendered in
>   | more than one font, user agents may determine the
>   | 'normal' 'line-height' value according to the
>   | largest font size.
>
> A few paragraph up appears this.
>
>   | The height and depth of the font above and below
>   | the baseline are assumed to be metrics that are
>   | contained in the font.
>
> Each font has it own unique font metrics.
>

Not relevant. A+D will be the same (= font size) regardless of font family.
A and D only affects baseline placement in this context.



>
> http://en.wikipedia.org/wiki/**Typeface#Font_metrics<http://en.wikipedia.org/wiki/Typeface#Font_metrics>
>
>
>  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.
>>
>
> It means the size of the typeface (or font) for the part that say "largest
> font size."


Read what I said. Font size here refers to computed font size of some
elements. Which elements?


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

Where it says "*may* determine ... normal ... according to the largest font
size".


>
>  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.
>>
>
> The test case below shows what happens to line-height when using a
> different font-size for descendants.
>
> Firefox will report a line-height that is relative to the browser default
> "font size". Most likely 20px if the browser default "font size" is 16px.
>
> IE10, Opera and Chrome will report the line-height as normal.
>
> <style type="text/css">
> p 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>
>
> <div>line-height: <span id="style-line-height"></span>**</div>
> <div>font-size: <span id="style-font-size"></span></**div>
> <div>height: <span id="style-height"></span></**div>
>
> <script>
>   function getTheStyle(){
>   var elem= document.getElementById("test"**);
>   var theCSSprop= window.getComputedStyle(elem,**
> null).getPropertyValue("line-**height");
>   document.getElementById("**style-line-height").innerHTML= theCSSprop;
>   var theCSSprop= window.getComputedStyle(elem,**
> null).getPropertyValue("font-**size");
>   document.getElementById("**style-font-size").innerHTML= theCSSprop;
>   var theCSSprop= window.getComputedStyle(elem,**null).getPropertyValue("*
> *height");
>   document.getElementById("**style-height").innerHTML= theCSSprop;
>   }
>   getTheStyle();
> </script>
>
>  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<http://www.w3.org/TR/CSS2/syndata.html#value-def-number>
>> >.
>>
>> We recommend a used value for 'normal' between 1.0 to 1.2."
>>
>
> True. 16px x 1.2 = 19.2px (usually rounded up to 20px).
>
>  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<http://www.w3.org/TR/CSS2/visudet.html#propdef-line-height>
>> >
>> value
>> according to the largest font size."
>>
>
> Could you please run the test and note the line-height. It ranges from 1
> up to 1.767 for Segoe Print.
>

Thanks. But you aren't seeing the problem I am trying to discuss: whether
the same line height is applied to the case of multiple lines, each of
which have different font sizes, or whether each line is considered
separately for determining line height.

Your example shows only one line.

The spec says "On a block container
element<http://www.w3.org/TR/CSS2/visuren.html#block-boxes> whose
content is composed of
inline-level<http://www.w3.org/TR/CSS2/visuren.html#inline-level>
elements,
'line-height' specifies the *minimal* height of line boxes within the
element."

Note the phrase "within the *element*". It doesn't say "within each
*line* produced
by the element".

What you have demonstrated is that UAs appear to treat each line separately
for interpreting line height.


>
> http://www.brunildo.org/test/**aspect-lh-table2.html<http://www.brunildo.org/test/aspect-lh-table2.html>
>
>
>  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'.
>>
>
> What a UA computes as normal is something based on the font metrics of a
> particular font. This can range from 1 up to 1.767 for Segoe Print. Most
> values fall between 1 to 1.2. To test, make sure your browser does not have
> a minimum font size set (make sure it is none).
>
> http://brunildo.org/test/**normal-lh-plot.html<http://brunildo.org/test/normal-lh-plot.html>
>
>  <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.
>>
>
> Of course it will be a NO-OP. The reason is that what you think is font
> size is just font or fonts if used in a plural sense.


The fact that you and I have different readings of the spec should be
sufficient to show that the spec is ambiguous, yes?


>
>
> Alan
>
>
> --
> Alan Gresley
> http://css-3d.org/
> http://css-class.com/
>