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

On 22/10/2013 7:16 AM, Gérard Talbot wrote:
> Le 2013-10-21 01:12, Alan Gresley a écrit :
>> On 20/10/2013 6:52 AM, Gérard Talbot wrote:
>>> Le 2013-10-19 12:36, Alan Gresley a écrit :
>>>> 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.
>>
>>> It usually is the case but not always like that. If the line box has a
>>> tall image, then line box height will increase beyond the height of the
>>> declared line-height value.
>>
>> You missed the paragraph above in §9.4.2 which has as follows:
>>
>>   | The height of a line box is determined by the rules
>>   | given in the section on line height calculations.
>>
>> §10.8 Line height calculations: the 'line-height' and 'vertical-align'
>> properties http://www.w3.org/TR/CSS21/visudet.html#line-height
>>
>> So for an image (inline replaced element) see part of point 1. of §10.8,
>>
>>   | The height of each inline-level box in the line box
>>   | is calculated. For replaced elements, inline-block
>>   | elements, and inline-table elements, this is the
>>   | height of their margin box.
>>
>> and part of point 2 of §10.8.
>>
>>   | The inline-level boxes are aligned vertically
>>   | according to their 'vertical-align' property. In case
>>   | they are aligned 'top' or 'bottom', they must be
>>   | aligned so as to minimize the line box height.
>>
>>
>> So for a <length>, if the margin box is zero in height, then the line
>> box will be the value of the line-height.
>
> Correct. I was not suggesting otherwise.
>
>> A line-height of 0px will
>> produced a line box of zero height and a line-height of 20px will
>> produced a line box of 20px height. The below styles for an image with
>> the intrinsic height of 60px will all achieve a margin box of zero
>> height.
>>
>> img {vertical-align: bottom; margin-bottom: -30px;margin-top: -30px;}
>> img {vertical-align: top; margin-top: -60px; }
>> img {vertical-align: top; height: 0px; }
>> img {vertical-align: bottom; border: 20px solid silver; height: 20px;
>> margin-bottom: -60px; }
>
>
> It's always best to provide a link to a test where this can be seen and
> where code is being tested.

Yes, true.

http://css-class.com/test/css/text/linebox-line-height-margin-box.htm

> We have a test that may demonstrate your point:
>
> http://test.csswg.org/suites/css2.1/nightly-unstable/html4/vertical-align-boxes-001.htm

I need to examine that test case in detail but it seems more of a 
vertical-align test (vertical alignment in a line box) as apposed to a 
test that test a zero height margin-box.

>> Using the same styles for an image (a margin box of zero height) with
>> a line-height as a <number> will produce a ratio of the UA font size
>> setting in one UA (Firefox) and other values in other UAs.
>>
>> 1. So in Firefox we can have the following:
>>
>>   a. 16px * 0 == 0px
>>   b. 16px * 0.5 == 8px
>>   c. 16px * 1 == 16px
>>   d. 16px * 1.2 == 19.2px (rounded down to 19px)
>>
>>
>> 2. With Opera thought, the font size is completely ignored and we end
>> up with some strange values which I can not explain. We will always
>> have a line box base on the <number> with some unknown variable.
>>
>> 3. Chrome seems to do similar to Firefox for font size medium.
>>
>
> If you can, please provide a test where such code is involved.
> And again, I am not suggesting that what you say can not happen.

Hint, each time step 1 is done (altered), you must also do step 2 to get 
the updated used value (computed style).

http://css-class.com/test/css/text/linebox-line-height-margin-box-font-size.htm


> Gérard
>
> P.S.: I now think CSS 2.1 test suite could use additional tests
> judiciously testing all this.

Very true but that may involve a rewrite of the sections of CSS2.1 in 
the errata.

Alan

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

Received on Tuesday, 22 October 2013 02:07:13 UTC