[css-rhythm-1] Define interaction of block-step-align and align-content

[fantasai]

The 'block-step-align' property currently interacts with align-self when it is auto, but otherwise defaults to center; and block-step-align allows overriding the alignment. But it doesn't define any interaction with align-content.

Probably for padding-box and content-box values of block-step-insert, we should at least default to following align-content; and perhaps even allow a non-normal value of align-content to override an explicit block-step-align; it seems weird to insert extra space contrary to the specified content alignment.

[css-meeting-bot]

The CSS Working Group just discussed [css-rhythm-1] Define interaction of block-step-align and align-content, and agreed to the following:

• RESOLVED: if block-step-insert is padding-box or content-box, block-step-align:auto defaults to following align-content when it's not normal
• RESOLVED: non-normal values of align-content/self win over block-step-align (depending on whether block-step-insert is putting the space inside or outside the element)

The full IRC log of that discussion

<TabAtkins> fantasai: block-step-align's initial value is "auto", which looks at align-self when you're inserting margins to adjust the step
<TabAtkins> fantasai: that makes sense
<TabAtkins> fantasai: but when you're inserting inside the box (padding or content) we don't look at the alignment properties
<TabAtkins> fantasai: but it probably makes sense to lookk at the align content property
<TabAtkins> fantasai: and might even want to let it win over block-step-align
<fantasai> TabAtkins: So if we're doing block-step by inserting into padding/content, we defer to align-content as long as it's no-normal
<fantasai> TabAtkins: seems plausible
<fantasai> TabAtkins: makes align-content have an effect where doesn't currently, like blocks
<fantasai> fantasai: it does affect blocks
<TabAtkins> fantasai: so proposed resoliution is if block-step-insert is padding-box or content-box, block-step-align:auto defaults to following align-content when it's not normal
<TabAtkins> astearns: what happens when it is normal?
<TabAtkins> fantasai: separate resolution
<TabAtkins> iank_: remind me how this works?
<TabAtkins> iank_: non-normal align-content estalbishes an IFC
<TabAtkins> iank_: that's okay for this?
<TabAtkins> fantasai: I think it's okay. doesn't make the feature more complicated
<dbaron> s/an IFC/an independent formatting context/
<TabAtkins> astearns: so we ahve the first proposed resolution
<bkardell> s/ahve/have
<dbaron> (IFC could also mean "inline formatting context", but Ian said "independent")
<TabAtkins> astearns: objections?
<TabAtkins> RESOLVED: if block-step-insert is padding-box or content-box, block-step-align:auto defaults to following align-content when it's not normal
<TabAtkins> fantasai: so followup, should alingment property win over block-step align if they're both set to an explicit value
<TabAtkins> fantasai: so if you have block-step-align:start and align-content:end...
<TabAtkins> fantasai: seems weird
<TabAtkins> fantasai: can't imagine why you'd want that
<TabAtkins> fantasai: if you're setting the alingment property, and shifting the content by a potnetially large amount, ahving block-step-align move you back away from that desired alignment seems weird
<TabAtkins> astearns: i believe that block-step-align is applied in a more general context, and aling-content will be more specific
<TabAtkins> astearns: so i do agree align-content should win
<fantasai> TabAtkins: Yeah, I think I agree with astearns that align-content would b emore specific
<TabAtkins> jensimmons: in my head, i wonder if it's that alignment should apply to the items inside the box that would be on the side of the box if block-step wasn't turned on, and block-step applies to the space that's put there by block-step
<TabAtkins> jensimmons: imagine a website with components, one with block-step applied and another without lbock-step
<TabAtkins> jensimmons: people can use the block-step for vertical rhythm regardless fo the content alignment, don't think it's contradictory
<astearns> q?
<TabAtkins> fantasai: thing is, if you're alinging contents to the end, and block-step says you need to be slightly bigger, you don't want to push it further away from the end
<TabAtkins> florian_irc: i think this could be another situation similar to the border color, author could be confused why they're alinging something but it's clearly not visually aligned
<TabAtkins> florian_irc: so i agree that align should win there
<TabAtkins> astearns: i don't see it as one or the other, you ahve both things applying to the element, block-step produces a size, but the alignment *within* that size should be controled by the alingment property
<TabAtkins> fantasai: [example on whiteboard]
<TabAtkins> fantasai: so we have a big box. it's larger than its content, and has align-content:end
<TabAtkins> fantasai: so the contents are flush with the end of the box
<TabAtkins> fantasai: then block-step comes in
<TabAtkins> fantasai: everything has 'block-step-align: center'. If this applies naively, it puts some extra space between the box and its contents, so the contents are no longer flush
<TabAtkins> fantasai: confusing gap there
<TabAtkins> jensimmons: okay, this does look liek a case where alignment should win
<TabAtkins> fantasai: right
<TabAtkins> fantasai: different case
<TabAtkins> fantasai: say you ahve a flexbox with vertical rhythm
<TabAtkins> [confused about example]
<TabAtkins> fantasai: if you're inserting block-step into margin, shoudl be consistent with align-self if specified, again so if the element *wants* to be flush with an edge, we stay consistent with that when inserting block-step space
<TabAtkins> fantasai: so i htink alignment should probably always win when it's specified as non-normal
<TabAtkins> fantasai: just can't imagine you'd ever want it to have effects opposite that of the alignment
<TabAtkins> florian_irc: I'm convinced in the first case. I'm confused about the second case.
<TabAtkins> jensimmons: agreed
<TabAtkins> jensimmons: it does feel liek block-step should win when it's on the outside
<TabAtkins> fantasai: if you're self-aligning an item, say in a grid, and block-step is trying to align it, you probably want to match that
<TabAtkins> proposed: non-normal values of align-content/self win over block-step-align (depending on whether block-step-insert is putting the space inside or outside the element)
<fantasai> TabAtkins: This wouldn't give align-self behavior in cases where it doesn't currently apply
<fantasai> fantasai: right
<TabAtkins> astearns: objections?
<fantasai> (we should make that clear)
<TabAtkins> RESOLVED: non-normal values of align-content/self win over block-step-align (depending on whether block-step-insert is putting the space inside or outside the element), but only in the cases where that alignment property already applies