Line layout in browsers

Hey all,

    I decided to try to find out what the actual default line-heights 
are in various browsers.  I quickly got sidetracked by the actual 
behavior of browsers in laying out lines of text on my test page. 
Thing is, I'm not 100% I know what's going on, nor what should be 
going on.  So I came here in hopes of assistance.
    My test file is here:

    http://meyerweb.com/eric/css/tests/line-height/bigtext-spans.html

Here's what I've observed:

    * Compared to Firefox (et. al.), both Internet Explorer and Safari 
appear to push font characters downard by about 7% the height of the 
character boxes.  Or maybe the line box.  Either way, they end up 
with descenders actually protruding from the line boxes.  That can't 
be right, can it?  Firefox, on the other hand, seems to keep the 
characters inside the line boxes.
    * 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.
    * Conversely, the borders overlap in Explorer and Firefox at '1', 
but get close to touching at '1.2'.  Which again seems backwards.
    * 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.

What really made my head go all asplody is that despite all the 
differences mentioned above, the content-area of the enclosing 'div' 
was almost exactly the same (to within a pixel or two) across 
browsers.  That's good, I guess, but I'm still trying to figure out 
what's going on with the differences described above.
    I would absolutely believe that I'm missing something obvious 
here.  I may know a lot about line layout, but holding the entire 
thing in my head at once is very, very difficult.  Also, it makes my 
brain ache.  If I have missed something, let me know so I can spawn a 
test for it and we'll see what results.

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

Received on Thursday, 17 January 2008 20:28:54 UTC