Columns on an HTML Page?

[Nehmo Sergheyev]

After reading about text line length
http://psychology.wichita.edu/surl/usabilitynews/72/columns.htm , I'm
thinking about experimenting with columns of text on a page.

Is it possible on an HTML page to
have 2 columns of text where the text of one column flows to the next on
the visible part of the page, and
scrolling treats the 2 columns like the bottom of the right column is
connected to the top of the left column? Scrolling down brings new text
up from off the visible page to the bottom of the right column (just
like on a regular page), but scrolling down makes the text on the top of
the right column move to the bottom of the left column. The text
disappears off the visible page going up and off from the top of the
left column.

Is there any way to do this with some dynamic HTML method? Perhaps there
is a way to use 2 frames where scrolling in one affects the other?

Or is there a possible JavaScript way of doing this?

 

[Toby Inkster]

have 2 columns of text where the text of one column flows to the next on
the visible part of the page,

No. And even if you could, it would be a stupid thing to do.

Columns of text make sense for newspapers and magazines, where you can see
the whole page in front of you at once; but what makes sense in print
media doesn't always make sense on the web!

On the web, if you have columns of text, you need to scroll (arrow
buttons, mouse wheel, scroll bar, whatever) all the way to the bottom as
you read the first column, then right back to the top to start the second
columns. Silly.

 

[Nehmo Sergheyev]

- Toby Inkster

Columns of text make sense for newspapers and magazines, where you can see
the whole page in front of you at once; but what makes sense in print
media doesn't always make sense on the web!

On the web, if you have columns of text, you need to scroll (arrow
buttons, mouse wheel, scroll bar, whatever) all the way to the bottom as
you read the first column, then right back to the top to start the second
columns. Silly.

Nehmo -
To be a litle clearer: I mean to have the columns feed each other on the
visible part of the page. The down-scroll would add fresh content to the
bottom the right column and lose content off the top of the left column.
The text on the upper right column would scroll over to the bottom of
the left column.
I suppose it could be done in Flash.

 

[Chris Beall]

After reading about text line length
http://psychology.wichita.edu/surl/usabilitynews/72/columns.htm , I'm
thinking about experimenting with columns of text on a page.

Is it possible on an HTML page to
have 2 columns of text where the text of one column flows to the next on
the visible part of the page, and
scrolling treats the 2 columns like the bottom of the right column is
connected to the top of the left column? Scrolling down brings new text
up from off the visible page to the bottom of the right column (just
like on a regular page), but scrolling down makes the text on the top of
the right column move to the bottom of the left column. The text
disappears off the visible page going up and off from the top of the
left column.

Is there any way to do this with some dynamic HTML method? Perhaps there
is a way to use 2 frames where scrolling in one affects the other?

Or is there a possible JavaScript way of doing this?

Nehmo,

Perhaps it's just my mood, but I find it amusing that the study you cite
is written using a single column format and is styled in such a way that
reducing the window width creates a horizontal scroll bar rather than
reflowing the text into the available width (which would shorten the lines).

The New York Times site used to have a really spiffy way of doing what
you want: 1, 2 or 3 columns, selected by window size or user option,
font sizing. Godawful complex. Apparently they thought so too, 'cause
I can't find an example anymore.

Try adding this to your CSS:

p {max-width: 30em ; }

(Won't work on IE, but not much does)

Expect to hear complaints about taking control of the user's environment
by not letting your lines flow clear across their 1600px window...

I thought the most important sentence in the study was in the
conclusion: "The results of this study suggest that there is not one
best way to present text online."

Chris Beall

 

[Dr John Stockton]

JRS: In article <[email protected]>, dated
Mon, 6 Feb 2006 21:23:10 remote, seen in

- Toby Inkster

Nehmo -
To be a litle clearer:

There was no need to be clearer; you explained it perfectly well, but
received a knee-jerk reaction from one who had not considered the rest
of what you wrote.

And you explained that it would be a psychology experiment, which
implies that there is no need to consider existing custom.

I mean to have the columns feed each other on the
visible part of the page. The down-scroll would add fresh content to the
bottom the right column and lose content off the top of the left column.
The text on the upper right column would scroll over to the bottom of
the left column.

My screen is wider than it is deep; but my windows are, like most
printed paper, deeper than they are wide. So I can see that, with a
full-screen browser, it would seem good to have columns; and that the
material could usefully scroll as you suggest. It would take getting
used to, since sheets of paper don't scroll (books used to scroll, of
course, millennia ago; but not in parallel columns).

You might consider three columns, with the "current focus" being in the
centre of the middle one, giving the ability to glance ahead/back 1.5
"pages".

I don't know how you'd do a special scroll bar[*], but forward and back
buttons would be easy.

You could certainly use CSS or a Table to provide the 2/3 "page"s, and
compute the text that goes in them at any one time (see FAQ 4.15). The
whole content could I think be supplied in a DIV display:none.


BUT NOTE : I don't want "text" sites to take up more than half the
screen width; I'd resent obligatory or narrow columns.


[*] Try a textarea, one column wide, full of newlines, if javascript can
deduce the thumb position, to get a scrollbar.