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

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

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 an(some) inline box(es) is(are) vertically-aligned inside the line
> box, then the line box height can increase beyond the height of the
> declared line-height value.

Where do you see that. In §9.4.2 there is as follows:

   | A line box is always tall enough for all of the
   | boxes it contains. However, it may be taller than
   | the tallest box it contains (if, for example,
   | boxes are aligned so that baselines line up).
   | When the height of a box B is less than the
   | height of the line box containing it, the vertical
   | alignment of B within the line box is determined
   | by the 'vertical-align' property.

See test below where all line boxes are 20px height due to a line-height 
value of 20px.

> A line box is always tall enough for all of the boxes it contains.
> However, it may be taller than the tallest box it contains (if, for
> example, boxes are aligned so that baselines line up).
> "
> §9.4.2 Inline formatting contexts
> http://www.w3.org/TR/CSS21/visuren.html#inline-formatting
>
> Gérard


Alan


<style type="text/css">
body { font-size: 100px; }
.block { background: skyblue; height: 50px; }
.block~.block { background: yellowgreen; }
.element {line-height: 20px }
</style>

<div class="element" style="">
   <div class="block"></div>
        XpÉx
   <div class="block"></div>
</div>

<div class="element">
   <div class="block"></div>
      <span style="vertical-align: baseline">XpÉx</span>
   <div class="block"></div>
</div>

<div class="element">
   <div class="block"></div>
      <span style="vertical-align: middle">XpÉx</span>
   <div class="block"></div>
</div>

<div class="element">
   <div class="block"></div>
      <span style="vertical-align: sub">XpÉx</span>
   <div class="block"></div>
</div>

<div class="element">
   <div class="block"></div>
      <span style="vertical-align: super">XpÉx</span>
   <div class="block"></div>
</div>

<div class="element">
   <div class="block"></div>
      <span style="vertical-align: text-top">XpÉx</span>
   <div class="block"></div>
</div>

<div class="element">
   <div class="block"></div>
      <span style="vertical-align: text-bottom">XpÉx</span>
   <div class="block"></div>
</div>

<div class="element">
   <div class="block"></div>
      <span style="vertical-align: top">XpÉx</span>
   <div class="block"></div>
</div>

<div class="element">
   <div class="block"></div>
      <span style="vertical-align: 40%">XpÉx</span>
   <div class="block"></div>
</div>




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

Received on Monday, 21 October 2013 05:12:38 UTC