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-align-3] Fallback alignment groups with orthogonal items. #7775

Closed
bfgeek opened this issue Sep 22, 2022 · 4 comments
Closed

[css-align-3] Fallback alignment groups with orthogonal items. #7775

bfgeek opened this issue Sep 22, 2022 · 4 comments
Labels
Closed Accepted by CSSWG Resolution css-align-3 Current Work i18n-tracker Group bringing to attention of Internationalization, or tracked by i18n but not needing response.

Comments

@bfgeek
Copy link

bfgeek commented Sep 22, 2022

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

<!DOCTYPE html>
<div style="display: flex; flex-direction: column; align-items: baseline; width: 100px; border: solid 3px; direction: ltr;">
  <div style="writing-mode: vertical-rl; background: lime;">line1<br>line2</div>
  <div style="writing-mode: vertical-lr; background: lime;">line1<br>line2</div>
  <div style="background: cyan;">orthog</div>
</div>

Here there are two baseline groups. The VRL item goes into one, and the VLR + HTB items go into another. The HTB item goes into the VLR group due to:
https://drafts.csswg.org/css-align-3/#baseline-export
"Otherwise, assume either horizontal-tb or vertical-lr writing-mode, whichever is orthogonal to the box’s own writing-mode."

The VLR group goes to the left, the VRL group goes to the right.

Now consider:

<!DOCTYPE html>
<div style="display: flex; flex-direction: column; align-items: baseline; width: 100px; border: solid 3px; direction: rtl;">
  <div style="background: cyan;">orthog</div>
</div>

Here all impelementations (currently) place the orthog group on the right. But this should likely be the left.
There are many WPTs asserting this behaviour.

Is the "Otherwise, assume either" correct? Should it be VRL instead? Should it look at the direction to keep a small amount of consistency? (Is my interpretation correct?)
@bfgeek bfgeek added css-align-3 Current Work Agenda+ labels Sep 22, 2022
@fantasai
Copy link
Collaborator

fantasai commented Oct 4, 2022

I think switching between VRL and VLR based on direction makes sense, and would be fine with putting that in the spec.

@bfgeek
Copy link
Author

bfgeek commented Oct 4, 2022

... and the VLR group would stay on the left, and VRL on the right independent of the direction (I assume).

chromium-wpt-export-bot pushed a commit to web-platform-tests/wpt that referenced this issue Oct 5, 2022
@bfgeek @chromium-wpt-export-bot
[last-baseline] Adjust fallback alignment group based on direction.
0482aa0 
This implements the change described in:
w3c/csswg-drafts#7775

TL;DR instead of falling back to VLR - allow falling back to a VRL
writing-mode if the direction is RTL.

The tests changed are primarily flexbox tests which assumed that
no alignment was occuring in the VRL group.

Bug: 885175
Change-Id: I7bec9a2cfdb53c17c724d762ac965808aafb8ad5
Merged
@css-meeting-bot
Copy link
Member

The CSS Working Group just discussed Fallback alignment groups with orthogonal items., and agreed to the following:

  • RESOLVED: Left to left and right to right
The full IRC log of that discussion <dael> Topic: Fallback alignment groups with orthogonal items.
<dael> github: https://github.com//issues/7775
<dael> iank_: basically, when inside a flexbox or grid. Column flexbox and align by baseline need an orthogonal WM. Veritical lr go in one group, vertical lr go in another.
<dael> iakSpec places orthoganal in verital lr. fantasai prop to switch based on direction. if dir rtl go in vrl group
<dael> fantasai: That's the prop
<astearns> s/Veritical lr/Vertical rl/
<dael> iank_: This is an edge case. Need to pick a group. Fine with prop. 5 or 6 WPT to change. vlr always has 20 changes. Tests are inconsistent here
<dael> fantasai: Switching based on direction makes logical sense. Somewhat symmetric.
<dael> astearns: Prop: left to left and right to right?
<dael> iank_: Left groups always on left and right groups always on right
<dael> astearns: Concerns?
<dael> astearns: Obj?
<dael> RESOLVED: Left to left and right to right
<dael> astearns: iank_ are you updating tests?
<dael> iank_: Yes, I have a patch in the issue

@mozilla-apprentice mozilla-apprentice mentioned this issue Oct 6, 2022
Closed
aarongable pushed a commit to chromium/chromium that referenced this issue Oct 6, 2022
@bfgeek
[last-baseline] Adjust fallback alignment group based on direction.
8b7f67d 
This implements the change described in:
w3c/csswg-drafts#7775

TL;DR instead of falling back to VLR - allow falling back to a VRL
writing-mode if the direction is RTL.

The tests changed are primarily flexbox tests which assumed that
no alignment was occuring in the VRL group.

