W3C home > Mailing lists > Public > www-style@w3.org > June 2014

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

From: Gérard Talbot <www-style@gtalbot.org>
Date: Tue, 03 Jun 2014 23:04:51 -0400
To: W3C www-style mailing list <www-style@w3.org>
Message-ID: <463c5a0f9e7195532fd4f4213caed2e4@gtalbot.org>
Le 2014-06-01 16:25, Gérard Talbot a écrit :
> 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

now at

http://test.csswg.org/source/css21/linebox/inline-formatting-context-010b.xht

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

now at

http://test.csswg.org/source/css21/linebox/inline-formatting-context-010c.xht


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

now at

http://test.csswg.org/source/css21/linebox/inline-formatting-context-010d.xht


> 
> Gérard
Received on Wednesday, 4 June 2014 03:05:24 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:39:22 UTC