How to Program for Multiple Text Column Layout? So that Text Flows into Multiple Columns!

Problem

was happy when 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 stupid 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!

Problem courtesy of: Sam

Solution

I once had the same problem and didn't know about css3's multi-column support.

What I did was:

  • counting the letters,
  • dividing the string into three
  • pulling the trailing word-stubs I produced into the next column

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!

Solution courtesy of: Simon

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.