Repository navigation
[css-align-3][css-flexbox-1] How to determine the last baseline of a flex container with different alignment groups. #7641
Description
See: https://www.software.hixie.ch/utilities/js/live-dom-viewer/?saved=10608
<!DOCTYPE html>
<div style="display: inline-flex; align-items: last baseline;">
<div style="background: lime; font-size: 30px;">line1<br>line2</div>
<div style="display: flex;">
<div style="font-size: 30px; align-self: last baseline; background: cyan;">line1<br>line2<br>line3</div>
<div style="font-size: 80px; align-self: baseline; background: hotpink;">line1<br>line2</div>
</div>
</div>https://drafts.csswg.org/css-flexbox-1/#flex-baselines
Should the last baseline of the "lime" box be aligned with the last-baseline of the "cyan" box, or the "hotpink" box?
The rules just look at if something "participates in baseline alignment" so by that rule it should be the "hotpink" box.
But likely should be the "cyan" box.
Activity
tabatkins commentedon Aug 23, 2022
Yeah, I think this is just a bit of behavior that slipped thru the edits when we upgraded from "baseline" to "first/last baseline". I suspect we should prefer taking from the last-baseline element when determining the inner flexbox's last baseline, and mutatis mutandis for the first.
This does mean that the last baseline can potentially be higher than the first baseline, tho (say, both items are single-line, and the last-baseline one has a smaller font-size). Is that ok?
bfgeek commentedon Aug 23, 2022
I think its ok - but reserve the right to complain later if it isn't. :)
tabatkins commentedon Aug 24, 2022
Okay, so suggested edits are to modify Step 1 of https://drafts.csswg.org/css-flexbox-1/#flex-baselines to first look at items with the same baseline alignment preference as the requested baseline, falling back to any baseline-aligned item if there aren't any matching.
bfgeek commentedon Aug 24, 2022
I think I have a slight preference for look at items which match the baseline alignment preference - then fallback to any item.
Otherwise we have three(!) levels of fallback - e.g.
vs.
The two stage fallback would be web compatible with what we have today.
fantasai commentedon Aug 29, 2022
@bfgeek Supposing we want to last-baseline align a table or grid, and it has first-baseline aligned content in its last row... I can see the argument going either way wrt falling back three levels or two. Consider the case of having what are, essentially, one-line items first-baseline aligned to each other but the first item is a replaced element; wouldn't we rather take the real baseline than the synthesized one from the replaced item?
bfgeek commentedon Aug 29, 2022
For this case it wouldn't really matter though as currently spec'd we'd take the last-baseline from the last item?
bfgeek commentedon Aug 29, 2022
The general problem that I think you are hinting at already exists without replaced elements, e.g.
(FF rendering is badly wrong here) but here "baseline" "line1" "baseline" would all be aligned.
fantasai commentedon Aug 29, 2022
While it's clear we didn't think through the case of having both first- and last-baseline-aligned items in the flex line, IIRC it was pretty intentional that if only one of them existed we took that shared baseline.
i.e. in
The fact that we wrote “participate in baseline alignment” and not “participate in first/last baseline alignment” was, insofar as I can remember, intentional.
This implies that, for consistency, the mixed case should be resolved with 3-way fallback (desired baseline alignment, any baseline alignment, then just grab the baselines from an arbitrary non-aligned element).
tabatkins commentedon Aug 29, 2022
(Not to say we can't dispute that and go with something simpler; this was just the intention when we wrote it originally.)
bfgeek commentedon Aug 30, 2022
This is an advantage of how the its specified in tables - in that you end up picking the lowest vs. the "first/last" item (look at all items - pick the lowest baseline).
3 remaining items
bfgeek commentedon Oct 26, 2022
I believe we take the "highest" one - at least I remember we had a conversation about the "overflow:scroll;flex-direction:column-reverse;" case and thought the clamping to the top in that case was likely acceptable.
E.g. view https://www.software.hixie.ch/utilities/js/live-dom-viewer/?saved=10927 on chrome canary.
(This is also what I added as tests relatively soon after this discussion).
Ian
[css-align-3][css-flexbox-1][css-grid-1] Improve container baseline f…
fantasai commentedon Jan 20, 2023
@tabatkins and I have drawn up a PR for this at #8341
We'd like to get confirmation from the WG on a few points, and also wanted to ask @bfgeek for review. :)
[css-align-3][css-flexbox-1][css-grid-1] Improve container baseline f…
css-meeting-bot commentedon Mar 13, 2023
The CSS Working Group just discussed
[css-align-3][css-flexbox-1] How to determine the last baseline of a flex container with different alignment groups..The full IRC log of that discussion
<TabAtkins> Rossen_: Should we consdier this issue resolved by the PR discussion?<TabAtkins> fantasai: yeah
<TabAtkins> iank_: clarification - are we still taking the first baseline from the topmost row and bottommost row?
<TabAtkins> fantasai: yeah?
<TabAtkins> iank_: One subtlety with last issue around reverse flex
<TabAtkins> iank_: what would be the beahvior with a reverse flex?
<iank_> https://www.software.hixie.ch/utilities/js/live-dom-viewer/?saved=11393
<TabAtkins> fantasai: Not sure, let me see if the spec handles that right now, if not we should resolve to handle it
<TabAtkins> iank_: I think I have relatively strong beahvior on this, I think our new behavior makes sense
<TabAtkins> fantasai: We took the startmost or endmost flex line
<TabAtkins> iank_: So first baseline from the visual top (basically) and last from visual bottom?
<TabAtkins> fantasai: yes
<TabAtkins> iank_: can you check chrome's beahvior in the testcase I just posted?
<TabAtkins> [people look at the example]
<TabAtkins> fantasai: Yeah this looks right
<TabAtkins> fantasai: altho... did we define alignmetn across multiline items?
<TabAtkins> [more clarification of the example]
<TabAtkins> iank_: I think in [missed case] we'll still do visual bottom/top
<iank_> https://www.software.hixie.ch/utilities/js/live-dom-viewer/?saved=11396
<TabAtkins> fantasai: If you wrap the columns, are you doing baseline alignment across the topmost items in each line? Because we could...
<TabAtkins> Rossen_: Let's open an issue for these additional wrinkles
[css-align-3][css-flexbox-1][css-grid-1] Improve container baseline f…
[css-align-3][css-flexbox-1][css-grid-1] Improve container baseline f…
[css-align-3][css-flexbox-1][css-grid-1] Improve container baseline f…
[css-align-3][css-flexbox-1][css-grid-1] Improve container baseline f…