Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[css-flexbox-1] Flex container baselines with reverse direction. #7776

Open
bfgeek opened this issue Sep 22, 2022 · 5 comments
Open

[css-flexbox-1] Flex container baselines with reverse direction. #7776

bfgeek opened this issue Sep 22, 2022 · 5 comments
Labels
Closed Accepted by CSSWG Resolution Commenter Response Pending css-flexbox-1 Current Work

Comments

@bfgeek
Copy link

bfgeek commented Sep 22, 2022

Consider: https://www.software.hixie.ch/utilities/js/live-dom-viewer/?saved=10775

<!DOCTYPE html>
baseline
<div style="border: solid 3px; display: inline-flex; flex-direction: row-reverse;">
  <div style="background: lime;">a</div>
  <div style="background: hotpink; font-size: 30px;">b</div>
</div>

Here all implementions pick up the "a" baseline (logically last), instead of the "b".

Similar for column flexboxes:
https://www.software.hixie.ch/utilities/js/live-dom-viewer/?saved=10776

Following this logic for "last baseline" would mean the last baseline is at the top. (Note Firefox doesn't appear to support this case - unsure what its doing).

Are implementations correct?
I believe implementations are incorrect per-spec - from: https://drafts.csswg.org/css-flexbox-1/#flex-baselines
"To this end, the baselines of a flex container are determined as follows (after reordering with order, and taking flex-direction into account):"

But should be explicit. Note there are several WPTs asserting this behaviour.
@dholbert
Copy link
Member

dholbert commented Sep 28, 2022 •
edited
Loading

Yeah, the spec says (for this fallback "no baseline-aligned flex items" case:

the flex container’s first/last cross-axis baseline set is generated from the alignment baseline of the startmost/endmost flex item

I presume that's writing-mode-relative startmost/endmost, rather than flex-start-most etc. Would be good to make that explicit with a parenthetical, perhaps (e.g. (i.e. the item closest to the start side) I'm not sure "startmost flex item" is super well-defined in this context. (It's also worth considering the fact that some flex items might e.g. have relative positioning that technically makes them "startmost" in terms of their actual position, even though their DOM order is somewhere in the middle. Presumably we don't want to consider relative positioning when determining which item is "startmost".)

This startmost/endmost language is new to me, I think; the spec used to say "...the first/last flex item" instead, but that changed here as a fix for #995. Looks like all implementations approximately match the old spec text; maybe we all just missed the spec edit? :)

I don't have strong feelings on what's best here; it's a relatively trivial change if we do decide to change (assuming webcompat allows it)

@dholbert dholbert mentioned this issue Sep 28, 2022
Open
@dholbert
Copy link
Member

Note there are several WPTs asserting this behaviour.

Without knowing which WPTs in particular you're talking about, I would bet that they were written before the current spec text was added (this is the case at least for the WPTs that you listed in the other similar issue).

So: they were correct-at-the-time, and just need to be updated to reflect the current spec, if indeed we want to keep the current spec.

@bfgeek
Copy link
Author

bfgeek commented Sep 28, 2022

The only reason not to keep the current spec is that the following case is the predominant usecase for flex-direction: column-reverse:
https://www.software.hixie.ch/utilities/js/live-dom-viewer/?saved=10819

<!DOCTYPE html>
<div style="display: flex; flex-direction: column-reverse; overflow-y: scroll; width: 100px; height: 100px; border: solid 3px; padding: 10px; gap: 10px">
  <div style="font-size: 80px; background: lime;">1</div>
  <div style="font-size: 80px; background: lime;">2</div>
</div>

If we keep the spec as is the first baseline will be the border-box block-start edge, last baseline will be the "1".
(This is likely fine, just want to mention the (only) downside).

@css-meeting-bot
Copy link
Member

The CSS Working Group just discussed Container baselines with reverse directions, and agreed to the following:

  • RESOLVED: flex baselines take flex ordering into account so first/last use roughly *physical* directions
The full IRC log of that discussion <fantasai> Topic: Container baselines with reverse directions
<Rossen_> github: https://github.com//issues/7776
<jcraig> s/????: I do agree /BGaraventa: I do agree /
<jcraig> s/bryang/BGaraventa/
<orieo1> 💨Don’t miss this chance to be Rich... (full message at <https://matrix.org/_matrix/media/r0/download/matrix.org/psopYbVXgoniRhIHyGzDqZuD>)
<TabAtkins> ScribeNick: TabAtkins
<TabAtkins> iank_: at TPAC we did a bunch of baseline stuff
<TabAtkins> iank_: Today, if we have flex-direction:*-reverse, we will take the first baseline from the first in DOM order, the "logical" first
<TabAtkins> iank_: this is interoperable across all browsers
<TabAtkins> iank_: The spec doesn't say this, I believe it says to take flex-direction into account, which means browsers are all wrong today
<TabAtkins> iank_: We're willing to make this change, I don't have strong opinions
<jcraig> rrsagent, make minutes
<RRSAgent> I have made the request to generate https://www.w3.org/2022/09/28-css-minutes.html jcraig
<Rossen_> q?
<TabAtkins> fantasai: I think the spec change makes sense, if you ask for last-baseline you want the baseline at the bottom, not the top
<TabAtkins> fantasai: So I think that makes the most sense
<TabAtkins> iank_: It'll likely be compatible
<TabAtkins> iank_: One possible case is people doing column-reverse and having overflow propogate things upwards, so the "first" thing will be way up in the overflow area and get clamped to the block-start edge
<TabAtkins> fantasai: They're probably not asking for baseline alignment in these cases, so probably fine?
<TabAtkins> iank_: Yup, just a subtle side effect, I'm fine with it
<TabAtkins> I'm fine with this.
<TabAtkins> RESOLVED: flex baselines take flex ordering into account so first/last use roughly *physical* directions

@mozilla-apprentice mozilla-apprentice mentioned this issue Sep 28, 2022
Closed
fantasai added a commit that referenced this issue Oct 3, 2022
@fantasai
[css-flexbox-1][editorial] Link to writing modes' concept of startmos…
e78c979 
…t/endmost. #7774 #7776
@fantasai
Copy link
Collaborator

fantasai commented Oct 3, 2022

Cross-linked to startmost/endmost to the concepts in Writing Modes. @bfgeek let us know if you think the text needs additional clarification.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Closed Accepted by CSSWG Resolution Commenter Response Pending css-flexbox-1 Current Work
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@dholbert @fantasai @bfgeek @css-meeting-bot