← Back to release summary

CSS 'lh' Length Unit

Category
CSS
Type
Chromium catches up
Status
Enabled by default (Chrome 109)
Intent stage
Shipped

WPT details: 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

Summary

The 'lh' unit adds support for expressing CSS lengths relative to the line-height. That is typically useful for specifying the height of an element to fit a whole number of lines. Example: textarea { height: 5lh }

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

Standards & signals

Ecosystem

View on chromestatus.com