← Back to release summary

baseline-source

Category
CSS
Type
Chromium catches up
Status
Enabled by default (Chrome 111)
Intent stage
Start prototyping

Summary

The "baseline-source" properties allows web developers to specify if an inline-level box should use the "first" or "last" baseline for alignment within an linebox. Today the default behaviour is confusing for web developers. Consider: test <div style="display: inline-block;">line1<br>line2</div> test <div style="display: inline-flex;">line1<br>line2</div> The "inline-block" will align to the last baseline, and the "inline-flex" will align to the first baseline. "baseline-source: auto" is the existing (confusing) behaviour. Web developers can specify "baseline-source: first" or "baseline-source: last" to directly determine how they want these boxes to align within a line-box.

Motivation

The "baseline-source" properties allows web developers to specify if an inline-level box should use the "first" or "last" baseline for alignment within an linebox. Today the default behaviour is confusing for web developers. Consider: test <div style="display: inline-block;">line1<br>line2</div> test <div style="display: inline-flex;">line1<br>line2</div> The "inline-block" will align to the last baseline, and the "inline-flex" will align to the first baseline. "baseline-source: auto" is the existing (confusing) behaviour. Web developers can specify "baseline-source: first" or "baseline-source: last" to directly determine how they want these boxes to align within a line-box.

Standards & signals

View on chromestatus.com