Faking Two Column Text

One of the many exciting features of CSS 3 is the ability to create columnar text. In this article I will show you a way to fake two column text with a little Javascript.

First off we need to stipulate that this hack will only work with textual information contained in HTML paragraph tags (<p></p>).

To use the script all you need to do is download the script and include it in the head of your document.

<script type="text/javascript" src="two-col.js"></script>

To designate which text will be columnar we will put it in a layer with an id attribute of “two-col” like below. And that’s all you need to do to use the script.

<div id="two-col">
    <p>The information here will be displayed as two columns.
    This will be the first of two Paragraphs</p>
    <p>Here is the second paragraph in our columnar
    data.</p>
</div>

The Script And The Problems

The script works by grabbing all the HTML inside the “two-col” element and splitting into an array, by spaces, using javascripts built in split function. Then we loop through our new array and place half the words in the left column and the other half in the right column. Of coarse splitting the HTML in half causes a few problems.

First, if a tag is located in the middle of the data, it can split that tag in two. This is quite bad but can be overcome by formatting the content so it doesn’t occur. Maybe in a latter version of the script I’ll try to address this problem.

Second, because we are spiltting the content into two, we end up spiltting a paragraph into two paragraphs, creating a new paragraph out of part of the original. This is unfortunate but necessary for proper styling with CSS.

But if everything works right we get our two column text.

Example of Two Column Text