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] justify-items and anonymous block boxes #11461

Open
Loirooriol opened this issue Jan 8, 2025 · 4 comments
Open

[css-align] justify-items and anonymous block boxes #11461

Loirooriol opened this issue Jan 8, 2025 · 4 comments
Labels
Agenda+ css-align-3 Current Work

Comments

@Loirooriol
Copy link
Contributor

Loirooriol commented Jan 8, 2025 •
edited
Loading 

<!DOCTYPE html>
<div style="width: 200px; justify-items: right; border: solid">
  foo
</div>
<div style="width: 200px; justify-items: right; border: solid">
  foo
  <div></div>
</div>

In Blink it looks like this:

In the 1st case, there is no block-level child to align. In the 2nd case, "foo" gets wrapped inside an anonymous block, which is then aligned by justify-items: right.

But it seems potentially unexpected that appending a block affects the alignment of the inline contents.

Maybe anonymous blocks should get assigned justify-self: startjustify-self: stretch (or normal)?
@gitspeaks
Copy link

gitspeaks commented Jan 9, 2025 •
edited
Loading

Maybe anonymous blocks should get assigned justify-self: start?

But how would you allow aligning 'anonymous blocks' to the end if that's the desired behavior?
If the goal is to align only the 'anonymous blocks' to the end, what other option would you have besides setting justify-items: right on the parent, keeping the current Blink behavior, and explicitly setting justify-self: left on each child div?

@Loirooriol
Copy link
Contributor Author

But how would you allow aligning 'anonymous blocks' to the end if that's the desired behavior?

There is of course a trade-off, we need to think which option will be less confusing.
But the authors could just wrap the inline contents with a <div> rather than relying on an anonymous block, then the element-generated block would obey the justify-items of the parent.

@gitspeaks
Copy link

gitspeaks commented Jan 9, 2025 •
edited
Loading

But the authors could just wrap the inline contents with a <div> rather than relying on an anonymous block, then the element-generated block would obey the justify-items of the parent.

That's beside the point since we're no longer dealing with anonymous block boxes in that case. I think keeping the justify-items behavior consistent for both anonymous and non-anonymous block boxes makes it simpler to reason about. That said, I recommend adding a note in the spec for justify-items as a helpful reminder of the existence of 'anonymous block boxes' and their conforming behavior, aligning with other block boxes.

@Loirooriol
Copy link
Contributor Author

I don't think most authors know about anonymous block boxes, and we typically pretend that they aren't there (see percentage resolution, #2595, etc.)

So I think we should either

  • set justify-self: normal/stretch on anonymous blocks so that they ignore justify-items of the parent, or
  • wrap the inline-level contents of a block container inside an anonymous block even if there is no block-level content, at least when justify-items computes to something different than normal/stretch or lone legacy.

@astearns astearns moved this to FTF agenda items in CSSWG January 2025 meeting Jan 22, 2025
@astearns astearns moved this from FTF agenda items to Regular agenda items in CSSWG January 2025 meeting Jan 22, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Agenda+ css-align-3 Current Work
Projects
CSSWG January 2025 meeting
Status: Regular agenda items
Milestone
No milestone
Development

No branches or pull requests
2 participants
@Loirooriol @gitspeaks