Re: [csswg-drafts] [css-multicol] Overflow in the block direction for continuous media (#2923)

I've written up some proposed spec changes for the [multicol level 2 spec](https://drafts.csswg.org/css-multicol-2), for block direction overflow, and discussed them with a few folks at Chrome. Posted in this comment for discussion, and I'll add to the agenda. If I can get a resolution on the general approach I'll add this into the level 2 draft (which has a new FPWD) and raise any individual issues that come up separately.

## Notes on the approach

- I’ve modeled this after flex-wrap as it seems the closest thing we already have.
- When we rejigged multicol level 1 I preserved “row” as a name for doing this (rather than use it for the rows of columns created by a spanner) as then we can talk about it in terms familiar to flex and grid. Also, if people want to put a decorative line between rows, that would be the row created by this block fragmentation rather than a spanner (you can already decorate a spanner with borders and so on, if that's the visual effect you want).
- I think that creating new rows gives us a [nested fragmentation flow](https://www.w3.org/TR/css-break-3/#nested-flows) that behaves pretty much like what happens in paged media, so a lot of the things we need to spec and implement are roughly the same as what happens when a multicol is paged. For example, [column-fill](https://drafts.csswg.org/css-multicol/#cf) already deals with balancing the last fragment in fragmented contexts. I’ll need to go through the spec and make sure that we talk about paged media and "continuous media where column-wrap is wrap".

## Relationship to other work

The [carousel work](https://github.com/flackr/carousel/) prompted me to write this up, as it will be nice to do block direction carousels (though developers want this functionality anyway as it makes multicol more useful on the web). We’d need to be able to snap to the row fragment as for a column fragment.

The work on [gap decorations](https://github.com/w3c/csswg-drafts/issues/10393), as it’s likely that developers will want to have lines between the rows as well as between columns as already mentioned.

## Additions and changes to the multicol-2 spec

### A new property: `column-wrap`

**The overflow direction in continuous media: the column-wrap property**

Name: column-wrap
Value: nowrap | wrap
Initial: nowrap
Applies to: multicol containers
Inherited: no
Percentages: n/a
Computed value: specified keyword
Canonical order: per grammar
Animation type: discrete

The `column-wrap` property controls the behavior of overflow columns in continuous media. 

- `nowrap`: Overflow columns are created in the inline direction.
- `wrap`: Overflow columns create a new multicol row in the block direction.

Example:

```
body {
  column-count:3;
  block-size: 10em;
  column-wrap: wrap;
}
```

_This would create a set of three columns. If there was more content than would fit in the 10em `block-size` of these columns, rather than overflowing in the line direction as currently happens, a new row of columns would be created in the block direction, again at a max block-size of 10em._

### Changes to the [columns shorthand](https://drafts.csswg.org/css-multicol-2/#columns)

**The column-width, column-count, and column-wrap Shorthand: The columns property**

Name: columns
Value: <'column-width'> || <'column-count'> || <column-wrap>
Initial: see individual properties
Applies to: see individual properties
Inherited: see individual properties
Percentages: see individual properties
Computed value: see individual properties
Animation type: see individual properties
Canonical order: per grammar

This is a shorthand property for setting column-width, column-count, and column-wrap. Omitted values are set to their initial values.

_Adding `column-wrap` here so that it's possible to set all three at once._

## Changes to section [Overflow](https://drafts.csswg.org/css-multicol-2/#overflow)

Content and column rules that extend outside column boxes at the edges of the multi-column container are clipped according to the overflow property.

A multicol container can have more columns than it has room for due to:

- a declaration that constrains the column height (e.g., using height or max-height). In this case, additional column boxes are created **according to the value of column-wrap**.
- the size of the page. In this case, additional column boxes are moved to the next page(s).
- explicit column breaks. In this case, additional column boxes are created **according to the value of column-wrap** for continuous contexts and additional column boxes are moved to the next fragment(s) for fragmented media.

## Other changes

- Define rows in the section [the multi-column model](https://drafts.csswg.org/css-multicol-2/#the-multi-column-model)
- multicol-2 defines the [`::column` pseudo-element](https://drafts.csswg.org/css-multicol-2/#column-pseudo). I think we'll also want to define `::row` if we're scrolling in the block direction and stopping on rows.
- There will be other places in the spec (anywhere mentioning paged vs continuous media) that need to refer to the value of `column-wrap`. 




-- 
GitHub Notification of comment by rachelandrew
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/2923#issuecomment-2566448417 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Tuesday, 31 December 2024 13:17:04 UTC