W3C home > Mailing lists > Public > www-style@w3.org > January 2008

Re: Line layout in browsers

From: David Hyatt <hyatt@apple.com>
Date: Mon, 21 Jan 2008 18:02:59 -0600
To: Bruno Fassino <fassino@gmail.com>
Cc: "'Eric A. Meyer'" <eric@meyerweb.com>, www-style@w3.org
Message-id: <FEA17101-4736-4057-A577-B1482D01ED78@apple.com>

Yes, the oddity is really that the 'content-area' in browsers is based  
on the ascent + descent of the font, and these fonts have ascents that  
in effect include some or all of their line spacing.  This means for a  
font-size of 100px, the 'content area' is often closer to 120px.


> Eric A. Meyer wrote:
>> the first test on
>> <http://meyerweb.com/eric/css/tests/line-height/bigtext-spans.html>
>> there is no padding on the spans, and at 'line-height: 1' there's a
>> more than a few pixels of overlap in Safari and IE.
> Avoiding Helvetica (which seems to introduce further problems) I see  
> some
> overlap consistently in all browsers. But this looks correct, or at  
> least to
> have an explanation.
> According to the spec, for an inline element:
> "The height of the content area should be based on the font, but this
> specification does not specify how."
> And:
> "The vertical padding, border and margin of an inline, non-replaced  
> box
> start at the top and bottom of the content area, not the 'line- 
> height'"
> Indeed in all browsers a border around a span delimit a space whose  
> height
> is _independent_ on the line-height, is of course dependent on the
> font-size, but _not_ equal to the font-size.
> It is more or less equal to the 'normal' line-height, so around 1.2  
> times
> the font-size, but much dependend on the font-family.
> So at line-height:1, it is normal to have 'overlap' between borders  
> drawn
> around spans (they are not drawn around
> inline-boxes, but around 'content areas' usually higher that the  
> font-size.)
> Helvetica is very particular here, because (in addition to the  
> problems
> mentioned by David) it has 'normal' line-height 1, and a 'content- 
> area'
> equal to the font-size (but this is rather uncommon.)
> Here is a test case with different font families, showing different
> overlaps:
> http://www.brunildo.org/test/inline-height.html
> --
> Bruno Fassino http://www.brunildo.org/test
Received on Tuesday, 22 January 2008 00:03:13 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:27:33 UTC