Re: Line layout in browsers

Could you elaborate regarding what platforms you were testing?

It looks like you are using the Helvetica font.  Helvetica on Windows  
maps to Arial.  Arial on Windows has a different (larger) line height  
than Helvetica on Mac.

We have an ascent hack in WebKit that hacks the metrics of Times,  
Helvetica and Courier on the Mac platform to boost their ascents to  
more closely match their Windows counterparts (Times New Roman, Arial  
and Courier New respectively).  Therefore when compared with other  
browsers on the Mac platform when using those fonts, WebKit will have  
a larger line-height.  Now that those Windows fonts are available on  
Leopard this hack may not really be needed any longer.  (Times New  
Roman, Arial and Courier New were not available on Tiger or earlier  
without installing Microsoft Office.)

This ascent hack was brought over (incorrectly) to Safari on Windows.   
It has since been removed, but I'm not sure if that has shipped in the  
latest public beta.  In nightly builds of Safari for Windows the Mac- 
specific hack has been removed.

dave
(hyatt@apple.com)

On Jan 17, 2008, at 2:28 PM, Eric A. Meyer wrote:

>
> 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 21:40:03 UTC