W3C home > Mailing lists > Public > www-style@w3.org > March 2011

Re: line-height limitations

From: L. David Baron <dbaron@dbaron.org>
Date: Fri, 18 Mar 2011 16:06:16 -0700
To: Brad Kemper <brad.kemper@gmail.com>
Cc: www-style@w3.org
Message-ID: <20110318230616.GA16239@pickering.dbaron.org>
On Friday 2011-03-18 15:38 -0700, Brad Kemper wrote:
> On Mar 18, 2011, at 3:20 PM, "L. David Baron" <dbaron@dbaron.org> wrote:
> 
> > On Friday 2011-03-18 15:08 -0700, Brad Kemper wrote:
> >> Actually, what I meant is to change the UA stylesheet, so if, for example, it currently has this:
> >> 
> >> p { line-height:1.2; }
> >> 
> >> then instead you change it to this:
> >> 
> >> p { line-height:1.2em; }
> >> 
> >> Does this not fix the problem with little or no negative repercussions?
> > 
> > This causes multiple problems:
> > 
> > * It means that <p><span style="font-size:2em">text</span></p> has
> >   overlapping text.
> 
> I'm not sure what you mean it overlaps with, but in my testing
> with webkit, I didn't see any problem with that. The larger font
> span inherited the line-height length measurement of the P, but
> the line box grew taller (apparently) to push the text downward,
> preventing any overlap with previous lines or with the top of the
> content box. The only thing that did any overlapping was
> descenders with the next lines, which is the wanted result. 

If you use 'line-height: 1.2em", it inherits as a length, so the
span has a line-height that's 0.6 times its font-size.  This leads
to negative half-leading on both sides; on the bottom side it
doesn't matter since you also have the line box extents without
negative leading coming from the block; on the top it does matter,
and you get overlap.  For example:

http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C!DOCTYPE%20html%3E%3Cp%20style%3D%22border%3A%20medium%20solid%20blue%3B%20line-height%3A%201.2em%22%3ETEXT%20%3Cspan%20style%3D%22font-size%3A%202em%22%3ETEXT%3C%2Fspan%3E%20TEXT%3C%2Fp%3E

or, with 4em rather than 2em:

http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C!DOCTYPE%20html%3E%3Cp%20style%3D%22border%3A%20medium%20solid%20blue%3B%20line-height%3A%201.2em%22%3ETEXT%20%3Cspan%20style%3D%22font-size%3A%204em%22%3ETEXT%3C%2Fspan%3E%20TEXT%3C%2Fp%3E

-David

-- 
L. David Baron                                 http://dbaron.org/
Mozilla Corporation                       http://www.mozilla.com/
Received on Friday, 18 March 2011 23:06:47 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:38 GMT