W3C home > Mailing lists > Public > public-css-archive@w3.org > January 2019

Re: [csswg-drafts] [css-multicol] Improve column-fill and make it backward-compatible (#3224)

From: Rachel Andrew via GitHub <sysbot+gh@w3.org>
Date: Sat, 05 Jan 2019 16:48:48 +0000
To: public-css-archive@w3.org
Message-ID: <issue_comment.created-451670762-1546706927-sysbot+gh@w3.org>
[There are some examples to go with this writeup](https://codepen.io/rachelandrew/pen/gZedrZ).

The issue as raised is that currently Blink, WebKit and Edge all have implemented `column-fill: auto` as in an older version of the multicol spec (the one which was at CR before we went back to a WD), the implementations follow text which said:

> "In continuous media, this property [column-fill] will only be consulted if the length of columns has been constrained. Otherwise, columns will automatically be balanced."

If you look at the examples in any of those browsers you can see that example 1, with no height has balanced and example 2, with a height has filled columns in turn to the specified height.

This text was commented out [in 2012](https://github.com/w3c/csswg-drafts/commit/e0a990c7e6514f95f1d0c3d6ccb08f4552365f44). Firefox has implemented to not balance an unconstrained multicol container.

I haven't looked a lot at non-browser UAs but Prince is doing the same thing as Firefox (so not balancing an unconstrained container, giving us one column of text).

**The proposal is to update the spec to match what Blink/WebKit/Edge are doing.**

Additional suggestions are **to include `min-` and `max-` constraints** as also being a reason to consult column-fill and not balance when it is auto. My examples 3 and 4 show a multicol container with a min-height of 200 pixels with a larger and smaller amount of content.

There is a use case for including min- as a constraint which is the one where you have a multicol container and sometimes the amount of content added leaves you with one or two lines of text in each column. In that scenario it would be much better to have a single column than spread the content out across multiple columns. Adding a `max-` constraint might be problematic if sometimes there was a lot more content than expected. As an author I'd find it useful behaviour to be able to set a `min-height` constraint and `column-fill: auto` and the columns fill sequentially with no balancing until that min-height is reached. At that point start balancing.

We also have issue #3064 asking for this behaviour.

**There is also a suggestion to introduce `column-fill: fill` as a never balance mode**:

> "If we really want a mode that never forces balancing, how about introducing column-fill:fill for that? That mode could even refrain from balancing before spanners (and only break if there are explicit breaks)."

There was also discussion in terms of defining what min and max content mean, with @fantasai suggesting that:

> "current proposal, if there's no min/max constraint, and the height is specified to be an automatic size, it's equivalent to min-content".

I think the things we need to decide upon are:

1. Should we update the spec to return to the behaviour as implemented in Blink/WebKit/Edge that `column-fill: auto` balances an unconstrained container, and does not balance a constrained container?
2. Should we include min and max as constraints as requested in #3064 
3. Do we want to introduce a never balance mode as suggested by Morten with `column-fill: fill`?

GitHub Notification of comment by rachelandrew
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/3224#issuecomment-451670762 using your GitHub account
Received on Saturday, 5 January 2019 16:48:49 UTC

This archive was generated by hypermail 2.4.0 : Tuesday, 5 July 2022 06:41:42 UTC