Repository navigation
[css-grid-1] Spec doesn't seem to discuss baseline-alignment + auto-margins. #5923
Description
Implementations disable baseline alignment for an item (and are lowered in precedence for baseline propagation) if it has auto margins on either side in the relevant axis: e.g.
https://www.software.hixie.ch/utilities/js/live-dom-viewer/?saved=8886
However we couldn't find this in the spec. E.g.
https://drafts.csswg.org/css-grid-1/#auto-margins only discusses general alignment etc. not normative.
https://drafts.csswg.org/css-align-3/#baseline-alignment doesn't seem to mention it.
https://drafts.csswg.org/css-grid-1/#grid-baselines
It might be implied(? - unsure) but at least a note discussing this interaction would be good.
Activity
Loirooriol commentedon Feb 3, 2021
has baseline alignment in Firefox but not in Chromium.
bfgeek commentedon Feb 3, 2021
This behaviour seems potentially like a bug in FF - e.g. https://www.software.hixie.ch/utilities/js/live-dom-viewer/?saved=8887 leaves some space above the first item when there shouldn't be any.
Loirooriol commentedon Feb 4, 2021
CC @MatsPalmgren
[css-grid-1] Make auto margin prose fully normative. #5923
[css-grid-2] Sync auto margins changes from css-grid-1. #5923
[css-grid-1] Overflowing margin-aligned items should safe-align, just…
[css-align-3] Clarify when auto margins cause or interfere with coord…
tabatkins commentedon Jun 16, 2021
@bfgeek
You're right that this was unspecified - quite a bit of margin interactions were, as we found out while digging into this! We committed the following fixes:
That final proposed fix (c78e58b) specifies that auto margins only disable baseline content-alignment if they conflict with its baseline preference, identically to how self-alignment was already specified to work. (I.e. start-aligning a box, whether with margins or alignment properties, is compatible with first-baseline alignment; and end-aligning the box is compatible with last-baseline alignment.)
This doesn't quite match current implementations, but we think it makes the most sense, since auto margins and self-alignment are, in practice, identical for authors. However, we're okay with just fully disabling baseline content-alignment in the presence of auto margins if necessary. What do people think? (Agenda+ to ask more broadly.)
javifernandez commentedon Jun 23, 2021
Hi, sorry for the late reply. I'm not sure I understand what's the final proposal for this issue, since there are a lot of changes in the spec and not all of them are related to auto-margin alignment. In the last comment from @tabatkins it was mentioned:
In the last draft (16ed028) it's stated clearly that the use of auto-margins in on axis disables the the self-alignment properties in such axis. Hence, it's clear that such item can't participate in baseline alignment, since it's align-self/justify-self values must be ignored. I think it's a bit confusing or redundant that in c78e58b we use auto-margins as a limit for the grid item's participation in baseline (the root cause is that aligng-self/justify-self are ignored) and even there seems to be scenarios (if I've understood it correctly) where even with auto-margins the grid item may participate in baseline alignment (it's impossible since align-self/justify-seld must be ignored).
I've always assumed that the use of auto-margins in one axis would imply ignoring at all the value of the self-alignment properties operating on such axis. In the last published spec this was specified as:
https://www.w3.org/TR/css-grid-1/#auto-margins
That's what motivated the initial implementation of the Alignment logic in both, Chrome and Safari.
javifernandez commentedon Jun 23, 2021
Now that I read it again, the spec states "disabling the effects", not "disabling the properties"; given this subtle difference, I guess it makes sense to clarify explicitly in the Self Baseline Alignment section that items with auto-margins won't participate in baseline-alignment, despite either justify-self or align-self may have 'baseline' as value.
My only doubt so far is whether these changes introduce any behavior change regarding how auto-margins affects to the Self Alignment features. My understanding is that there is no effect of these properties, independently of their value (including baseline), when items use 'auto' margins.
css-meeting-bot commentedon Jun 23, 2021
The CSS Working Group just discussed
baseline-alignment and auto margins, and agreed to the following:RESOLVED: alignment via auto margins disables content baseline-alignment the same way as align-self values with the same effectThe full IRC log of that discussion
<fantasai> Topic: baseline-alignment and auto margins<fantasai> github: https://github.com//issues/5923
<emeyer> fantasai: The interaction isn’t well defined. We found there’s a lot missing about grid and auto margins. We made a non-normative section normative. We brought some alignment into harmony with flexbox.
<emeyer> fantasai: When you have content baseline alignment across multiple items, and you’re trying to add padding, the ‘align-self’ property can move the box.
<emeyer> fantasai: If boxes are moved, baseline alignment gets weird. We have some working in alignment that says you have to have a coordinating alignment, start or end.
<emeyer> fantasai: We didn’t account for how auto margins can move boxes.
<emeyer> fantasai: Option 1, we require a coordinated alignment effect. If the auto margin cause the box to be centered, baseline alignment is diabled.
<emeyer> fantasai: Option 2, any auto margins diable baseline alignment.
<emeyer> fantasai: We went with option 1 but are open to other options.
<fantasai> iank_: We don't implement content baseline alignment yet
<fantasai> iank_: but I think it sounds fine
<fantasai> iank_: for self-alignment though, any auto margins don't participate in baseline alignment, right?
<emeyer> fantasai: If that’s what’s implemented, the spec should say so.
<fantasai> iank_: If we have align-self: baseline and any auto margin, we ignore that align-self
<fantasai> fantasai: Right, they're both trying to align the box, so have to pick one
<fantasai> iank_: but for content alignment, this seems fine
<fantasai> iank_: One thing I might need to check is, if they participate in the propagation of a baseline
<fantasai> iank_: but that might be a separate issue...
<fantasai> [discussion of javier's comments, possible mixing up self- vs content-alignment causing confusion]
<dholbert> which option are we proposing?
<dholbert> (1 vs 2)
<fantasai> I think we're proposing 1, unless anyone has a problem with 2
<dholbert> (I'm fine with either, I think)
<fantasai> s/with 2/with it
<fantasai> Rossen: Anyone else with an opinion?
<fantasai> proposed: alignment via auto margins disables content baseline-alignment the same way as align-self values with the same effect
<fantasai> RESOLVED: alignment via auto margins disables content baseline-alignment the same way as align-self values with the same effect
<fantasai> Rossen: if Javier or Tab has concerns, can come back to it later
<emeyer> [search for a topic that can be covered in ~3 minutes]
fantasai commentedon Jun 29, 2021
@javifernandez I think you're mixing up self-alignment and content-alignment. Self-alignment is definitely disabled in the presence of auto margins, but our question was about baseline content-alignment.
javifernandez commentedon Jun 30, 2021
Yeah, I've read the log of the CSS WG meeting Sorry about the confusion. I'm satisfied with the resolution.