- From: Myk Melez <myk@mozilla.org>
- Date: Mon, 19 May 2008 16:05:49 -0700
- 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 UTC