baseline-source

[bfgeek]

Wotcher TAG!

I'm requesting a TAG review of the baseline-source CSS property.

The baseline-source property allows web developers to specify if an inline-level box should use the first or last baseline for alignment within an line-box.

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.

See demo here: https://twitter.com/bfgeek/status/1612518098611089408

• Explainer¹ (minimally containing user needs and example code): [url] See above
• Specification URL: [spec url]
• Tests: [wpt folder(s), if available]
• User research: [url to public summary/results of research]
• Security and Privacy self-review²: [url]
• GitHub repo (if you prefer feedback filed there): [url]
• Primary contacts (and their relationship to the specification):
  • @bfgeek (Implemetor) , @fantasai (Spec Editor)
• Organization(s)/project(s) driving the specification: Google
• Key pieces of existing multi-stakeholder review or discussion of this specification:
• External status/issue trackers for this specification (publicly visible, e.g. Chrome Status): https://chromestatus.com/feature/5730575560736768

Further details:

• I have reviewed the TAG's Web Platform Design Principles
• Relevant time constraints or deadlines: Implementation complete.
• The group where the work on this specification is currently being done: CSSWG
• The group where standardization of this work is intended to be done (if current group is a community group or other incubation venue): CSSWG
• Major unresolved issues with or opposition to this specification: No major issues.
• This work is being funded by: Blink implementation is being done by Google.

💬 leave review feedback as a comment in this issue and @-notify [github usernames]

[fantasai]

TAG review of this feature should be in conjunction with the other features that inter-relate, i.e. all the longhands of vertical-align and the dominant-baseline property. I don't think an isolated review of baseline-source by itself would really have much utility or interest from an architectural perspective otherwise.

[LeaVerou]

We looked at this today in a breakout. We don't think there are any architectural issues with it and we're fine with it moving forwards. We wondered if the property needs more values than first and last, or whether all these baseline properties need a shorthand tying them together and providing shortcuts for common cases, but these are also things that can be added later.

Thank you for flying TAG!

[fantasai]

There is a shorthand, it's called vertical-align. I pointed this out in the comment earlier.