Since Firefox 1.5 Beta 1 shipped with a partial implementation of the proposed CSS 3 Multi-column layout module, it’s received a fair bit of attention. A List Apart recently covered the implementation along with some scripted alternatives, and Quirksmode provides really detailed coverage of what is and isn’t supported (right now that’s the best place to go to learn the syntax). And just as I was about to get all uppity about why multi-column layout is a bad idea for screen layout, along comes Roger Johansson with some strong thoughts of his own.
The main issue is when multi-columns are applied to body copy. If the copy is of any significant length then readability will be impaired. It would be entirely unsatisfactory for a reader to have to scroll down and then up to get through the text. Scrolling horizontally would be less of a burden, but would still feel awkward and it could be easier to lose one’s place. Inline anchors would also become less effective – the page might scoll to the right point, but which column is your anchor in? And forcing paging onto people for no other reason than to better enable multi-column layouts would also harm the reading experience.
For tightly controlled print style sheets, multi-column layouts should work fine, and I’m sure there are hundreds of useful ways to use the technique on screen (navigation, introductory text, image layout, I look forward to more) but body copy is not one of them.
As an historical aside, multi-column layout was introduced to Netscape Navigator 3 back in 1996 (happy days). It went something like this:
<multicol cols=3 width=80% gutter=15>
Lorem ipsum dolor sit amet.
</multicol>Nine years later, and still only a Working Draft, the CSS 3 equivalent would be as follows:
div#multicolumn {
width:80%;
column-count: 3;
column-gap: 15px;
}
Gordon wrote:
I think I agree. I’m glad it’s been (being) added as at the moment to get two columns you have to faff about with float left, float right divs and it’s much more complicated than it should be.
And yes, unless strictly controlled, I agree it’s definitely NOT for body text.
Until someone comes up with a really smart way of using it (on a fixed height DIV maybe???) and then we’ll all be going “ohhhh NOW I get it…”
Matt Wilcox wrote:
I read Roger’s post and wondered quite what the big deal was, and a few days later I’m still wondering the same thing. I don’t understand the worry associated with multi-column layouts. They are a tool for the designer, and as long as the designer is a good designer they pose no danger at all, they merely expand our options. Of course some people will mis-use it, just like some people mis-used CSS – but that’s what has always separated the good designer from the bad designer – a good designer knows how to use the tools to make things work better. I’m all for more tools so I can do different things and make them work well, bring multi-column on.
Rich wrote:
Matt,
There’s no big fuss about this, it’s just that it would be so easy to create a poor experience for the reader that it’s worth sounding a note of caution. It’s all well and good saying only bad designers will abuse it, but surely you’d rather they didn’t. Sometimes pointing out the obvious at the risk of patronise others pays dividends.