W3C home > Mailing lists > Public > www-style@w3.org > May 2008

[css3-multicol] minimizing scroll complexity of multiple multi-column blocks

From: Myk Melez <myk@mozilla.org>
Date: Mon, 19 May 2008 16:05:49 -0700
Message-ID: <483207CD.5000905@mozilla.org>
To: www-style@w3.org

While experimenting with multi-column layouts recently, I realized that 
there isn't a way to lay out multiple multi-column blocks containing 
content that doesn't entirely fit into the viewport (like on roc's blog 
<http://weblogs.mozillazine.org/roc/> with a short, wide viewport) such 
that the user only has to scroll in one direction to read the whole page.

Content can either overflow the viewport vertically, if the blocks 
specify only a column width, or horizontally, if they also specify a 
height shorter than or equal to the height of the viewport.

In the former case, the user has to repeatedly scroll down and back up 
to read the page, as in this example, where the viewport is drawn with 
lines and the blocks with dots:

(scroll down | to read first col, back up ^ then down | to read second)
              v                            |           v
+-------------------------------------------------+
|...............................................  |
|.Ab cde fgh i jkl. Mno  tuv wxy z. Abc de fg  .  |
|.pqr stu vw xyz. A bc   hi jklmno. Pqrstu vw  .  |
|.def g hij klm nopqrs   x yz. Abc def ghi jkl..  |
|.tuv wxy z. Abc de fg   M nop qrst uv wx yz.  .  |
|.hi jklmno. Pqrstu vw   Ab cde fgh i jkl. Mno .  |
|.x yz. Abc def ghi jkl. pqr stu vw xyz. A bc  .  |
|.M nop qrst uv wx yz.   def g hij klm nopqrs  .  |
|.Ab cde fgh i jkl. Mno  tuv wxy z. Abc de fg  .  |
+-------------------------------------------------+
  .pqr stu vw xyz. A bc   hi jklmno. Pqrstu vw  .
  .def g hij klm nopqrs   x yz. Abc def ghi jkl..
  ...............................................

(repeat for columns in second block)

  ...............................................
  .Ab cde fgh i jkl. Mno  tuv wxy z. Abc de fg  .
  .pqr stu vw xyz. A bc   hi jklmno. Pqrstu vw  .
  .def g hij klm nopqrs   x yz. Abc def ghi jkl..
  .tuv wxy z. Abc de fg   M nop qrst uv wx yz.  .
  .hi jklmno. Pqrstu vw   Ab cde fgh i jkl. Mno .
  .x yz. Abc def ghi jkl. pqr stu vw xyz. A bc  .
  .M nop qrst uv wx yz.   def g hij klm nopqrs  .
  .Ab cde fgh i jkl. Mno  tuv wxy z. Abc de fg  .
  .pqr stu vw xyz. A bc   hi jklmno. Pqrstu vw  .
  .def g hij klm nopqrs   x yz. Abc def ghi jkl..
  ...............................................

