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

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

From: Tab Atkins Jr. <jackalmage@gmail.com>
Date: Sun, 1 Jun 2014 10:26:17 -0700
Message-ID: <CAAWBYDDtdT7fSq=M+Wdxec5S87mHEafzC14GYryxLkCUJf5uDQ@mail.gmail.com>
To: MURAKAMI Shinyu <murakami@antenna.co.jp>
Cc: www-style list <www-style@w3.org>
On Sun, Jun 1, 2014 at 12:29 AM, MURAKAMI Shinyu <murakami@antenna.co.jp> wrote:
> 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.

What happens when a line is larger than the 'line-height' property
value, due to containing a large inline image, for example?  Is it
okay that the element will contain less than the specified number of
lines?  Or does the lh value vary based on what lines are actually
present in the element?

If you recall from the last day of the face-to-face meeting, I
proposed standardizing the -wekbit-line-clamp behavior, which lets you
specify the height of an element in terms of the number of lines.
This actually *does* handle the "some lines are a different size"
problem, if all you care about is sizing an element to a specific
number of lines.

> Examples:
>
>   @page {
>     height: 20rlh; /* n of lines per page */
>   }

So I think this would work with the line-clamp proposal.  You'd just set it to:

@page {
  line-clamp: 20;
}

Or whatever we end up naming the property.  We'd have to define that
'line-clamp' applies to @page, of course, but that's not hard.

>   p {
>     margin-top:    1lh;  /* keep paragraph spacing to 1 line-height */
>     margin-bottom: 1lh;
>   }

This seems like it's about maintaining vertical rhythm, which implies
that what you really want is the Line Grid module, right?  Having a
unit that's relative to the current line grid on the element makes a
little more sense to me than one based on the 'line-height' property.

> 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

This sounds like you're proposing making it a syntax error to use 'lh'
and 'rlh' in these circumstances?  Might be better to use something
akin to the 'em' behavior, where we instead use the value from the
parent, or a default value.

~TJ
Received on Sunday, 1 June 2014 17:27:04 UTC

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