Re: [css-values] possible circular dependency of lh unit

Hi Gérard,

There's a paragraph at the end of the section on font-relative units that
explains how circular references are avoided.
https://drafts.csswg.org/css-values-4/#font-relative-lengths

When used outside the context of an element (such as in media queries
> <https://drafts.csswg.org/mediaqueries-4/#media-query>), these units
> refer to the metrics corresponding to the initial values of the font
> <https://drafts.csswg.org/css-fonts-3/#propdef-font> and line-height
> <https://drafts.csswg.org/css2/visudet.html#propdef-line-height> properties.
> When used in the value of the font-size
> <https://drafts.csswg.org/css-fonts-3/#propdef-font-size> property on the
> element they refer to, they resolve against the computed metrics of the
> parent element—or against the computed metrics corresponding to the
> initial values of the font and line-height properties, if the element has
> no parent. Additionally, when lh
> <https://drafts.csswg.org/css-values-4/#lh> or rlh
> <https://drafts.csswg.org/css-values-4/#rlh> units are used in the value
> of the line-height property on the element they refer to, they resolve
> against the computed line-height and font metrics of the parent element—or
> the computed metrics corresponding to the initial values of the font and
> line-height properties, if the element has no parent. (The other
> font-relative units continue to resolve against the element’s own metrics
> when used in line-height.)


That means, for your specific example:

What is supposed/expected to happen with the following code:
>
> div
>    {
>      font-size: 1lh;
>      line-height: 1em;
>    }
>

The font size will be set according to the line height of the parent
element, and then the new line height will be set according to that font
size.

~ABR

Received on Thursday, 25 October 2018 00:13:18 UTC