Bug: 885175
Change-Id: I7bec9a2cfdb53c17c724d762ac965808aafb8ad5
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3927944
Commit-Queue: Ian Kilpatrick <[email protected]>
Reviewed-by: David Grogan <[email protected]>
Cr-Commit-Position: refs/heads/main@{#1055573}
chromium-wpt-export-bot pushed a commit to web-platform-tests/wpt that referenced this issue Oct 6, 2022
@bfgeek @chromium-wpt-export-bot
[last-baseline] Adjust fallback alignment group based on direction.
99809f8 
This implements the change described in:
w3c/csswg-drafts#7775

TL;DR instead of falling back to VLR - allow falling back to a VRL
writing-mode if the direction is RTL.

The tests changed are primarily flexbox tests which assumed that
no alignment was occuring in the VRL group.

Bug: 885175
Change-Id: I7bec9a2cfdb53c17c724d762ac965808aafb8ad5
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3927944
Commit-Queue: Ian Kilpatrick <[email protected]>
Reviewed-by: David Grogan <[email protected]>
Cr-Commit-Position: refs/heads/main@{#1055573}
chromium-wpt-export-bot pushed a commit to web-platform-tests/wpt that referenced this issue Oct 6, 2022
@bfgeek @chromium-wpt-export-bot
[last-baseline] Adjust fallback alignment group based on direction.
c7c8933 
This implements the change described in:
w3c/csswg-drafts#7775

TL;DR instead of falling back to VLR - allow falling back to a VRL
writing-mode if the direction is RTL.

The tests changed are primarily flexbox tests which assumed that
no alignment was occuring in the VRL group.

Bug: 885175
Change-Id: I7bec9a2cfdb53c17c724d762ac965808aafb8ad5
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3927944
Commit-Queue: Ian Kilpatrick <[email protected]>
Reviewed-by: David Grogan <[email protected]>
Cr-Commit-Position: refs/heads/main@{#1055573}
moz-v2v-gh pushed a commit to mozilla/gecko-dev that referenced this issue Oct 21, 2022
@bfgeek @moz-wptsync-bot
Bug 1793843 [wpt PR 36296] - [last-baseline] Adjust fallback alignmen…
4c8f449 
…t group based on direction., a=testonly

Automatic update from web-platform-tests
[last-baseline] Adjust fallback alignment group based on direction.

This implements the change described in:
w3c/csswg-drafts#7775

TL;DR instead of falling back to VLR - allow falling back to a VRL
writing-mode if the direction is RTL.

The tests changed are primarily flexbox tests which assumed that
no alignment was occuring in the VRL group.

Bug: 885175
Change-Id: I7bec9a2cfdb53c17c724d762ac965808aafb8ad5
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3927944
Commit-Queue: Ian Kilpatrick <[email protected]>
Reviewed-by: David Grogan <[email protected]>
Cr-Commit-Position: refs/heads/main@{#1055573}

--

wpt-commits: c7c89332d238e36946e6ea5dce1d5441a5100e18
wpt-pr: 36296
jamienicol pushed a commit to jamienicol/gecko that referenced this issue Oct 26, 2022
@bfgeek @moz-wptsync-bot
Bug 1793843 [wpt PR 36296] - [last-baseline] Adjust fallback alignmen…
5ce3030 
…t group based on direction., a=testonly

Automatic update from web-platform-tests
[last-baseline] Adjust fallback alignment group based on direction.

This implements the change described in:
w3c/csswg-drafts#7775

TL;DR instead of falling back to VLR - allow falling back to a VRL
writing-mode if the direction is RTL.

The tests changed are primarily flexbox tests which assumed that
no alignment was occuring in the VRL group.

Bug: 885175
Change-Id: I7bec9a2cfdb53c17c724d762ac965808aafb8ad5
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3927944
Commit-Queue: Ian Kilpatrick <[email protected]>
Reviewed-by: David Grogan <[email protected]>
Cr-Commit-Position: refs/heads/main@{#1055573}

--

wpt-commits: c7c89332d238e36946e6ea5dce1d5441a5100e18
wpt-pr: 36296
@fantasai fantasai added the i18n-tracker Group bringing to attention of Internationalization, or tracked by i18n but not needing response. label Jan 20, 2023
fantasai added a commit to fantasai/csswg-drafts that referenced this issue Jan 20, 2023
@fantasai
[css-align-3] When assuming orthogonal writing mode for baseline alig…
a7f6699 
…nment, choose based on 'direction'. w3c#7775
@fantasai
Copy link
Collaborator

fantasai commented Jan 20, 2023 •
edited
Loading

OK, I made a pull request for this: #8342

I noticed the following comment in the source code, however:

<!-- This pairing is chosen because the most likely case for this situation is CJK. -->

which might be worth taking into consideration. CC @xfq

@w3cbot w3cbot mentioned this issue Jan 23, 2023
Closed
fantasai added a commit to fantasai/csswg-drafts that referenced this issue Mar 3, 2023
@fantasai
[css-align-3] When assuming orthogonal writing mode for baseline alig…
a3aea5e 
…nment, choose based on 'direction'. w3c#7775
fantasai added a commit to fantasai/csswg-drafts that referenced this issue Mar 3, 2023
@fantasai
[css-align-3] When assuming orthogonal writing mode for baseline alig…
994c770 
…nment, choose based on 'direction'. w3c#7775
fantasai added a commit that referenced this issue Apr 6, 2023
@fantasai
[css-align-3] When assuming orthogonal writing mode for baseline alig…
70a91bd 
…nment, choose based on 'direction'. #7775
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 css-align-3 Current Work i18n-tracker Group bringing to attention of Internationalization, or tracked by i18n but not needing response.
Projects
None yet
Milestone
No milestone
Development

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