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

Le Lun 26 novembre 2012 2:21, Andrew Fedoniouk a écrit :
> 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.
> If that property defines minimal height then these two paragraphs
> should be rendered in the same way.

    Tells user agents to set the used value to a "reasonable" value based
on the font of the element. The value has the same meaning as
<number>. We recommend a used value for 'normal' between 1.0 to 1.2.

This demo page


from Alan Gresley shows that 'line-height: normal' is approximately
(average) 1.15em for various fonts. The used value of 'line-height:
normal' depends on the font being used.

> But all browsers I've tried render
> this
> sample with results I cannot interpret. The only exception is IE9, it
> treats
> as if 'line-height' defines max-line-height.

If you can bring out an example/demonstration of this, I may create and
submit a test case for you into CSS 2.1 test suite.

> That is also against the
> spec but at
> least the rendering is predictable somehow.
> 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} );


Try these 2 tests:



in a browser in which you can delete nodes. Say, you remove the bottommost
small square, then the line box (painted orange in these 2 tests) will
become shorter because the minimal height it needs to be to enclosed all
elements is shorter. The orange painted rectangle must be tall enough to
enclose any of the small squares (which are vertically-aligned) and the
short blue vertical thick line).

You need to install Ahem font
to view those tests.

CSS 2.1 Test suite RC6, March 23rd 2011

Contributions to CSS 2.1 test suite

Web authors' contributions to CSS 2.1 test suite
Received on Monday, 26 November 2012 19:08:58 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:08:23 UTC