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

On Sat, Oct 19, 2013 at 6:40 PM, Glenn Adams <glenn@skynav.com> wrote:

>
> On Sat, Oct 19, 2013 at 10:36 AM, Alan Gresley <alan@css-class.com> wrote:
>
>> On 19/10/2013 11:36 AM, Glenn Adams wrote:
>>
>>> On Fri, Oct 18, 2013 at 5:31 PM, Gérard Talbot <www-style@gtalbot.org
>>> >wrote:
>>>
>>>  Le 2013-10-18 13:28, Glenn Adams a écrit :
>>>>
>>>>
>> [snipped]
>>
>>  What I am observing, however, is that font size appears to be
>>>>> interpreted
>>>>> on a per-line basis in order to create a per-line value for line
>>>>> height.
>>>>>
>>>>>
>>>> Yes. That's how it should be too. In a multi-line block element, each
>>>> line
>>>> box can have its own distinct height.
>>>>
>>>
>>>
>>> Unfortunately you are using "line height" in two ways. I am referring to
>>> *the
>>> property whose name is 'line-height'*. You are referring to the *height
>>> of
>>> a line box*. I am talking about only the former, and not about the
>>> latter.
>>>
>>
>> There is no former and later.
>
>
> Yes there is. There is the process of resolving the used value of the
> line-height property. And there is the process of determining the height of
> line boxes. These are separate processes.
>
> You apparently aren't recognizing this distinction, which makes it
> difficult to have a detailed conversation with you on this subject.
>
>
>> If line-height has a value other than normal like <number> | <length> |
>> <percentage>, then the line box will be the height of the declared
>> line-height value.
>>
>
> No, not true in general. The resolved *used value* of the line-height
> property is merely a parameter to determining the height of a line box. And
> the former is only related to the latter to the extent that it constrains
> the minimum height of the line box. It does not constrain the maximum
> height of the line box.
>
>
>>
>> A test case.
>>
>> <style type="text/css">
>> .element { font-size: 100px;}
>> .block { background: skyblue; height: 50px; }
>> .block+.block { background: yellowgreen; }
>> </style>
>>
>> <div class="element" style="line-height: 0px;">
>>   <div class="block"></div>
>>        XpÉx
>>   <div class="block"></div>
>> </div>
>>
>> <div class="element" style="line-height: 0em;">
>>   <div class="block"></div>
>>        XpÉx
>>   <div class="block"></div>
>> </div>
>>
>> <div class="element" style="line-height: 0pt;">
>>   <div class="block"></div>
>>        XpÉx
>>   <div class="block"></div>
>> </div>
>>
>> <div class="element" style="line-height: 0;">
>>   <div class="block"></div>
>>        XpÉx
>>   <div class="block"></div>
>> </div>
>>
>> <div class="element" style="line-height: 0%;">
>>   <div class="block"></div>
>>        XpÉx
>>   <div class="block"></div>
>> </div>
>>
>
> OK, but that is not related to the subject being discussed.
>
>
>>
>>  I am trying to resolve what it means to *determine a used value for the
>>> property named 'line-height'* when its computed value is 'normal'. The
>>>
>>> result of this process serves as an input parameter for the subsequent
>>> process of *determining the height of a line box*.
>>>
>>
>> If you have line-height: normal, it's much like having height: auto. You
>> don't need to have line-height: normal since it's the initial value already
>> and if the inherited value from an ancestor is a value that is not normal,
>> then declaring normal will return it to the initial value. Much like auto
>> is the initial value for height.
>>
>
> OK, but that doesn't improve the definition of the process of resolving
> the *used value* of the line-height property.
>
>
>>
>> A test case.
>>
>> <style type="text/css">
>> body { font-size: 100px; }
>> .block { background: skyblue; height: 50px; }
>> .block+.block { background: yellowgreen; }
>> </style>
>>
>> <div style="line-height: 0">
>>        XpÉx
>>   <div class="element" style="line-height: normal">
>>     <div class="block"></div>
>>        XpÉx
>>     <div class="block"></div>
>>   </div>
>> </div>
>
>
> First observation: all of Chrome (30.0.1599.101), Firefox (23.0.1), Opera
> (12.16), and Safari (6.0.5) render this differently on MacOSX 10.8.5 MBP
> Retina. The two closest were chrome and safari, but even there, a
> difference in the placement of the first line's baseline is observed. See
> attached.
>
> Of these four, only Opera produces the results I would expect.
>
> Second observation: your example is unrelated to the problem I am
> describing, which is how line-height property is resolved to a *used value
> * on a block element when there are multiple line boxes generated by the
> element.
>
> Now, if I adopt David's explanation, or at least my interpretation of
> David's explanation, that the intent of the "may [use] largest font size"
> language:
>
> (1) only refers to immediate Text node children of element E which compute
> value of 'line-height' is 'normal', and
>
> (2) *font size* is not interpreted as the *used value* of the 'font-size'
> property of E, but is instead interpreted as the sum of the maximum
> (scaled) ascent and maximum (scaled) descent of the actual font matched by
> the font matching algorithm on a character by character basis;
>
> Here I am assuming that the result of (2) is not equal to the used value
> of the 'font-size' property of E only in the case that when one of the
> matched fonts for the text either (a) uses bitmaps and scaling is not
> performed [otherwise the scaled bitmap font's height would match the
> 'font-size' of E] or (b) the sum of the ascent and descent metrics of the
> matched font exceeds unitsPerEm (for outlines) or exceeds the bitmap's
> height for bitmaps.
>
> Given the above, my
>
> Third observation: a test of this behavior would look something like:
>
> <p font-size="41px" line-height="normal" font-family="Copperplate Gothic">
>

Pasted wrong text, that should read

<p style="font-size: 41px; line-height: normal; font-family: 'Copperplate
Gothic';">


> USA<br>
> 中华人民共和国<br>
> العربية السعودية
> </p>
>
> And would attempt to demonstrate whether the line height assigned to the 3
> generated line boxes to be close to 1.2 * 41px or something larger, and
> whether the line heights assigned to the line boxes were the same or
> different. Here I have chosen a font family that is guaranteed not to cover
> the text, and thus need fallback mapping to other fonts.
>
> However, without instrumenting the code more than one gets through the
> typical inspection interface, it might be difficult to come up with
> answers. On Chrome, the height of the content area of the paragraph is
> reported as 161px, which if divided by three lines and then divided by 1.2
> comes out to 44.7px, suggesting that the specified 41px font-size is not
> the only basis for resolving the used value of line-height. I'll have to
> run Chrome in a debugger to determine what it is actually using.
>
>
>>
>> Alan
>>
>>
>>
>> --
>> Alan Gresley
>> http://css-3d.org/
>> http://css-class.com/
>>
>
>