Intent to Ship: CSS 'lh' Length Unit

232 views
Skip to first unread message

Rune Lillesveen

unread,
Oct 13, 2022, 10:11:09 AM10/13/22
to blink-dev

Contact emails

fut...@chromium.org

Explainer

None

Specification

https://www.w3.org/TR/css-values-4/#lh

Summary

Support for expressing CSS lengths relative to the line-height


Motivation

There is a wish/need to use the lh unit to size textareas to fit a given number of lines of text. See [1]. [1] https://github.com/w3c/csswg-drafts/issues/7542


Blink component

Blink>CSS


TAG review status

Not applicable

Risks



Interoperability and Compatibility



Gecko: No signal (https://bugzilla.mozilla.org/show_bug.cgi?id=1310170)

WebKit: In development (https://bugs.webkit.org/show_bug.cgi?id=195180) Implemented behind a flag

Web developers: No signals

Other signals:

WebView application risks

Does this intent deprecate or change behavior of existing APIs, such that it has potentially high risk for Android WebView-based applications?



Debuggability

The new unit should be automatically supported by devtools. No need for any changes.



Will this feature be supported on all six Blink platforms (Windows, Mac, Linux, Chrome OS, Android, and Android WebView)?

Yes

Is this feature fully tested by web-platform-tests?

Yes

https://wpt.fyi/css/css-values/lh-rlh-on-root-001.html
https://wpt.fyi/css/css-values/lh-unit-001.html
https://wpt.fyi/css/css-values/lh-unit-002.html
https://wpt.fyi/css/css-values/lh-unit-003.html
https://wpt.fyi/css/css-typed-om/stylevalue-subclasses/numeric-objects/cssUnitValue.html
https://wpt.fyi/css/css-properties-values-api/unit-cycles.html
https://wpt.fyi/css/css-values/animations/line-height-lh-transition.html
https://wpt.fyi/css/css-properties-values-api/registered-property-computation.html
https://wpt.fyi/css/css-contain/container-queries/font-relative-units-dynamic.html
https://wpt.fyi/css/css-contain/container-queries/font-relative-units.html

Flag name

#enable-experimental-web-platform-features / CSSLhUnit (Blink)

Requires code in //chrome?

False

Tracking bug

https://crbug.com/937104

Estimated milestones

DevTrial on desktop108
DevTrial on Android108


Link to entry on the Chrome Platform Status

https://chromestatus.com/feature/4998371945742336

Links to previous Intent discussions

Intent to prototype: https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CACuPfeSsKWD6%3DEvmbzVe7f1o4cniTDcRzXEqWnvHLAbCRxnfgQ%40mail.gmail.com


This intent message was generated by Chrome Platform Status.

--
Rune Lillesveen

Manuel Rego Casasnovas

unread,
Oct 14, 2022, 3:32:36 AM10/14/22
to Rune Lillesveen, blink-dev, Emilio Cobos Álvarez


On 13/10/2022 16:10, Rune Lillesveen wrote:
> Summary
>
> Support for expressing CSS lengths relative to the line-height


Is this only about "lh"? What about "rlh"?

> /Gecko/: No signal (https://bugzilla.mozilla.org/show_bug.cgi?id=1310170
> <https://bugzilla.mozilla.org/show_bug.cgi?id=1310170>)

Should we ask for official signals at
https://mozilla.github.io/standards-positions/ ? (Adding Emilio in CC
maybe he can share some thoughts).

> /WebKit/: In development (https://bugs.webkit.org/show_bug.cgi?id=195180
> <https://bugs.webkit.org/show_bug.cgi?id=195180>) Implemented behind a flag

WebKit implemented this in 2020 but it hasn't been shipped yet because
of bug: https://bugs.webkit.org/show_bug.cgi?id=211351
Have we asked about plans regarding that?
Is that bug an issue in Blink implementation?

There's also one open issue in the CSSWG:
https://github.com/w3c/csswg-drafts/issues/937
It seems something was agreed long time ago, but nothing was reflected o
the spec. I guess it'd be nice to clarify the status and if that implies
any change on the implementation before shipping.

Cheers,
Rego

Rune Lillesveen

unread,
Oct 14, 2022, 9:16:44 AM10/14/22
to Manuel Rego Casasnovas, blink-dev, Emilio Cobos Álvarez
On Fri, Oct 14, 2022 at 9:32 AM Manuel Rego Casasnovas <re...@igalia.com> wrote:


On 13/10/2022 16:10, Rune Lillesveen wrote:
>         Summary
>
> Support for expressing CSS lengths relative to the line-height

Is this only about "lh"? What about "rlh"?

I intentionally did not do rlh because it needs some changes in CSSToLengthConversionData/FontSizes that would be more natural to do for rex, ric, rch, and rlh combined (none of which are currently supported in Blink).

> /Gecko/: No signal (https://bugzilla.mozilla.org/show_bug.cgi?id=1310170
> <https://bugzilla.mozilla.org/show_bug.cgi?id=1310170>)

Should we ask for official signals at
https://mozilla.github.io/standards-positions/ ? (Adding Emilio in CC
maybe he can share some thoughts).
 
> /WebKit/: In development (https://bugs.webkit.org/show_bug.cgi?id=195180
> <https://bugs.webkit.org/show_bug.cgi?id=195180>) Implemented behind a flag

WebKit implemented this in 2020 but it hasn't been shipped yet because
of bug: https://bugs.webkit.org/show_bug.cgi?id=211351
Have we asked about plans regarding that?

The resolution in https://github.com/w3c/csswg-drafts/issues/3257#issuecomment-1204146452 is that lh units are computed against pre-adjusted line-heights on the element itself, but on descendants it's explicitly undefined. That WebKit issue is most likely a Wontfix. I have commented on the issue.

Is that bug an issue in Blink implementation?

We align with the resolution mentioned above.


There's also one open issue in the CSSWG:
https://github.com/w3c/csswg-drafts/issues/937
It seems something was agreed long time ago, but nothing was reflected o
the spec. I guess it'd be nice to clarify the status and if that implies
any change on the implementation before shipping.

I spoke with Koji about this who said none of the browsers will support line-height-step and an alternative approach is being discussed.

--
Rune Lillesveen

Yoav Weiss

unread,
Oct 17, 2022, 9:20:00 AM10/17/22
to Rune Lillesveen, Una Kravets, blink-dev
On Thu, Oct 13, 2022 at 4:11 PM Rune Lillesveen <fut...@chromium.org> wrote:

Contact emails

fut...@chromium.org

Explainer

None

Specification

https://www.w3.org/TR/css-values-4/#lh

Summary

Support for expressing CSS lengths relative to the line-height


Motivation

There is a wish/need to use the lh unit to size textareas to fit a given number of lines of text. See [1]. [1] https://github.com/w3c/csswg-drafts/issues/7542


Blink component

Blink>CSS


TAG review status

Not applicable

Risks



Interoperability and Compatibility



Gecko: No signal (https://bugzilla.mozilla.org/show_bug.cgi?id=1310170)

WebKit: In development (https://bugs.webkit.org/show_bug.cgi?id=195180) Implemented behind a flag

Can you file for official signals? https://bit.ly/blink-signals

It'd be good to get a sense of this from both Mozilla and Apple. (the behind a flag feature has been in that status for ~2 years)
 

Web developers: No signals

Maybe +Una Kravets can help gather some developer signal here? It'd be good to know folks want to actually use this.
 
--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CACuPfeRke__t9Piz-JRuy0qW_RNNao8CNS32F0XM_%3DcRYj6FYw%40mail.gmail.com.

Rune Lillesveen

unread,
Oct 17, 2022, 9:53:16 AM10/17/22
to Yoav Weiss, Una Kravets, blink-dev
On Mon, Oct 17, 2022 at 3:19 PM Yoav Weiss <yoav...@chromium.org> wrote:


On Thu, Oct 13, 2022 at 4:11 PM Rune Lillesveen <fut...@chromium.org> wrote:

Contact emails

fut...@chromium.org

Explainer

None

Specification

https://www.w3.org/TR/css-values-4/#lh

Summary

Support for expressing CSS lengths relative to the line-height


Motivation

There is a wish/need to use the lh unit to size textareas to fit a given number of lines of text. See [1]. [1] https://github.com/w3c/csswg-drafts/issues/7542


Blink component

Blink>CSS


TAG review status

Not applicable

Risks



Interoperability and Compatibility



Gecko: No signal (https://bugzilla.mozilla.org/show_bug.cgi?id=1310170)

WebKit: In development (https://bugs.webkit.org/show_bug.cgi?id=195180) Implemented behind a flag

Can you file for official signals? https://bit.ly/blink-signals

It'd be good to get a sense of this from both Mozilla and Apple. (the behind a flag feature has been in that status for ~2 years)

Manuel Rego Casasnovas

unread,
Oct 19, 2022, 5:22:11 AM10/19/22
to Rune Lillesveen, Yoav Weiss, Una Kravets, blink-dev
LGTM1

On 17/10/2022 15:52, Rune Lillesveen wrote:
> Asking for both lh and rlh:
>
> https://github.com/WebKit/standards-positions/issues/75
> <https://github.com/WebKit/standards-positions/issues/75>
> https://github.com/mozilla/standards-positions/issues/699
> <https://github.com/mozilla/standards-positions/issues/699>

WebKit has shipped this and Firefox is positive.

Thanks for filling these.

Cheers,
Rego

Yoav Weiss

unread,
Oct 19, 2022, 5:23:57 AM10/19/22
to Manuel Rego Casasnovas, Rune Lillesveen, Una Kravets, blink-dev
LGTM2

Mike Taylor

unread,
Oct 19, 2022, 9:37:32 AM10/19/22
to Yoav Weiss, Manuel Rego Casasnovas, Rune Lillesveen, Una Kravets, blink-dev
LGTM3
--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.

Иван Жеков (joneff)

unread,
Oct 20, 2022, 1:32:21 PM10/20/22
to blink-dev, mike...@chromium.org, Rune Lillesveen, unakr...@google.com, blink-dev, yoav...@chromium.org, Manuel Rego
(I apologise for the off topic)

A front end developer here -- I can assure you, developers want and need this feature. Here are few quick examples:

* alignment: making a an icons, checkboxes (containers) as big as the line height, thus ensuring correct alignment
* height of currently empty containers: instead of relying on ::before with zero width whitespace, we can set correct min height, by using lh. Not to mention that newer versions of some sass preprocessors decode the \ encoded white space...
* square icon buttons: having the line height as a unit can be used in computation
* and obviously, making any box as tall as a line of text, or a couple of lines of text... That helps with implementing design correctly and making skeleton type components a breeze.

Or, if a more concrete example is required: in the web interface of google groups, when I reply / write there are tokens (chips according to Material guidelines). The icon and remove button are perfect candidates for being sized with 1lh -- change the font-size, you change the entire thing. 

Like I said, if you deliver, we front end developers will use it right away!

-- Ivan

Pavel Ivanov

unread,
Nov 2, 2022, 10:47:18 AM11/2/22
to blink-dev, Иван Жеков (joneff), mike...@chromium.org, Rune Lillesveen, unakr...@google.com, blink-dev, yoav...@chromium.org, Manuel Rego
Hey guys!
First of all Great job!!!

Pavel is here ... an ex Mozilla engineer who is from the other side now ...  as normal dev :)
Can't wait to use this feature and I totally agree that the web need it!!!
Reply all
Reply to author
Forward
0 new messages