[css3-multicol] column overflow

CSS3-multicol describes how to lay out content into multiple columns
[1]. The benefit on multicol layouts in paged media is clear.
Continuous presentations -- in browsers with scrollbars -- provide
some challenges. For example, when columns are longer that the
viewport, users will find themselves scrolling up and down repeatedly
to read the content. One way to address this problem is to set the
'max-height' (for horizontal writing systems) of an element so that it
will fit most people's viewport.

However, adding constraints on the height will lead to content
overflow. The spec doesn't say exactly what should happen in these
cases, but the examples suggest that more columns should be added on
the side. This is also what the two current browser implementations
(Mozilla and WebKit) do.

This behavior leads to horizontal scrolling, which is arguably worse
than repeated vertical scrolling. Jacob Nielsen, at least, argues that
horizontal scrolling should be avoided [2].

One alternative method that has been suggested (most recently by David
Storey) is to place the overflow content underneath the first set. One
can think of this as cloning the original multicol element as many
times as necessary and stacking them on top of each other.
Margin/padding/border set on the original multicol elements will also
be honored for the cloned elements.

So, for a three-column layout with overflow and constrained height you
would get:

   This is some  to test multi-  This sentence
   sample text   column layout.  continues in

   the next col-
   umn.

instead of

   This is some  to test multi-  This sentence  the next col-
   sample text   column layout.  continues in   umn.

(monospaced text is assumed in this example)

Personally, I think this is more friendly to users. Pioneer
implementors will have to change their code to make this work. AFAIK,
support for multi-column layout hasn't been turned on official yet one
still has to use prefixed property names to enable it. So, there's
still time to fix it if we agree that it's a better solution.

What do people think?

[1] http://www.w3.org/TR/css3-multicol/#overflow
[2] http://www.useit.com/alertbox/20050711.html

-h&kon
              Håkon Wium Lie                          CTO °þe®ª
howcome@opera.com                  http://people.opera.com/howcome

Received on Thursday, 16 October 2008 19:22:28 UTC