Judgments on usefulness aside, I find it humorous that so many Web publishers are longing for a way to easily display content flowing across multiple columns, while at the same time that newspaper publishers are dreaming of pushing content on electronic paper in single, scrolling columns.
I would have enjoyed reading a summary of your script’s columnizing logic. From looking at the DOM of a test case it’s apparent that you’re dividing the text block into a series of divs, one per column. When a paragraph is split across columns, you’re inserting an empty span at the bottom of the first column to force that last line to justify. I’ll read your script to see what other rules you’re implementing.
One point in your line-breaking logic to repair: in your “Test Case 2”:http://www.csscripting.com/css-multi-column/example2.php the last line of column 1 is broken before the comma:
Construction of the RMS <i>Titanic</*i*>
, funded by the American…
—perhaps the comma isn’t considered part of the preceding word because of the intervening HTML close-tag.
Seeing how unsightly justified text looks in narrow columns brings to mind the various tools & rules that typographers use to eliminate rivers of whitespace when setting justified text, such as breaking hyphenated words across lines and implementing discretionary hyphens, things you might consider including in the scope of your columnizing script if it’s to be useful professionally. I look forward to seeing future renditions!
Copy & paste the code below to embed this comment.
Kristian Kjærgaard
Columns can be very usefull. Many pages of quality would be better with text in columns.
But it will be a problem, if a column is higher than the viewport.
makes it impossible to use it offline via the file: protocol with gecko based browsers (tested with Firefox 1.0.7) as the returned xmlhttp.status is 0;
I used [nbsp][nbsp][nbsp][line break] to format code, as <pre> or <code> is not allowed: it renders well in the preview, obviously it doesn’t on submit… don’t know what to do – I uploaded my msg “here”:http://msg.byteshift.de/css3-multi-columns-by-js/
The technique here is good and I thought the article was quite interesting. It’s experimental, but I can see it being very useful for print CSS specifically.
I would only suggest we think very hard before using it on screen.
I always thought columnar layout was appealing purely because it was difficult to achieve in a ‘proper’ way. Making it simple removes the appeal of using entirely for me. I certainly dislike it from a user’s perspective.
After fidling for a couple of weeks with the idea of a columnar layout with a CMS like Textpattern, you come around and make something that works wonderfully. My only question is… Why couldn’t you do it earlier!
Seriously though, thanks. I thought my head was going to explode.
Paul, the tools and information available in javascript to deal with line length and word separation are rather limited. This makes the column breaking logic a real headache. Basicaly, the scripts removes words after words until the column reach the desired height. The comma should be considered part of the word, but as you noticed the markup in between breaks the logic here… It’s probably something that can be dealt with in the script though.
Copy & paste the code below to embed this comment.
Mike Griffin
Hey Cedric,
Nice work and thanks for the examples. I have one questions since I’m already using Dean Edwards latest IE7 scripts to enhance the native css support in IE. Would you be able to recommend an approach to providing your css3 enhancements as an additional module that could be loaded along with his css3 module? It looks like you base your functionality in part on his cssquery which IE7 also does. Seems like it should be possible to separate out the css3 enhancements so cssquery is common and this would be an extension to the IE7 project. That would be really handy. Any ideas would be appreciated. Again nice work.
Copy & paste the code below to embed this comment.
Edward Yang
I noticed that the script does the DOM wizardry by creating extra DIVs given random six letter combinations (like “ufsvmb”). I suppose making them a bit more meaningful would be helpful (besides, what about the unlikely event of a collision, eh?)
Personally, I think that columns will open up the way to more paged forms of web presentation: splitting content up into several pages (something that personally irks me). The thing about doing that is that it makes things a bit easier when you want to bookmark, but I prefer my scrolling to your page turning any day.
i find the multi column idea very good. i would really appreciate it if someone could post some templates or example easy to integrate. Perhaps i can include them on my “css”:http://www.mycelly.com site …
Fred, send me a link to your page, I’ll check it out (c.savarese at 4213miles.com).
Regarding the randomly generated id, they’re intended for internal use only, but it’s true that if you want to apply some css to one of the column only, a predictable id would be better.
Mike, I use Dean Edwards’s CSSQuery, but I’m not familiar with the way IE7 works… we can talk about it further if you want. Email me.
I am a cross-over from print design (magazines & junk-mail) – so hearing about this just gave me shivers! Imagine!!!!! A page that reads like a magazine—REALLY!
One thing that does concern me is the scrolling. I have made sites that keep the scrolling to a minimum, and am going to be experimenting with CSS to see if I can do the same.
Oh… THANKYOU for the Suckerfish Dropdown! Doing Velocity templates with drop menus was a real challenge until I found your tutorial! Now I have more time to experiment rather than debug!
I would really, really like both a column-height property, and not least a column-max-height property, last one making it possible to set the max-height of the columns (surprise!). If the content then overflows the columns, there should be created ‘more columns’ vertically.
That would actually be useful for something, quite contrary to what you achieve in Firefox 1.5 (RC1), when setting the height property on the ‘column-element’, giving you more columns horizontally (which is an understandable behaviour though, as it’s height, not column-height).
Copy & paste the code below to embed this comment.
Ed Jannoo
I think this is a great way to make large amounts of text more readable (subject to the columns not being longer than the length of the viewport, of course). I’m definitely considering using it on a new website I’m just starting work on.
One quirk I’ve noticed though is that the text in the first column has some whitespace above it, whereas the others do not which throws off the alignment of the text lines. This is readily visible in Test Case 5.
Copy & paste the code below to embed this comment.
Sara M
My first column ends in the middle of bullet number 4 and is continued in the second column; it is renumbered as bullet 3. And again, the second column ends in the middle of bullet number 6, yet is reassigned bullet number 3 in the third column.
I publish my blog through blogger. I added the articall class to my linked css stylesheet. I then added the script below the link to my stylesheet. Then added a <div class=“article”> div around my post. Still no worky. www.ksauce.com Let me know if you know why. kurt.potts@gmail.com
Copy & paste the code below to embed this comment.
Monte Gardner
I remember wishing that CSS could do something just like this. I think if the major browsers will impelement this in a reliable fashion, then it will increase the rate at which designers drop their nested tables in favor of semantic markup.
Copy & paste the code below to embed this comment.
Mark Beadle
It is my opinion that until all browsers support CSS3 web development will have to stick to calculating split points via scripts, either server side (e.g php) or client side (e.g. javascript solutions as shown).
With the article script and indeed with the CSS3, what is really required is the abilty to set any element as no_break_within.
Using the javascript supplied you can fool the javascript with
‘<span><ul class=“adlist”><li><img >text</li></ul></span>’
to keep the text together. Unfortunately the side effect is that the last column tends to be the longest (at a guess the split point is set to the beginning of one of the elements).
What is really required is if classname=“nobreak” or somesuch the split point becomes the end of the element.
Another niggle which is required to be truly successful is orphan and widow controls although I fully realise the complexity this could cause.
First, 8 to 12 words per line is NOT the “ideal” or even magical number. It actually depends on a few variables – the entire length of the column, the point size of the type, etc. There is a technical and mathematical way of determining proper word count on a line…but I digress.
My point here is that this feature is potentially very valuable. It must be used in moderation though. Usability concerns arrise as well. One major difference between print and web, is that a web browser scrolls. BUT I have hopes for this and hope it will become more of a standard in the future. Even if a bunch of junk comes from it, it merely helps sort out good design from bad… though I should be careful with a wish like that, people start to forget good design :( Anyway, nice article and let’s keep our fingers crossed.
I have an unordered list I needed to dynamically break into 2 columns. This solution works almost beautifully. While it does split the unordered list into two columns it breaks the href tag on the first entry of the 2nd column leaving that particular item unlinked.
I’ve implemented the basic CSS3 multi-column functionality in a “template for the Serendipity blog engine (Serendipity themes)”:http://themes.daves.me.uk. It’s imaginatively called ‘Multi-column’ and of course it only works currently in Firefox. I could implement a javascript solution for other browsers until they deign to support multiple columns. As all the content is generated dynamically, I’ve only used column-gap and column-count but it seems to work well
Copy & paste the code below to embed this comment.
linda porsius
In the example test case 6 on this site you can see that the list item which goes to the top of the next column, does not work as a hyperlink.
I am trying to use the script to do a very similar thing, and it does not work on my site either.
I hope you can fix this, since I would like to use the script very much.
53 Reader Comments
Back to the ArticleJason Greene
Judgments on usefulness aside, I find it humorous that so many Web publishers are longing for a way to easily display content flowing across multiple columns, while at the same time that newspaper publishers are dreaming of pushing content on electronic paper in single, scrolling columns.
eric demay
Should there be a column height limit as well, to prevent any up and down scrolling?
Paul Novitski
Good work, Cédric. Thanks for bringing attention to the CSS3 multi-column implementations in today’s browsers!
I would have enjoyed reading a summary of your script’s columnizing logic. From looking at the DOM of a test case it’s apparent that you’re dividing the text block into a series of divs, one per column. When a paragraph is split across columns, you’re inserting an empty span at the bottom of the first column to force that last line to justify. I’ll read your script to see what other rules you’re implementing.
One point in your line-breaking logic to repair: in your “Test Case 2”:http://www.csscripting.com/css-multi-column/example2.php the last line of column 1 is broken before the comma:
Construction of the RMS <i>Titanic</*i*>
, funded by the American…
—perhaps the comma isn’t considered part of the preceding word because of the intervening HTML close-tag.
Seeing how unsightly justified text looks in narrow columns brings to mind the various tools & rules that typographers use to eliminate rivers of whitespace when setting justified text, such as breaking hyphenated words across lines and implementing discretionary hyphens, things you might consider including in the scope of your columnizing script if it’s to be useful professionally. I look forward to seeing future renditions!
Kristian Kjærgaard
Columns can be very usefull. Many pages of quality would be better with text in columns.
But it will be a problem, if a column is higher than the viewport.
Anyway, the article is rather good.
Marek Möhling
Line 83 (function loadCssCache) of the file above:
if(typeof xmlhttp.status ‘undefined’ ||
xmlhttp.status 200 ||
xmlhttp.status == 304
)
makes it impossible to use it offline via the file: protocol with gecko based browsers (tested with Firefox 1.0.7) as the returned xmlhttp.status is 0;
Fix:
if(typeof xmlhttp.status ‘undefined’ ||
!xmlhttp.status ||
xmlhttp.status 200 ||
xmlhttp.status == 304
)
Marek Möhling
I used [nbsp][nbsp][nbsp][line break] to format code, as <pre> or <code> is not allowed: it renders well in the preview, obviously it doesn’t on submit… don’t know what to do – I uploaded my msg “here”:http://msg.byteshift.de/css3-multi-columns-by-js/
Marek Möhling
Note to the editors: the post above rendered differently too in preview. You may want to make my first post readable and delete the rest.
Nick Olejniczak
The technique here is good and I thought the article was quite interesting. It’s experimental, but I can see it being very useful for print CSS specifically.
I would only suggest we think very hard before using it on screen.
Jon Dowland
I always thought columnar layout was appealing purely because it was difficult to achieve in a ‘proper’ way. Making it simple removes the appeal of using entirely for me. I certainly dislike it from a user’s perspective.
Brandon Erik Bertelsen
After fidling for a couple of weeks with the idea of a columnar layout with a CMS like Textpattern, you come around and make something that works wonderfully. My only question is… Why couldn’t you do it earlier!
Seriously though, thanks. I thought my head was going to explode.
Cedric Savarese
Marek, good catch. Thanks for the correction.
Paul, the tools and information available in javascript to deal with line length and word separation are rather limited. This makes the column breaking logic a real headache. Basicaly, the scripts removes words after words until the column reach the desired height. The comma should be considered part of the word, but as you noticed the markup in between breaks the logic here… It’s probably something that can be dealt with in the script though.
Mike Griffin
Hey Cedric,
Nice work and thanks for the examples. I have one questions since I’m already using Dean Edwards latest IE7 scripts to enhance the native css support in IE. Would you be able to recommend an approach to providing your css3 enhancements as an additional module that could be loaded along with his css3 module? It looks like you base your functionality in part on his cssquery which IE7 also does. Seems like it should be possible to separate out the css3 enhancements so cssquery is common and this would be an extension to the IE7 project. That would be really handy. Any ideas would be appreciated. Again nice work.
Mike
Edward Yang
I noticed that the script does the DOM wizardry by creating extra DIVs given random six letter combinations (like “ufsvmb”). I suppose making them a bit more meaningful would be helpful (besides, what about the unlikely event of a collision, eh?)
Personally, I think that columns will open up the way to more paged forms of web presentation: splitting content up into several pages (something that personally irks me). The thing about doing that is that it makes things a bit easier when you want to bookmark, but I prefer my scrolling to your page turning any day.
Wohnung Mieten
i find the multi column idea very good. i would really appreciate it if someone could post some templates or example easy to integrate. Perhaps i can include them on my “css”:http://www.mycelly.com site …
Fred Kylander
Thanks for the article Cédric, I’m finding it very useful in a current project. But I’ve run into a problem where your script seems to clash with at least one other script I’m using. I have a script in place that allows me to unobtrusively send external links to new windows. This script stops working with the multi-column script in place. If I rearrange the order, placing the external.js script last, the multi-column script stops working. I’m not script-informed (graphic designer with almost no coding abilities, sorry) so if there’s a way around the problem I’d be happy to here about it. (Otherwise I’ll have to skip one of the scripts, with a sigh and a tear, possibly.)
Tobias Butler
I want to try out a horizontal blog using this… I think it would probably be a nice break from normal vertical pages.
Kevin Airgid
Hey, just wrote an article about how Flash designers and CSS Purists are similar here:
http://www.flash99good.com/?p=85
thought folks here might be interest?? duno?
cheers,
Cedric Savarese
Fred, send me a link to your page, I’ll check it out (c.savarese at 4213miles.com).
Regarding the randomly generated id, they’re intended for internal use only, but it’s true that if you want to apply some css to one of the column only, a predictable id would be better.
Mike, I use Dean Edwards’s CSSQuery, but I’m not familiar with the way IE7 works… we can talk about it further if you want. Email me.
Thanks
Mike Stone
The message title says it all!
Less Zoa
I am a cross-over from print design (magazines & junk-mail) – so hearing about this just gave me shivers! Imagine!!!!! A page that reads like a magazine—REALLY!
One thing that does concern me is the scrolling. I have made sites that keep the scrolling to a minimum, and am going to be experimenting with CSS to see if I can do the same.
Oh… THANK YOU for the Suckerfish Dropdown! Doing Velocity templates with drop menus was a real challenge until I found your tutorial! Now I have more time to experiment rather than debug!
Aloha nui!
LZ.designer
Allan Rasmussen
I would really, really like both a column-height property, and not least a column-max-height property, last one making it possible to set the max-height of the columns (surprise!). If the content then overflows the columns, there should be created ‘more columns’ vertically.
That would actually be useful for something, quite contrary to what you achieve in Firefox 1.5 (RC1), when setting the height property on the ‘column-element’, giving you more columns horizontally (which is an understandable behaviour though, as it’s height, not column-height).
Neil Kelty
I just thought it was ironic how the following line was placed into the article, yet the line after it had 14 words:
On, a more serious note, great insight, but will we really be able to use CSS3 for some time?
Ed Jannoo
I think this is a great way to make large amounts of text more readable (subject to the columns not being longer than the length of the viewport, of course). I’m definitely considering using it on a new website I’m just starting work on.
One quirk I’ve noticed though is that the text in the first column has some whitespace above it, whereas the others do not which throws off the alignment of the text lines. This is readily visible in Test Case 5.
Any way of sorting this out?
Sara M
My first column ends in the middle of bullet number 4 and is continued in the second column; it is renumbered as bullet 3. And again, the second column ends in the middle of bullet number 6, yet is reassigned bullet number 3 in the third column.
Quite unexpected, indeed.
Kurt Potts
I publish my blog through blogger. I added the articall class to my linked css stylesheet. I then added the script below the link to my stylesheet. Then added a <div class=“article”> div around my post. Still no worky. www.ksauce.com Let me know if you know why. kurt.potts@gmail.com
Monte Gardner
I remember wishing that CSS could do something just like this. I think if the major browsers will impelement this in a reliable fashion, then it will increase the rate at which designers drop their nested tables in favor of semantic markup.
Mark Beadle
It is my opinion that until all browsers support CSS3 web development will have to stick to calculating split points via scripts, either server side (e.g php) or client side (e.g. javascript solutions as shown).
With the article script and indeed with the CSS3, what is really required is the abilty to set any element as no_break_within.
Using the javascript supplied you can fool the javascript with
‘<span><ul class=“adlist”><li><img >text</li></ul></span>’
to keep the text together. Unfortunately the side effect is that the last column tends to be the longest (at a guess the split point is set to the beginning of one of the elements).
What is really required is if classname=“nobreak” or somesuch the split point becomes the end of the element.
Another niggle which is required to be truly successful is orphan and widow controls although I fully realise the complexity this could cause.
Thanks again for a useful article.
Christof Haemmerle
http://www.buero-newyork.com
Tom Maiaroto
First, 8 to 12 words per line is NOT the “ideal” or even magical number. It actually depends on a few variables – the entire length of the column, the point size of the type, etc. There is a technical and mathematical way of determining proper word count on a line…but I digress.
My point here is that this feature is potentially very valuable. It must be used in moderation though. Usability concerns arrise as well. One major difference between print and web, is that a web browser scrolls. BUT I have hopes for this and hope it will become more of a standard in the future. Even if a bunch of junk comes from it, it merely helps sort out good design from bad… though I should be careful with a wish like that, people start to forget good design :( Anyway, nice article and let’s keep our fingers crossed.
Robbie Edwards
I have an unordered list I needed to dynamically break into 2 columns. This solution works almost beautifully. While it does split the unordered list into two columns it breaks the href tag on the first entry of the 2nd column leaving that particular item unlinked.
Robbie Edwards
Fixed the issue. Line 26 contains the variable “splitableTags” – I removed ‘A’ from the list of HTML tags and all functions as it should now.
David Cummins
I’ve implemented the basic CSS3 multi-column functionality in a “template for the Serendipity blog engine (Serendipity themes)”:http://themes.daves.me.uk. It’s imaginatively called ‘Multi-column’ and of course it only works currently in Firefox. I could implement a javascript solution for other browsers until they deign to support multiple columns. As all the content is generated dynamically, I’ve only used column-gap and column-count but it seems to work well
linda porsius
In the example test case 6 on this site you can see that the list item which goes to the top of the next column, does not work as a hyperlink.
I am trying to use the script to do a very similar thing, and it does not work on my site either.
I hope you can fix this, since I would like to use the script very much.
Best regards,
Linda