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

Re: [css21] line-height, problem?

From: Alan Gresley <alan@css-class.com>
Date: Tue, 27 Nov 2012 14:47:23 +1100
Message-ID: <50B437CB.7040703@css-class.com>
To: Andrew Fedoniouk <news@terrainformatica.com>
CC: www-style@gtalbot.org, www-style@w3.org
On 27/11/2012 11:01 AM, Andrew Fedoniouk wrote:
> 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."
>
> But UAs render this example as if 'line-height' specifies not the minimal height
> but just height of line boxes.

This is absolutely correct. The default line-height (which is minimal) 
is the height of the line box. When line-height:0 is set and a new line 
is required, the newline will paint over the top of the previous line.

A test case.

<!DOCTYPE html>

<style type="text/css" media="screen">
   div { margin: 0; padding: 20px; font-size: 50px; line-height: 0; }
   span { background: rgba(0,0,255,0.1); }
</style>

<p>resize the width of the window</p>
<div>text <span>text</span> text <span>text</span> text 
<span>text</span> text <span>text</span> text <span>text</span> text 
<span>text</span> text <span>text</span> text <span>text</span> text 
<span>text</span> text <span>text</span> text <span>text</span> text 
<span>text</span> text <span>text</span> text <span>text</span> text 
<span>text</span> text <span>text</span> text <span>text</span> text 
<span>text</span> text <span>text</span></div>


> 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

The minimal height (or default) is the line-height (or height of line 
box) that prevents borders (or margins) from bleeding. A test case that 
show the borders bleeding.

http://css-class.com/test/css/text/int-border-dashed.htm

Alan


-- 
Alan Gresley
http://css-3d.org/
http://css-class.com/
Received on Tuesday, 27 November 2012 03:47:57 GMT

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