Multi-column confusion

tl;dr: Be careful when using multi-column layout.

Today I was finishing up a small portion of a project which involves generating PDFs with a multi-column layout from web content. Since we’re using the Prince formatter for the PDFs, there are no worries there, as Prince is one of the finest rendering engines out there, especially for this kind of thing.

But since I also created a live preview so the client can see their text in the intended layout while typing, I tested in some major desktop browsers. I was in in for a big surprise.

For anyone familiar with CSS Multi-column layout, the spec says basically—if I understand it correctly—that if no height is specified on the element containing the text columns, then the text should be distributed amongst these columns so that they are of (roughly) equal height. The value for this behavior is balance. If a height is specified, then the browser should use the value of the column-fill property, if it has been specified. If there is no column-fill property, then the browser should still balance the columns. Go ahead and read that again. I’ll wait.

I had set a height on my container. So I was confused about the fact that Chrome/Safari and Firefox were applying auto where they should have been applying balance.

A column-fill value of auto means that the browser should fill the columns in sequence, starting with the first column and filling it, then column two, etc. until there is no remaining text. The browser can do this because it knows the height of the column container. So the spec makes perfect sense, but I was scratching my head at this point. I had specified a height, but not column-fill. Every browser should have used balance, but only Opera did.

Well, I’m thinking it’s me, then I’m thinking it’s not me, so I tweet about it. Fellow CSS layout fan (and author of The Book of CSS3) Peter Gasston and I started chatting about it and tonight we jumped on GTalk and starting testing. Turns out the answer is quite simple: Peter starts off by telling me how Firefox and the Webkit browsers haven’t fully implemented the spec yet. I should have known that, but I didn’t, like an idiot. And it’s logical because the spec is obviously not finished yet.

But even after knowing that, it’s still pretty confusing, because which behavior conforms to the spec right now and which doesn’t? What’s supposed to happen when? I mapped my tests out in the form of two small comparison tables. They might look confusing, but they really aren’t. It’s pretty easy to figure out what you’d need to do to get either balance or auto. Even when the spec is implemented, it’s still useful to know under what conditions each of these values will be acted upon.

Multi-column column-fill defaults, when column-fill is not explicitly specified.
  Opera Firefox Chrome/Safari
No explicit height on container balance balance balance
Explicit height on container balance auto * auto *
Multi-column column-fill behavior when column-fill property is explicitly specified.
  Opera Firefox Chrome/Safari
column-fill: balance;
(container height specified)
balance auto * auto *
column-fill: balance;
(No container height specified)
balance balance balance
column-fill: auto;
(container height specified)
auto auto auto
column-fill: auto;
(No container height specified)
balance balance balance

As far as Peter and I can tell, the only behavior which does not conform to the spec is marked in red and with an asterisk. The rest seems (to me) to conform to the spec.

Again, I’ve run into this kind of thing because I’m knowingly using a spec which is not fully implemented. If you do the same, please realize that things can go wrong, and that you’re basically working with a work-in-progress. It might change, and you might have to change your code in the future. If you do use Multi-column now, please use it as a progressive enhancement. And don’t forget to use all the necessary vendor prefixes so that we all may live in peace and harmony.

As always, have fun!

2 thoughts on “Multi-column confusion

  1. For CSS3 supported browser its a good technique to use.
    Until now I have never used this feature in my projects before but wasnt aware this would be tricky to use across modern browsers.
    Thanks for the insights.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>