CODEWITHSUNDEEP
phplayouttextcss
Sam
Sam

Reputation: 15506

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

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!

Upvotes: 0

Views: 577

Answers (2)

David Spector
David Spector

Reputation: 1671

I want the result to fit beautifully into any width device, so it is clear I have to use flexboxes. The layout should be pages, with each page fitting on the screen for easy reading. (The Page Up, Page Down, and some other events would have to be mapped to scroll smoothly by pages.)

The contents of the page should be as many fixed-width columns as will fit. So the layout is one or more vertical pages containing one or more horizontal boxes each. This layout is like a magazine, where each page contains one or more columns of flowing text.

While I've been successful in implementing this layout manually, fitting text into divs, I, too, would like an automatic layout, with hyphenation and line justification if possible, just as in a magazine.

The main problem for automatic layout is that it is almost impossible to use JavaScript (or, worse, PHP) to calculate the height and width of a line of text (and images and other elements). Reasons include: different sizes of character in each font, and of each glyph in a character. What I really need is a DOM function that, given a DOM subtree, returns its width and height without displaying anything. Then I could pack each piece of text into parent and child divs properly prior to display.

Experiments show that this process would be remarkably slow, probably due to the complexity of recalculating DOM subtrees many times during justification, and this slowdown is not helped enough by doing the packing via a binary search.

So automatic flowing layout might be possible, but only if the browser did it as part of the DOM generation. Only the browser can get easy access to all the information needed to do the calculations.

Until then, someday in the far future, manually fitting of text into parent and child divs will be necessary for easy-to-read text on any device width.

Upvotes: 0

Simon
Simon

Reputation: 4585

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!

Upvotes: 1

Related Questions