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

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.

We have a test that may demonstrate your point:

http://test.csswg.org/suites/css2.1/nightly-unstable/html4/vertical-align-boxes-001.htm

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

Gérard

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

Received on Monday, 21 October 2013 20:16:53 UTC