#1073: Column wrapping for multicol

Visit on Github.

Opened Mar 26, 2025

こんにちは TAG-さん! Mazda Toyota!

I'm requesting a TAG review of Column wrapping for multicol.

The column-wrap property is intended to enable column wrapping (there's already some support for implicit column wrapping in nested multicol, when breaking in the outer fragmentation context, but that's all). If the value of column-wrap is wrap, and all the specified columns have been filled in the inline direction, instead of overflowing in the inline direction, a new row for columns will be created, so that more content can be added below the previous row of columns. The block-size of the rows can be set via the column-height property. If it is auto, the block-size of the content box will be used instead. Treating auto like this is useful for scrollable overflow, so that there's room for one row of columns in the scrollport.

Further details:

Discussions

Log in to see TAG-private discussions.

Discussed Apr 14, 2025 (See Github)

Xiaocheng: Had a look at it … is an extension to the CSS multicolumn layout … propose an extension feature, when the columns overflow they should wrap to the next row … introduced column wrapping … left a comment in brainstorming … think this is a natural extension, seems useful … but the reading direction may not be intuitive … may be hard if this should be read from left to right or top to bottom … not sure if I'm asking to much … but adding page or column numbers could be interesing … will ask them … want to ask what developers currently do to achieve the same thing … alternatives considered, privacy & security considerations Matthew: Think this comment is great! Hadley: If you both agree, then I would suggest to ask them if they would update the explainer … otherwise they reply to us in the issue … which would be hard to find in the future … great idea to ask them Matthew: Expect this will go to pending: external-feedback? Hadley: I think so! Xiaocheng: I will post it.

Comment by @xiaochengh Apr 17, 2025 (See Github)

Hi @mstensho, the TAG discussed it at a Breakout and are generally positive about it, and would like to further see:

  1. With column wrapping, user may be confused about the reading direction: should it be LTR then HTB, or should it be HTB then LTR? Are there any considerations or mitigations?
  2. Regarding the explainer, could you adding the following:
    • What do web developers currently do to achieve such layout?
    • What are the alternatives considered?
    • Are there any privacy, security and accessibility considerations?

We would also prefer the explainer to be placed in the same repository next to the spec than a personal repo.

Comment by @mstensho Apr 22, 2025 (See Github)
  1. Row gaps (and rules) may be helpful. @rachelandrew Any thoughts?
  2. Added

PR for placing it in css-multicol-2: https://github.com/w3c/csswg-drafts/pull/12107

Comment by @rachelandrew Apr 22, 2025 (See Github)

I'm not completely sure what the question is, but rules are defined in the new spec here https://www.w3.org/TR/css-gaps-1/ (we should probably move the column-rule info to point to this) and row gaps should be defined in the CSS alignment spec (which is where column gaps are defined).

Looks like the PR is failing on ipr.

Comment by @mstensho Apr 22, 2025 (See Github)

I think the concern is that the user may be uncertain how to read 2D column layout. Should it (in horizontal-tb, ltr) be from left to right, then from top to bottom - or the other way around? I.e. columns first, or rows first?

Comment by @rachelandrew Apr 22, 2025 (See Github)

Yes from left to right, then top to bottom. I think any confusion would be from a design problem, as you say, a row rule would help there if you could see more than one row at once. I think the most likely way people want to use this however is to prevent the major usability issue of multicol on the web currently, which is that you might have to scroll up and down to read the contents of each column. This enables carousel-like experiences that scroll in the block direction (either full page, or in some kind of container) in which case the user would not see more than one row of columns at any one time.

Comment by @svgeesus Apr 22, 2025 (See Github)

We would also prefer the explainer to be placed in the same repository next to the spec than a personal repo.

Here it is: https://github.com/w3c/csswg-drafts/blob/main/css-multicol-2/column-wrap-explainer/explainer.md

Discussed Apr 28, 2025 (See Github)

Xiaocheng: we raised 2 issues - one is that the explainer isn't good enough and also ... naiive usage of column wrapping may confused user... there is no clear indication which one is the next column...

... they clarified this ... should be used in combination with other styles... e.g. row gap styling. Rationale is that indication of reading direction is not the job of this feature...

... I sugegst we close this one as "satisfied with concerns".. the spec should have a note saying that authors should use this with other features... to indicate reading direction.

Matthew: presumably if the user is using right-to-left system then the columns would wrap right-to-left? In comments... they talked about top to bottom, left-to-right...

Xiaocheng: I assume it would use the logical ...

Matthew: I'm pretty confident they would make it work using the logical properties...

Xiaocheng: yes ... [it would follow the logical flow] ... wraps in that direction...

Matthew: in the explainer they said "it's just normal navigation with tabs"... but not really... People who use assistive technologies, their UA and AT needs to know what order to present htings in. That comes from a combination dumb order and CSS. In my experience, normal column layouts work, so the work has been done in the browser engine to make that work.

Torgo: yes, I see in the explainer "there are no additional accessibility issues", and I feel like they should address this.

Matthew: Moving around content in columns does work, in my experience, and this doesn't change that. But hte next sentence, people with screen readers don't navigate with the tab key becuase they'd miss all the content.

Overall, they do know what they're doing. But the words they use are differnt than the words that accessibility people use. And I get it: a virtual cursor is a difficult concept, since you can't see it.

So I don't think it's worth commenting to them. But people using AT don't navigate with the Tab key, they use arrows. Effectively skip, or go from heading to heading. It isn't just pressing the tab key.

I don't think it will have major consequences, and I don't think we should comment to them. But I wanted us to be clear that tabs aren't how people using AT navigate.

We would like to suggest you add implementation guidance to the effect that web pages should make it clear what the column order is using XYZ other web technology...

Xiaocheng to leave a comment and hopefully we can close as satisfied.

Discussed Jun 23, 2025 (See Github)

(Closed)

Comment by @xiaochengh Jun 26, 2025 (See Github)

That looks great, thank you!