Intent to Prototype: Last Baseline Item Alignment

137 views
Skip to first unread message

Ian Kilpatrick

unread,
Sep 14, 2022, 2:11:12 PM9/14/22
to blink-dev

Contact emails

ikilp...@chromium.org

Explainer

None

Specification

https://drafts.csswg.org/css-align-3/#baseline-rules

Summary

This feature allows developers to align items within either flex or grid layout by their last baseline, instead of their first. This is done via the following properties: align-items: last baseline; /* flex/grid container */ justify-items: last baseline; /* grid container */ align-self: last baseline; /* flex/grid item */ justify-self: last baseline; /* grid item */



Blink component

Blink>Layout

Motivation

Currently in Blink we only support aligning grid/flex-items via. their first baseline. This feature allows web developers to align these items by their last baseline.

We previously supported *parsing* of these values, however disabled due to lack of layout support. See:

This intent does not cover the "align-content: last baseline" feature.

Initial public proposal



TAG review



TAG review status

Not applicable

Risks



Interoperability and Compatibility



Gecko: Shipping (https://developer.mozilla.org/en-US/docs/Web/CSS/align-items)

WebKit: Supports parsing of the property value - but doesn't currently support these in layout.

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?

No.



Debuggability

This will show up as a valid value for these properties. A potential devtools feature would be to display where these baselines appear for each fragment.

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

No. There are some WPT tests however they are incomplete (e.g. lack detailed testing). We'll add additional tests in the css-grid/css-flexbox directories as we implement.
There are multiple outstanding spec issues which we'll work through while implementing this feature. E.g.
https://github.com/w3c/csswg-drafts/issues/7639

Flag name

Likely --enable-blink-features=CSSLastBaseline will be available under --experimental-web-platform-features

Requires code in //chrome?

False

Tracking bug

https://bugs.chromium.org/p/chromium/issues/detail?id=885175

Estimated milestones

Likely M108


Link to entry on the Chrome Platform Status

https://chromestatus.com/feature/5093352798683136

This intent message was generated by Chrome Platform Status.
Reply all
Reply to author
Forward
0 new messages