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:32:08 -0500
Message-ID: <9f8eeeed5f1f80d4613bf3a82e1c8dd5.squirrel@ed-sh-cp3.entirelydigital.com>
To: "Andrew Fedoniouk" <news@terrainformatica.com>
Cc: www-style@w3.org

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.

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"

Please examine this demo:

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

Also, this one may also help understanding:

file:///home/gerard/Documents/Shieldhost/BrowserBugsSection/css21testsuite/line-height-0.html

I think you have a very good point though: what does "minimal" imply
exactly in such sentence? The word "minimal" initially was understood by
you in a way that is not confirmed and not supported by basic
tests/testing.

Gérard


> But UAs render this example as if 'line-height' specifies not the minimal
> height
> but just height of line boxes.
>
> Either spec is wrong with use of "minimal" there or UAs are wrong all
> together.
>
> [1] http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height
>
> --
> Andrew Fedoniouk.
>
> http://terrainformatica.com
>
> On Mon, Nov 26, 2012 at 11:18 AM, "Gérard Talbot" <www-style@gtalbot.org>
> wrote:
>>
>> Le Lun 26 novembre 2012 13:51, Andrew Fedoniouk a écrit :
>>> On Mon, Nov 26, 2012 at 12:14 AM, L. David Baron <dbaron@dbaron.org>
>>> wrote:
>>>> On Sunday 2012-11-25 23:21 -0800, Andrew Fedoniouk wrote:
>>>>> This sample:
>>>>>
>>>>> https://dl.dropbox.com/u/14981836/line-height-test.htm
>>>>>
>>>>> contains two identical paragraphs, the only difference is that
>>>>> first one has line-height:normal and second one - line-height:1em;
>>>>>
>>>>> According to the spec [1]:
>>>>>    'line-height' specifies the *minimal* height of line boxes within
>>>>> the element.
>>>>>
>>> ...
>>>>>
>>>>> I suspect that I miss something between lines of the spec.
>>>>> My understanding of the spec wording is this:
>>>>>
>>>>> used-line-height = max( {normal-line-height}, {defined-line-height}
>>>>> );
>>>>>
>>>>
>>>> (1) when you're testing line-height, you should really test
>>>> standards mode rather than quirks mode; quirks mode behavior is
>>>> substantially different (and not fully explained by the first two
>>>> items in http://quirks.spec.whatwg.org/#css ).
>>>>
>>>> (2) 'normal' and '1em' are *very* different in terms of how they
>>>> inherit when the font size changes (since '1em' inherits as the
>>>> computed value, which is no longer relative to the changed
>>>> descendent font size).  'normal' and '1' are much more similar.
>>>>
>>>> -David
>>>>
>>>
>>> Thanks, David. I've updated the sample with HTML5 doctype.
>>> That actually makes no difference (only IE started to match
>>> all other UAs here).
>>>
>>> In fact I've missed that part in the spec:
>>> "On a non-replaced inline element, 'line-height' specifies the height
>>> that is used in the calculation of the line box height."
>>
>> Right here, the "calculation of the line box height" should be a link to
>>
>> http://www.w3.org/TR/CSS21/visudet.html#line-height
>>
>> And the sentence itself is not easy to figure out. It should be saying
>> instead/rather:
>>
>> "On a non-replaced inline element, 'line-height' specifies its height
>> which will be used in the calculation of the line box height."
>>
>> because
>>
>> "
>> The height of each inline-level box in the line box is calculated. For
>> replaced elements, inline-block elements, and inline-table elements,
>> this
>> is the height of their margin box; for inline boxes, this is their
>> 'line-height'.
>> "
>> http://www.w3.org/TR/CSS21/visudet.html#line-height
>>
>>>
>>> So for such elements (like <big> in my sample) line-height defines
>>> not "min-line-height" but just 'line-height' allowing to reduce it.
>>> Together with the fact that line-height is an inheritable property
>>> that creates such strange effect.
>>
>> Not sure what you're trying to say... but I definitely agree with you
>> that
>> this part of the spec - without useful diagrams and judicious explaining
>> schemas - is difficult to visualize, to conceptualize.
>>
>> 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
>>
>


-- 
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:32:41 GMT

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