Re: [css21] line-height, problem?

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 UTC