11 Scrolling all over the place

Let the up and down scrolling commence!

Quite. Let’s have no more of that, thank you very much. It’s bad enough when someone is lazy and uploads a multi-column PDF for screen reading, but anyone deliberately choose such a layout deserves a good smack!

Yes, I can see the benefits for multi-column layouts for short passages or lists, as in the other article this month, and in print stylesheets – but please don’t encourage people to use multi-column “just because they can”. The example pages you’ve given in this article not only require vertical scrolling, but horizontal scrolling as well on my PC – a bad, bad, bad idea.

posted at 09:45 am on September 27, 2005 by Stephen Down

12 Good article

I found this article quite interesting. I agree with C R’s comment that if we intend to have 8 to 12 words on a line, then the ‘best’ way of saying how wide a column should be is by choosing the number of words desired. Of course, technically this would be very difficult: how wide is a word? How wide are 8 words? Should each column be the same size? I think this would prove difficult to standardize. Certainly when reading a newspaper you don’t want to see every column with a different width, based on the average number of words per line in that column! So I agree in principle, but in practice I think this would prove too unwieldy for those defining the standards, those writing the browsers and those designing websites to use succesfully.

I decided to download the Firefox 1.5 beta in order to see how Gecko would display Kevin’s example pages . However after turning off JavaScript in Firefox the pages do not display columns at all but render as one big block of text. I tried the Mozilla test page cited in the article to see if that would render with columns and it did.

Is this a mistake on my part, or is this a known “feature” of the script?

posted at 10:47 am on September 27, 2005 by Paul Boxley

13 Another Take

I’m really glad to see a great artical addressing the problems of line length, scrolling, and space utilization; thanks for the excellent work, Cedric.

In case anyone is interested, I have another take on these same problems .

By the way, I noticed that when ordered lists get split across columns, the numbering gets reset to (1) in the second column in Safari (this is something I had to deal with in my approach too).

posted at 04:20 pm on September 27, 2005 by Sumul Shah

15 Nice Article!

Thanks for posting this interesting article and keep bringing more CSS3 goodies. Personally I didn’t know Firefox 1.5 beta supported CSS3 features already…

Gonna start playing with it.

posted at 07:48 pm on September 27, 2005 by Allan Rojas

16 Auto column counts

The CSS3 module does allow you to specify a column width and leave column count as “auto”. In this case, the number of columns used will be determined by dividing the total element size by the column width. CSS doesn’t have a “number of words” unit, but “em” should be sufficient to provide a consistent width even with page scaling.

If you’re trying to use Firefox 1.5 to play with column layouts, remember to use “moz“ before all attributes. The policy over at Mozilla is to prepend attribute names with “moz“ if they’re not yet a recommendation.

posted at 11:18 pm on September 27, 2005 by Byron Ellacott

17 Very useful

I found it very useful to use this technique even on screen maybe it is not familiar yet but I think it will be great the only concern is to make sure that the columns height are not more than the browser height to avoid scrolling up & down more than one time.

Thanks.

posted at 02:47 am on September 28, 2005 by Abdelrahman Osama

18 Fantastic for print... if only

This article appeared just as I’ve been working on trying to flow two columns for a print stylesheet. For a few moments I thought that you were going to save me a lot of trouble with the JavaScript, but unfortunately it doesn’t work. The columns run the length of the whole article rather than just the length of a printed page. Drat. I suppose that finding the pagebreaks will be a real PITA, but since the browser can do it on the fly hopefully when the browsers implement this internally it will work.

Thanks for the neato preview in any case.

posted at 05:42 am on September 28, 2005 by Mark Jaroski

19 what about typography?

Real support for columns of content is one of the sexiest new things I can think of, but here’s a couple of thoughts –

What about orphans (sentence fragments left over from paragraphs in previous columns) and hyphenated words? There should be properties for that as well… allow or disallow, tolerance levels, that sort of thing.

Also – what if you don’t want the content to flow from one column to the next? And if anyone says, “That’s what tables / extra divs are for,” they get shot – both of those are substitutes for an actual solution.

posted at 08:04 am on September 28, 2005 by matt lohkamp

20 About the scrollin factor...

Honestly, I know it’s a cliche when someone comments in a manner of “I’ve been thinking of this myself…”. But, I have, because I am working on a new newspaper style portal design, and I want to transfer as much of the newspaper elements I can without affecting usability and design logic. I intended to use at least 2 columns of text in eac article display because I hate scrolling a long way down, in a single column layout, when the layout is fixed width. I don’t actually mind the scrolling, but the fact that I have to go back up again to reach navigation. (position: fixed; and such things are rare in this kind of sites)
I originally intended to create some sort of a php function to divide my text to columns, but then the images would be a problem and so on. Thank You Cédric Savarese, for You have saved me a lot of time with this.

Now, as for the up-down, left-right scrolling, I see a possible solution in seperating the content, not just into columns, but also verticaly. This way, we would have colums that have, at most, height around 70-80% of the viewport. This way, the scrolling would go only “downwards”. And you would not have to scroll often. Ofcourse, the problem of implementation still remains, but, it doesn’t seem imposible. Does it?

posted at 05:05 pm on September 28, 2005 by Tomislav Glavas