Re: [CSS21] line boxes, line-height and zero height floats

Apologies, my explanation was fundamentally incorrect.  (I really 
shouldn't write these things late at night!)

On 17/01/2012 00:27, Anton Prowse wrote:
> On 16/01/2012 03:37, Alan Gresley wrote:
>> http://css-class.com/test/css/text/linebox-line-height-012.html
>>
>> When 'line-height: 0' is selected for all test, I expected to see in all
>> browsers what I observe in IE9 and WebKit and that is where the two
>> longer floats are touching (since the shorter float has zero height) and
>> the line box or content box has it's upper half leading over the top
>> longer float and it's lower half leading over the bottom longer float.
>
> I've already explained the inline formatting model a couple of times.
> Still, let me do so again to describe the correct behaviour for the
> first two tests is the following. The line-height on the div which is
> the parent of the floats and the inline-level box is zero. As per
> 10.8.1, this specifies the minimal height of the line boxes within the
> div (through creating a strut of this height within each line box that's
> created). The div also has a font-size of 100px and so the inline-level
> box has a content area height is around 100px. (The exact content area
> height is explicitly undefined.) The vertical-align of the inline-level
> box is the initial value, namely 'baseline'. Hence the baseline of the
> 100px-high text aligns with the baseline of the (zero-height) strut.
> Now, the "height" of the inline-level box is zero (despite its content
> area height being around 100px). There is equal half-leading placed
> above and below content area box of the inline-level box to vertically
> centre the content area "within" the inline-level box. (In this case,
> the leading is negative). It's difficult to imagine this, and so as I've
> mentioned various times it's easier to imagine that each inline-level
> box has an associated guide box; in this case, the guide box is zero
> height and it's vertically centred within the content area box of the
> inline-level box.
>
> The line box height is defined in 10.8 to be the distance between the
> uppermost inline-level box top and the lowermost inline-level box
> bottom. Here, "top" and "bottom" refer to the "height" of the
> inline-level box; the spec does not define a term to describe the edges
> to which they refer, but note that they're nothing to do with margin-,
> border-, padding- or content-edges. Again, this is why I introduce the
> concept of guide boxes. The spec is saying that the line height is the
> distance between the uppermost guide box top and the lowermost guide box
> bottom. This is around 50px high, since the zero-height guide box for
> the strut sits on the baseline and the zero-height guide box for the
> inline-level box is vertically centred within the content area box of
> the inline-level box.

No, the line box has *zero* height.  The zero-height guide box for the 
strut sits vertically centred within what would be its content area if 
it contained a non-fallback glyph.  Since the strut has the div's font 
properties, the guide boxes of the strut and of the inline-level box are 
aligned since their baselines are aligned (assuming no font fallback on 
the inline-level box).

>> In Firefox 9, I also observe something different. The first two test
>> 'anonymous inline element' and 'inline element (inline-level)' shows the
>> two longer floats separated by a gap
> [...]
>> As the line height is reduced, the line box or content box is only
>> bleeding
>> upwards over the top longer float and the gap when is it minimum (based
>> on the x-height) is always the vertical height of the distance between
>> the baseline and the vertical midway line (guide line ?) of the
>> line-height box (to use a term).
>
> This seems correct, visually. (It's easy to tweak the test case so that
> Firefox no longer renders correctly though.)

No, actually I don't know why the final float is rendered so low given 
that the line box has zero height.

>> In Firefox 9, the last test 'block element (block-level)' renders the
>> same as IE9 and WebKit where the two longer floats are touching and the
>> line box or content box has it's upper half leading over the top longer
>> float and it's lower half leading over the bottom longer float.
>
> This is incorrect. The underlying issue here is that Firefox gets the
> following test case wrong:
>
> <!DOCTYPE html>
> <div style="line-height:0>text</div>
>
> It thinks the used height of the div is zero (or at least, that's what
> Firebug tells me). This is wrong, as explained above.

Nope, Firefox is correct.

Cheers,
Anton Prowse
http://dev.moonhenge.net

Received on Tuesday, 17 January 2012 00:19:33 UTC