RE: Line layout in browsers

As David observed, there is some difference in font metrics (in particular in how internal and external leading is handled). We would have to look at exactly same fonts to figure out more detail.

I want to comment on the other expectations:

>     * I put in a 'span' to surround the test text, and put top and
> bottom borders on it.  At a line-height of '1', the top and bottom
> borders of the 'span' touch between lines.  But if I bump the
> 'line-height' up to '1.2', or anything above '1', they spread apart.
> That shouldn't happen, right?  The 'span' elements should be as tall
> as the text, and so the borders should touch no matter what I do to
> the 'line-height' values.

In my understanding of 'line-height', it is the height of line box from layout point of view. In other words it is the distance between two baselines. Then increasing line height does pull apart spans of text.

>     * 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?

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

--Alex

Received on Friday, 18 January 2008 01:18:31 UTC