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

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse imperdiet, erat quis tempus euismod, mi quam faucibus nibh, ac ullamcorper erat velit in nisl. In eget elit. Sed pede quam, eleifend facilisis, lobortis a, sagittis non, eros. Aliquam erat volutpat.

Praesent mauris magna, laoreet id, venenatis in, suscipit vitae, nisl. Aenean rutrum convallis nunc. Suspendisse pharetra placerat felis. In eget ipsum pretium nunc dignissim aliquet. Nulla ligula. Sed nulla lorem, dapibus in, malesuada sed, ultrices id, nunc.

Proin feugiat neque a orci. In hac habitasse platea dictumst. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer nec dolor id neque aliquet mattis. Mauris leo eros, elementum eget, varius ultricies, vehicula non, lorem. Nam eget neque id lacus imperdiet tincidunt. Aliquam eu augue.

Faking Two Column Text was written by

Comments

The opinions expressed in comments are entirely the responsibility of the various contributors. While I will do everything within reason to ensure that they are not defamatory, I accept no liability for them or the content of links included in them.

(#2668)

download link doesn’t wotk.. then whats the point in giving the link? :(

Related Posts