Q: How do I create a "snaking-column"? [CSS]

Prev: Absolute Question
Next: Centered content with changing background color

From: A. Deguza on 17 Apr 2010 19:08

Hello Folks:

I have been scouring the web abd archives of this group to see if
there is a way of creating snaking two-column layout for text.

So far no luck.

Is it doable?

Thanks,

Deguza

From: Gus Richter on 17 Apr 2010 22:22

On 4/17/2010 7:08 PM, A. Deguza wrote:
> Hello Folks:
>
> I have been scouring the web abd archives of this group to see if
> there is a way of creating snaking two-column layout for text.

You are looking for Multi-columns using only CSS3.
<http://www.w3.org/TR/css3-multicol/#column-breaks>

Firefox, Chrome, Safari support it with proprietary CSS properties.
Opera and IE don't, but degrade gracefully.

Here is a live example:
<http://weblogs.mozillazine.org/roc/archives/2010/04/layers.html>

--
Gus

From: Jukka K. Korpela on 17 Apr 2010 23:37

Gus Richter wrote:

> On 4/17/2010 7:08 PM, A. Deguza wrote:
>> Hello Folks:
>>
>> I have been scouring the web abd archives of this group to see if
>> there is a way of creating snaking two-column layout for text.
>
> You are looking for Multi-columns using only CSS3.

Probably. "Snaking columns" seems to refer to columns where content is to be
read by reading the columns consecutively in the layout order. Isn't there
any official term for this? The CSS Multi-column Layout Module draft doesn't
bother even explaining what "multicolumn" really means in it, as opposite to
the very common setting where a web page is divided into columns, each with
content of its own, to be read in any order.

> Firefox, Chrome, Safari support it with proprietary CSS properties.

So you'd need duplication such as (to quote the CSS of the demo page you
mentioned)

..columns {
-moz-column-width: 20em;
-moz-column-gap: 3em;
-moz-column-rule: 1px solid;
-webkit-column-width: 20em;
-webkit-column-gap: 3em;
-webkit-column-rule: 1px solid;
}

I wonder the syntax used in the draft has been omitted. Technically, using
it would make the style sheet incorrect according to W3C recommendations on
CSS, but those recommendations are a mess, and using that syntax would seem
to be the best way to prepare for browsers that will implement the draft or
a recommendation based on it.

> Opera and IE don't, but degrade gracefully.

In the sense that they just ignore all the CSS declarations written using
browser-specific syntax for other browsers - not surprisingly. If you
additionally used column-width etc., then there might be problems, in
versions of the browsers having _some_ supporty to multi-column but limited
and possibly buggy. So this might be a reason to consider avoiding the
proposed "standard" syntax.

> Here is a live example:
> <http://weblogs.mozillazine.org/roc/archives/2010/04/layers.html>

The degradation isn't that graceful in practice, since on IE, the content
appears in one column with no width limitation, so looking at the page on,
say, 1680 px screen in fullscreen mode is... an experience. I think a good
example would also address the practical question of setting maximum width
for the content when multi-column is not applied, without disturbing
multi-column presentation.

And if you look at the example page on a browser that _does_ support the
multi-column techniques used, and if you test it with varying canvas widths,
you'll see that it's not that great. Usually multi-column presentation more
or less requires justification (text-align: justify) to look good, at least
if the columns are fairly narrow. This in turn means that hyphenation should
be used - but browsers don't do that (without much help), and e.g. Firefox
does not even break a word like "GPU-assisted" after the hyphen, unless you
help it by writing "GPU-<wbr>assisted" in the markup.

Besides, reading a long column _using vertical scrolling_ and then scrolling
upwards again to get to the start of the next column is rather... perverse.
Multi-column might work, properly implemented, in situations where we can
expect the content to appear on screen with no need for scrolling, or on
paper. But the user needs both eye movement and scrolling, it's just
disturbing and pointless, comparable to a reading a multi-column paper
publication and, upon noticing after some confusion that the text does not
continue at the start of the next column, flipping to the next page, reading
a column there, then flipping back and moving to the next column of the
previous page. Even the "Continued on page 42" references are better, since
they are at least explicit and clear.

--
Yucca, http://www.cs.tut.fi/~jkorpela/

From: A. Deguza on 18 Apr 2010 03:19

On Apr 17, 7:22 pm, Gus Richter <gusrich...(a)netscape.net> wrote:

>
> Here is a live example:
> <http://weblogs.mozillazine.org/roc/archives/2010/04/layers.html>
>
> --
> Gus

I Looked at the examples at http://www.w3.org/TR/css3-multicol/#introduction.
Then put Example IX in a text file and saved it as html.

Looked at it with Chrome and Firefox. No columns.

What am I missing?

Arturo
---------------------------------------------------------
P.S.: Here is the code for the Example IX:

<html>
<style type="text/css">
div {
column-width: 15em;
column-gap: 2em; /* shown in yellow */
column-rule: 4px solid green;
padding: 5px; /* shown in blue */
}
p { margin: 0; padding: 0 }
img { display: none }
</style>
<body>
<div>
<p>Ab cde fgh i jkl. Mno
pqr stu vw xyz. A bc
<img src=...>
def g hij
....
</div>
</body>
</html>

From: Jeff Thies on 18 Apr 2010 01:50

| Next | Last
Pages: 1 2 3
Prev: Absolute Question
Next: Centered content with changing background color