Re: [css-values] Line-height relative length units 'lh' and 'rlh'

Le 2014-06-01 03:29, MURAKAMI Shinyu a écrit :
> I would like to propose new relative length units:
> 
>     'lh'    line-height of the element
>     'rlh'   line-height of the root element
> 
> (refer the used value of the line-height property)
> 
> The line-height relative length units are necessary for specifying
> the block-size of a block container using number of lines.
> 
> Examples:
> 
>   @page {
>     height: 20rlh; /* n of lines per page */
>   }
> 
>   p {
>     margin-top:    1lh;  /* keep paragraph spacing to 1 line-height */
>     margin-bottom: 1lh;
>   }
> 
> To prevent circular dependency, the following limitations are needed:
> 
> - 'lh' cannot be used on 'line-height' and 'font-size' property value
> - 'rlh' cannot be used on root element's 'line-height' and 'font-size'
> property value
> 
> Thoughts?

MURAKAMI,

I think your proposal is impractical, not suitable; lh as an unit would 
be referring to a length that is not, for practical purposes, 
predictable. Not all line boxes have the same height.

line-height as a property defines the minimum height of line box; 
line-height does not define an height but a minimum rather:

"
'line-height' specifies the minimal height of line boxes within the 
element. The minimum height consists of a minimum height above the 
baseline and a minimum depth below it
"
http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height

and so the actual line box height could be greater.

If you do:

div {height: 10em;}
or
div {height: 20vh;}

the div's content height is set and overflow can occur; the height is 
not a minimum; the height is set, determined (computable at load time or 
at parsing time) and is not flexible.

div {line-height: 24px;} is a minimum.
or
div {line-height: 3;} is also a minimum.

How tall (as length) is the height of each and every single line box 
depends on the several factors listed and defined in §10.8:
"
The height of a line box is determined as follows: (...)
"
http://www.w3.org/TR/CSS21/visudet.html#line-height

There are several cases and situations where content (or padding or 
border or margin) will "bleed" outside the line box.

--------------

Here's 3 test cases (you must have Ahem font installed to view these) 
illustrating how the line box height can be affected

- by the line-height of inline non-replaced elements
http://test.csswg.org/source/css21/inline-formatting-context-010b.xht

- by vertical-alignment of inline non-replaced elements
http://test.csswg.org/source/css21/inline-formatting-context-010c.xht

- by vertical-alignment of inline replaced elements
http://test.csswg.org/source/css21/inline-formatting-context-010d.xht

Gérard

Received on Sunday, 1 June 2014 20:26:09 UTC