- From: CSS Meeting Bot via GitHub <noreply@w3.org>
- Date: Wed, 20 Aug 2025 12:21:38 +0000
- To: public-css-archive@w3.org
The CSS Working Group just discussed ``[css-multicol-2] `column-wrap`, `column-height` and column balancing``, and agreed to the following: * `RESOLVED: column-span:all only spans across columns of the current row` * `RESOLVED: Do that` * `RESOLVED: if there's not enough content to fill a column-height, we'll still maintain the column-height and just have empty space` <details><summary>The full IRC log of that discussion</summary> <TabAtkins> rachelandrew: lots of discussion, some was morten and me confusing eachother<br> <TabAtkins> rachelandrew: have a final comment that wraps up the questions we wanted<br> <TabAtkins> rachelandrew: resolution we need is around spanners<br> <TabAtkins> rachelandrew: want to make it clear that spanners don't wrap with columns<br> <TabAtkins> rachelandrew: don't think anyone would want that<br> <TabAtkins> rachelandrew: so want to make it clear that if your columns wrap, a spanner only spans across the inline direction, not "all" columns<br> <TabAtkins> rachelandrew: so want to amend column-span:all to say it only spans across the columns of the current row<br> <fantasai> +1<br> <TabAtkins> TabAtkins: did we... oh, we dropped column-span:<int> a while back<br> <TabAtkins> fantasai: yes, we should resolve on this<br> <TabAtkins> astearns: objections?<br> <TabAtkins> RESOLVED: column-span:all only spans across columns of the current row<br> <TabAtkins> rachelandrew: another spanner issue<br> <TabAtkins> rachelandrew: if the spanner is too tall (in the block direction) for the column-height<br> <TabAtkins> rachelandrew: like column-height:100px, spanner is 120px tall<br> <TabAtkins> rachelandrew: what to do?<br> <TabAtkins> rachelandrew: we could avoid spanning, that's not ideal because we've already done layout<br> <TabAtkins> rachelandrew: we could push it to the next row, which works if there's already some content there and the spanner just doesnt' fit in the leftover<br> <TabAtkins> rachelandrew: or we could stretch the height<br> <TabAtkins> rachelandrew: concern is if people create a full page of columns, and then people have a "page" taller than the viewport because the spanner is too big<br> <astearns> ack fantasai<br> <TabAtkins> fantasai: two ways to think about column-height. one is it's a max column height; a spanner restarts you<br> <TabAtkins> fantasai: but i don't think that's what you're suggesting<br> <TabAtkins> fantasai: we put in content, we balancee it, we put in the spanner, and then the spanner is too big<br> <TabAtkins> fantasai: given the spanner doesn't normally restart the columns, having it not restart the columns when it's too big also makes sense to me<br> <TabAtkins> fantasai: so if it pushes things down, the next row of content should end at the same place it woul dahve ended without the spanner<br> <fantasai> https://github.com/w3c/csswg-drafts/issues/11976#issuecomment-2754307956<br> <TabAtkins> fantasai: if you look at this diagram, there's rows without spanners, five lines of content<br> <TabAtkins> fantasai: suppose we had a one-line spanner after the first three words<br> <TabAtkins> fantasai: it would occupy the second line of content in that row<br> <TabAtkins> fantasai: but it woudln't shift anything else, it doesn't reflow...<br> <TabAtkins> fantasai: the row doesn't restart, it's still 100px tall<br> <TabAtkins> fantasai: in this next example the spanner is too big, it overflows<br> <TabAtkins> fantasai: this causes the next row of content to start a new row that's 100px tall, but no longer on the "grid"<br> <TabAtkins> fantasai: but we alreayd established that spanners don'ta ctually restart the height<br> <TabAtkins> fantasai: so consistent with that, we say the rows size and flow as normal, and the spanner just lives in one of those rows<br> <TabAtkins> rachelandrew: okay i think i understand that.<br> <TabAtkins> TabAtkins: you let it overflow and not affect the geometry<br> <alisonmaher> q+<br> <TabAtkins> fantasai: i think this'll happen more with images<br> <TabAtkins> fantasai: a big image, but you want to preserve the vertical rhythm<br> <astearns> ack alisonmaher<br> <TabAtkins> alisonmaher: similar question to last issue - if only part of the row fits below the spanner, do we restart the row in the next one?<br> <TabAtkins> alisonmaher: that's inconsistent with multicol today where you continue the columns below the spanner...<br> <TabAtkins> fantasai: ah, within the row you act like normal<br> <TabAtkins> fantasai: [draws something on the whiteboard]<br> <TabAtkins> fantasai: [explains her proposal via the drawing]<br> <TabAtkins> TabAtkins: so making sure i understand - if the spanner is taller than the remaining space, it just overflows the row, and the next gap+row starts wher eit would normally have (it's not pushed down), so th enext row overlaps it?<br> <TabAtkins> fantasai: the next row's placement isn't pushed down, but the content on the row is - the spanner takes up "content space" into the gap and next row that it intersects.<br> <fantasai> Basically, the column-height defines where the column rows start and end. The spanner doesn't change that. It just takes up room, potentially across multiple rows, and the following content starts after it ends -- and is broken into the next column row at the same physical location as it would have otherwise.<br> <TabAtkins> florian: so the spanner can stomp all over the gaps...<br> <TabAtkins> fantasai: yes<br> <TabAtkins> florian: and in the previous issue, if you have a page break, then what<br> <TabAtkins> fantasai: if the spanner is monolithic it'll move, otherwise you'll fragment it<br> <TabAtkins> fantasai: if the spanner is the first thing in the row and it doesn't fit, it pushes to the next<br> <TabAtkins> alisonmaher: and if it's already at the top of the page?<br> <TabAtkins> fantasai: oh, then you just lay it out and let it happen. we don't shrink things.<br> <TabAtkins> fantasai: so blockquotes would fragment, images would slice<br> <TabAtkins> rachelandrew: i think "treat as monolithic" is a good default case<br> <TabAtkins> astearns: our previous reoslution is that spanners only affect a single row of columns, this breaks that...<br> <TabAtkins> florian: it doesn'ta ffect the rows, just the content of the rows<br> <TabAtkins> rachelandrew: and it's only in the block direction, it's not extending in the inline direction<br> <TabAtkins> astearns: i dont' particularly like this but i dont' have a better idea<br> <astearns> but I do think it’s an improvement (from what’s shown in the issue illustration)<br> <TabAtkins> fantasai: so to summarize, a spanner which is too big to fit in its own row in the block axis can extend into later rows, pushing content in those later rows but not pushing the rows themselves<br> <TabAtkins> fantasai: content after the spanner lays out after the spanner, in a subsequent row (and possibly with less space now, due to the spanner)<br> <TabAtkins> astearns: but it doesn't affect the column-row geometry itself<br> <TabAtkins> astearns: so proposed resolution is we do all that<br> <TabAtkins> astearns: objections?<br> <TabAtkins> RESOLVED: Do that<br> <TabAtkins> rachelandrew: next issue, what if there's not enough content for the column-height?<br> <TabAtkins> rachelandrew: some options - shrink them, or keep the height, or a mixture<br> <TabAtkins> rachelandrew: i think we want option 2, and in the future alignment can do something<br> <astearns> +1<br> <TabAtkins> rachelandrew: that better supports carousel cases<br> <TabAtkins> TabAtkins: strong agree<br> <TabAtkins> fantasai: tricky is if you want to bring in alignment props, the natural thing to use is the stretch keyword; option 1 would be start<br> <TabAtkins> rachelandrew: feels similar to Grid, things are stretched by default in that direction. think authors would find it natural<br> <TabAtkins> astearns: can we resolve on that?<br> <TabAtkins> fantasai: i think this is the right option<br> <TabAtkins> astearns: proposed resolution is if there's not enough content to fill a column-height, we'll still maintain the column-height and just have empty space<br> <TabAtkins> astearns: objections?<br> <TabAtkins> RESOLVED: if there's not enough content to fill a column-height, we'll still maintain the column-height and just have empty space<br> </details> -- GitHub Notification of comment by css-meeting-bot Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/11976#issuecomment-3206088562 using your GitHub account -- Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Wednesday, 20 August 2025 12:21:39 UTC