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

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

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

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

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

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

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

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

Alan

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

Received on Friday, 18 October 2013 10:53:22 UTC