RE: Line layout in browsers

At 5:18 PM -0800 1/17/08, Alex Mogilevsky wrote:

>>      * Conversely, the borders overlap in Explorer and Firefox at '1',
>>  but get close to touching at '1.2'.  Which again seems backwards.
>
>'1' is normally less than default line height defined by font. So 
>span borders (which are drawn around actual character boxes) will 
>overlap. What is unexpected there?

    Wait, what?  The last I checked, the height of a line is based on 
the computed 'font-size' of an element.  So if the element has a 
computed 'font-size' of 100px and the 'line-height' is '1', then the 
'line-height' is 100px.  If the spans are based on the actual 
character boxes, which are 100px high, then they ought to exactly 
line up with the edge of the line box in this case.  And, thus, not 
overlap.  At least, that's my understanding of the CSS line layout 
model.

>>      * Also, the borders of the 'span' don't seem to change their
>>  separation from the characters no matter what 'line-height' value I
>>  explicitly assign it.  I'd think they should move up and down.
>
>Borders are also drawn around actual text, and they should not 
>depend on line-height. E.g. if line-height is set to a big number 
>(or a span has a smaller font) the border will not grow when 
>line-height grows.

    Right right right.  It's amazing how much the line layout model 
still hurts and confuses me.

-- 
Eric A. Meyer (eric@meyerweb.com)     http://meyerweb.com/

Received on Monday, 21 January 2008 20:25:57 UTC