(As HTML: <http://melez.com/mozilla/column-overflow-vertical.html>.)


In the latter case, the user can read a whole block by scrolling to the 
right but has to scroll back to the left to read the next block.

(scroll right to read first block ->)
+-------------------------------------------------+
|.................................................|.....................
|.Ab cde fgh i jkl. Mno  Ab cde fgh i jkl. Mno  Ab| cde fgh i jkl. Mno .
|.pqr stu vw xyz. A bc   pqr stu vw xyz. A bc   pq|r stu vw xyz. A bc  .
|.def g hij klm nopqrs   def g hij klm nopqrs   de|f g hij klm nopqrs  .
|.tuv wxy z. Abc de fg   tuv wxy z. Abc de fg   tu|v wxy z. Abc de fg  .
|.hi jklmno. Pqrstu vw   hi jklmno. Pqrstu vw   hi| jklmno. Pqrstu vw  .
|.x yz. Abc def ghi jkl. x yz. Abc def ghi jkl. x |yz. Abc def ghi jkl..
|.M nop qrst uv wx yz.   M nop qrst uv wx yz.     |                    .
|.................................................|.....................
+-------------------------------------------------+

(<- scroll back left, then down | , then right to read next block ->)
                                 v
  ......................................................................
  .Ab cde fgh i jkl. Mno  Ab cde fgh i jkl. Mno  Ab cde fgh i jkl. Mno .
  .pqr stu vw xyz. A bc   pqr stu vw xyz. A bc   pqr stu vw xyz. A bc  .
  .def g hij klm nopqrs   def g hij klm nopqrs   def g hij klm nopqrs  .
  .tuv wxy z. Abc de fg   tuv wxy z. Abc de fg   tuv wxy z. Abc de fg  .
  .hi jklmno. Pqrstu vw   hi jklmno. Pqrstu vw   hi jklmno. Pqrstu vw  .
  .x yz. Abc def ghi jkl. x yz. Abc def ghi jkl. x yz. Abc def ghi jkl..
  .M nop qrst uv wx yz.   M nop qrst uv wx yz.                         .
  ......................................................................

(As HTML: <http://melez.com/mozilla/column-overflow-horizontal.html>.)


One solution to this problem would be to enable columns to wrap around 
when they don't fit the viewport horizontally, i.e.:

(scroll down | to read both blocks)
             v
+-------------------------------------------------+
|...............................................  |
|.Ab cde fgh i jkl. Mno  pqr stu vw xyz. A bc  .  |
|.pqr stu vw xyz. A bc   def g hij klm nopqrs  .  |
|.def g hij klm nopqrs   tuv wxy z. Abc de fg  .  |
|.tuv wxy z. Abc de fg   hi jklmno. Pqrstu vw  .  |
|.hi jklmno. Pqrstu vw   x yz. Abc def ghi jkl..  |
|.x yz. Abc def ghi jkl. M nop qrst uv wx yz.  .  |
|.M nop qrst uv wx yz.   Ab cde fgh i jkl. Mno .  |
|.Ab cde fgh i jkl. Mno  pqr stu vw xyz. A bc  .  |
+-------------------------------------------------+
  .                                             .
  .def g hij klm nopqrs                         .
  .tuv wxy z. Abc de fg                         .
  .hi jklmno. Pqrstu vw                         .
  .x yz. Abc def ghi jkl.                       .
  ...............................................

  ...............................................
  .Ab cde fgh i jkl. Mno  pqr stu vw xyz. A bc  .
  .pqr stu vw xyz. A bc   def g hij klm nopqrs  .
  .def g hij klm nopqrs   tuv wxy z. Abc de fg  .
  .tuv wxy z. Abc de fg   hi jklmno. Pqrstu vw  .
  .hi jklmno. Pqrstu vw   x yz. Abc def ghi jkl..
  .x yz. Abc def ghi jkl. M nop qrst uv wx yz.  .
  .M nop qrst uv wx yz.   Ab cde fgh i jkl. Mno .
  .Ab cde fgh i jkl. Mno  pqr stu vw xyz. A bc  .
  .                                             .
  .def g hij klm nopqrs                         .
  .tuv wxy z. Abc de fg                         .
  .hi jklmno. Pqrstu vw                         .
  .x yz. Abc def ghi jkl.                       .
  ...............................................

That way the user only has to scroll down to read the whole page.

This solution is not without issues (f.e. how to prevent the user from 
accidentally reading down across discontiguous columns when multiple 
rows of columns are visible in the viewport), and there may be other 
ways to address the problem, but this seems the most straightforward at 
first glance.

It's also the way columns are laid out in paged media, according to the 
spec, whose section 9 <http://www.w3.org/TR/css3-multicol/#overflow> 
states that "in paged media, columns for which there is not room within 
the page are are moved to the next page."

Might the spec be made to accommodate this use case using the solution 
above or via some other mechanism?

-myk
Received on Monday, 19 May 2008 23:06:45 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Monday, 27 April 2009 13:55:06 GMT