Clagnut

Menu

More on multi-column layouts

§ CSS techniques

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;
}