EDIT: This is completely outdated and irrelevant today, as we now have smart CSS multicolumn solutions making this question from 2011 obsolete.
Happy when I found css3/Mozillas multiple text column option, BUT source1 & source2 prove that IE9, the most popular browser as of jan 2011, will NOT support multi-column css3! BUMMER!
Currently I use a tedious workflow, namely divide text manually into three divs that float to left. As you can imagine, this is a pain in the ass, since I have to reflow everything over and over until I get it right. Positive note: manual control of paragraph beginnings and endings!
<div id="CLMN1"><p>Text1</p></div>
<div id="CLMN2"><p>Text2</p></div>
<div id="CLMN3"><p>Text3</p></div>
Question what are the solutions to smartly flow text into multiple columns, while having only one undivided <p>text1 Text2 Text3</p> as input? Perhaps you already know a solution, or can suggest/sketch how you would share here with me? Any kind of inspiration is welcome, even seemingly off-topic images of newspaper layouts, since the entire purpose of this topic, obviously, is to be able to read pages more easily/beautifully.
Thanks!
I once had the same problem and didn't know about css3's multi-column support.
What I did was:
Javascript implementation:
var text=document.getElementById('text').innerHTML;
var words=text.split(" ");
var wordc=words.length;
var length=text.length;
var cols= new Array("","","");
var colc= new Array(0,0,0);
var col=0;
for(var i=0; i<wordc; i++){
cols[col]+=words[i]+" ";
if( (colc[col]+=words[i].length)>length/3)col++;
}
document.getElementById('text').innerHTML="<p>"+cols[0]+"</p><p>"+cols[1]+"</p><p>"+cols[2]+"</p>";
Try it on a (now updated) fiddle!
But note: this is a very simple implementation and does not look that nice. Especially for short articles you will have the problem of different column-heights because you do not check the letters width!