W3C home > Mailing lists > Public > www-style@w3.org > November 2012

Re: [css21] line-height, problem?

From: Gérard Talbot <www-style@gtalbot.org>
Date: Mon, 26 Nov 2012 19:40:49 -0500
Message-ID: <57e75bb020fdbee5df7130b595d3305a.squirrel@ed-sh-cp3.entirelydigital.com>
To: "Andrew Fedoniouk" <news@terrainformatica.com>
Cc: www-style@w3.org

Le Lun 26 novembre 2012 19:32, "Gérard Talbot" a écrit :
>
> Le Lun 26 novembre 2012 19:01, Andrew Fedoniouk a écrit :
>> Hmm, seems like my understanding of word "minimal" is completely wrong.
>>
>> Consider this very simple doc:
>> https://dl.dropbox.com/u/14981836/line-height-test-min.htm
>>
>> At the moment the spec[1] says:
>>
>> "On a block container element whose content is composed of
>> inline-level elements,
>> 'line-height' specifies the minimal height of line boxes within the
>> element."
>
> Okay, let's talk about your example here. We do not see where
> (from-its-top-to-its-bottom) the line box is exactly.
>
> If you set the 'line-height' to be 0.5em on the block, then it will be so.
> If you don't set it, it will be by default 'normal' which we know is, on
> average, 1.15 times its parent font-size.

Argh...

1.15 times the element's font-size rather.

"
<number>
    The used value of the property is this number multiplied by the
element's font size.
"
http://www.w3.org/TR/CSS21/visudet.html#leading


>
> If line-height is set to 0.5em (8px) and if it is smaller than content
> area (1em == 16px), then glyphs will bleed out of line box: this is what
> we see in your example. And those glyphs partially overlap the glyphs of
> previous line box. In your example, the upper part of the glyphs of "Next
> line" will overlap partially over the bottom parts of the "First line".
> The bottom part of the glyphs "First line" will overlap partially under
> the top part of the glyphs "Next line"

replace overlap partially under with "slide partially under". Lines boxes
are painted in source code order. So, in your example, "First line" is
painted first; then "Next line" is painted after ... and in your example
it is painted partially over.

>
> Please examine this demo:
>
> http://www.gtalbot.org/BrowserBugsSection/css21testsuite/line-height-1-unit.html
>
> Also, this one may also help understanding:


http://www.gtalbot.org/BrowserBugsSection/css21testsuite/line-height-0.html


Gérard
-- 
CSS 2.1 Test suite RC6, March 23rd 2011
http://test.csswg.org/suites/css2.1/20110323/html4/toc.html

Contributions to CSS 2.1 test suite
http://www.gtalbot.org/BrowserBugsSection/css21testsuite/

Web authors' contributions to CSS 2.1 test suite
http://www.gtalbot.org/BrowserBugsSection/css21testsuite/web-authors-contributions-css21-testsuite.html
Received on Tuesday, 27 November 2012 00:41:33 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:21:03 GMT