Intent to Ship: CSS 'lh' Length Unit

[Rune Lillesveen]

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 desktop

108

DevTrial on Android

108

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]

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]

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.

Adding a test here: https://chromium-review.googlesource.com/c/chromium/src/+/3955838

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]

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]

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)

Asking for both lh and rlh:

https://github.com/WebKit/standards-positions/issues/75

https://github.com/mozilla/standards-positions/issues/699

--

Rune Lillesveen

[Manuel Rego Casasnovas]

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]

LGTM2

[Mike Taylor]

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.

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAL5BFfUwb34ig5ewG488f88sjYjfN1OUp0z%3DeX3TUjf5RkuZBg%40mail.gmail.com.

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

(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]

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!!!