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

Re: line-height limitations

From: Brad Kemper <brad.kemper@gmail.com>
Date: Fri, 18 Mar 2011 16:44:55 -0700
Message-Id: <9D4504D4-00D8-43FA-829C-E551FF5EA6D9@gmail.com>
Cc: "www-style@w3.org" <www-style@w3.org>
To: "L. David Baron" <dbaron@dbaron.org>
I see. I didn't notice that part until you put a border around the P. 

The problem still goes away when you add the line-height you want to the letter you made big. If you are worried about the first line extending out of the top on the content box, a little extra padding would usually hide that effectively. It's hard to imagine this would be that hard to work around for chapter first lines in iBooks. A new property seems like overkill for such a limited problem that is easily worked around. 

Brad Kemper

On Mar 18, 2011, at 4:06 PM, "L. David Baron" <dbaron@dbaron.org> wrote:

> 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:45:36 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:38:44 UTC