multiple columns

[Jeff Thies]

I have a design template with a three column newspaper like layout
for the content (I just implement these, I don't dream them up!).

Hence, text and images flow down the first column and then swith to
the second and finally to the third. Content is server generated.

I don't think there is an html/css way to do that that is reasonably
supported. Am I wrong?

So perhaps:

..column{float: left; width: 30%; margin-left: 3%}

Perhaps words could be counted and content poured roughly equally in all
columns. Perhaps new columns should occur after the first ". " after a
certain count.

I can see doing that either server side or perhaps clientside where a
single div is read and then poured into three columns. That would still
be readable in non DHTML browsers.

Opinions? Ideas?

Cheers,
Jeff

 

[brucie]

In alt.html Jeff Thies said:

I have a design template with a three column newspaper like layout
for the content (I just implement these, I don't dream them up!).

Hence, text and images flow down the first column and then swith to
the second and finally to the third.

works ok for a newspaper but not for a browser, its icky poo. starting a
column of content half way through may:

a) not be noticed by the visitor
b) confuse the visitor
c) annoy the visitor scrolling up/down to read the content

I don't think there is an html/css way to do that that is reasonably
supported.

CSS3 is stupidly thinking of doing it

Perhaps words could be counted and content poured roughly equally in all
columns.

newspaper like columns is bad idea. don't do it.

Opinions?

i have none

Ideas?

i have even less of them

 

[Matthias Gutfeldt]

I have a design template with a three column newspaper like layout for
the content (I just implement these, I don't dream them up!).

Hence, text and images flow down the first column and then swith to
the second and finally to the third. Content is server generated.

I don't think there is an html/css way to do that that is reasonably
supported. Am I wrong?

Of course you're wrong! Use the wonderful <multicol> element and tell
your visitors "Best viewed with Netscape 4".

I can see doing that either server side or perhaps clientside where a
single div is read and then poured into three columns. That would
still be readable in non DHTML browsers.

The IHT dreamed up such a scheme, an example is e.g. this article here:
<http://www.iht.com/articles/2004/11/04/america/web.bushconftext.html>
(no, don't read the text; it's crap!). This is actually quite nicely
done and easy to read, IMHO. If you scroll all the way down, you'll also
see that you can change the layout from three columns to one column. The
only blooper, but a *major* one: The text is completely invisible if
javascript is diabled but CSS is still active. That's because they set
all divs to visibility:hidden and then manipulate visibility with
javascript. Very, very stupid - but of course you don't have to do that
too.



Matthias

 

[brucie]

In alt.html Matthias Gutfeldt said:

The IHT dreamed up such a scheme, an example is e.g. this article here:
<http://www.iht.com/articles/2004/11/04/america/web.bushconftext.html>
(no, don't read the text; it's crap!). This is actually quite nicely
done and easy to read, IMHO.

i assume you mean except for the horizontal scrolling backwards and
forwards to read it.

 

[Matthias Gutfeldt]

In alt.html Matthias Gutfeldt said:




i assume you mean except for the horizontal scrolling backwards and
forwards to read it.

No horizontal scrolling on my screen (1024x768). Perhaps I was just
lucky to fit into their "best viewed with" screen resoluion?


Matthias

 

[Steve Pugh]

The IHT dreamed up such a scheme, an example is e.g. this article here:
<http://www.iht.com/articles/2004/11/04/america/web.bushconftext.html>
(no, don't read the text; it's crap!). This is actually quite nicely
done and easy to read, IMHO. If you scroll all the way down, you'll also
see that you can change the layout from three columns to one column. The
only blooper, but a *major* one: The text is completely invisible if
javascript is diabled but CSS is still active. That's because they set
all divs to visibility:hidden and then manipulate visibility with
javascript. Very, very stupid - but of course you don't have to do that
too.

"JS off, CSS on" is, as you say, a problem, also a problem is "JS on,
CSS off" (okay a much rarer situation but a possible one) - here the
entire text of the page appears three times. This is because the
multiple columns are created by duplicating the entire text and the
positioning the duplicates inside clipped regions to create the
columns.

Additionally the line counting used to work out the positioning
requires pixel exactness in the line heights - hence pixel sized (and
thus non-resizable in IE) font sizes. Using Gecko it's quite possible
to change the font size and lose some of the text entirely.

I admire the cleverness in this JavaScript driven effect but think
that overall it's a usability and acessibility minefield.

Steve

 

[Jim Higson]

Of course you're wrong! Use the wonderful <multicol> element and tell
your visitors "Best viewed with Netscape 4".




The IHT dreamed up such a scheme, an example is e.g. this article here:
<http://www.iht.com/articles/2004/11/04/america/web.bushconftext.html>

AFICS, the only advantage for multi-column is for short-ish articles on wide
monitors, so all the text sits above the fold without using long lines.

Shame the IHT is fixed width, if it were fluid it'd be useful for quick
articles..

 

[kchayka]

AFICS, the only advantage for multi-column is for short-ish articles on wide
monitors, so all the text sits above the fold without using long lines.

Actually, I don't think it's suitable for screen display at all, since
there is no way to determine whether the viewport will be large enough
to contain the entire article. If the viewport is too small, scrolling
can become a real usability problem with these things.

Multi-columns are, however, an OK idea for a print stylesheet.

 

[Jeff Thies]

Actually, I don't think it's suitable for screen display at all, since
there is no way to determine whether the viewport will be large enough
to contain the entire article. If the viewport is too small, scrolling
can become a real usability problem with these things.

Since this is all client side, they know the viewport width. And if
javascript is turned off it doesn't work anyways!

Jeff

 

[mscir]

Actually, I don't think it's suitable for screen display at all, since
there is no way to determine whether the viewport will be large enough
to contain the entire article. If the viewport is too small, scrolling
can become a real usability problem with these things.

Multi-columns are, however, an OK idea for a print stylesheet.

I think this looks good, the narrow columns make it very readable:

http://www.iht.com/articles/2004/11/04/news/neocon.html

Mike

 

[kchayka]

I think this looks good, the narrow columns make it very readable:

http://www.iht.com/articles/2004/11/04/news/neocon.html

Readable is in the eye of the reader. I find narrow columns of about 3
words per line quite tedious to read. And that's what I end up getting
with my larger than average text size.

I'll take one wide column any day, providing it adapts to my window
width, of course.