Matt Read, Weblog

Faking Two Column Text

2008-04-17T21:55:49-04:00

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.

]]>

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.

The information here will be displayed as two columns. This will be the first of two Paragraphs

Here is the second paragraph in our columnar data.

]]>

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.

One Hour DarkTip Special

2007-04-06T14:58:24-04:00

G4TechTV will be airing a one hour DarkTip special on Monday, August 16th from 7:00-8:00PM EST. Staring the DarkTip himself, Kevin Rose. Be sure to watch!

WordPress on Linux Journal

2007-04-06T14:58:24-04:00

Reuven M. Lerner has done up a review of WordPress for Linux Journal

Call for Help

2007-04-06T14:58:24-04:00

Call for Help is returning to G4TechTV Canada, on Monday, August 16th 2004 at 6:00pm EST. Leo Laporte has all the news about it.

Remove Spyware

2007-04-06T14:58:24-04:00

Kenneth has done up a list of spyware removal tools. A lot there that I have never heard of, take a look.

dr Dave's Mini Mix Pt. 6

2007-04-06T14:58:24-04:00

dr Dave just released his Mini Mix Pt. 6: Full Swing. Download it and have a listen.

Slip Sream Windows XP SP2

2007-04-06T14:58:24-04:00

NeoWin shows you how to Slip Sream Windows XP SP2 to have an up to date installation CD. Thanks to Kentville.

I Sold Out

2007-04-06T14:58:24-04:00

I sold out and added something special to my tweaks section.

NuclearMoose Chats With Matt Mullenweg

2007-04-06T14:58:24-04:00

Nuclear Moose had a small interview with Matt Mullenweg, creator and lead developer of WordPress , about the future of, and the release of, WP 1.3.

Winky Winky Bum Bum Poo

2007-04-06T14:58:24-04:00

I don’t know what to say but, check out this winky carton, you’ll like it! Link given to me by Randy Walker

Number One!

2007-04-06T14:58:24-04:00

Sweet, according to MSN Search, I’m the most important Matt Read in the world. I’m also the second most important Matt Read in world according to Yahoo!

Freakin Crazy Video

2007-04-06T14:58:24-04:00

I found this article on kevin rose dot com and thought it was freakin crazy video; 11may04jdamwsep.mpg and 11may04jdambda.mpg (right click and choose ‘save as’). And try watching in slow-motion, it’ll really knock your shorts off. It looks like the entire earth moved a bit.

Markdown 1.0

2007-04-06T14:58:23-04:00

PHP-Markdown 1.0 is out. Markdown is a WordPress Plugin, and more, which allows you to write using an easy-to-read, easy-to-write plain text format. Based on the original Perl version by John Gruber.

Mini Mix #7: Da Electro Shit

2007-04-06T14:58:23-04:00

dr Dave just release his new Mini Mix #7: Da Electro Shit. have a listen.

Driver Guide Password

2007-04-06T14:58:23-04:00

To log in to Driver Giude, use the following username and password.

USER NAME is: driver2
PASSWORD is: all

Call for Help is Back

2007-04-06T14:58:23-04:00

Call for Help is back on G4TechTV Canada. The first episode aired tonight at 6:00PM EST, and has a new website at callforhelptv.com. Welcome back Leo! :)

NoTitle.org

2007-04-06T14:58:23-04:00

cLin has started a new forum called, Untitled. So go and join the forum and join the rest of us and have fun and… HUH?

Building a Home with WP

2007-04-06T14:58:23-04:00

NuclearMoose has done up a easy to understand analogy of what the basic structure of a WordPress site is. This also applies to any web page on the net.

Random Insults

2007-04-06T14:58:22-04:00

Wanna tell that special someone something? Set their home page to the random insults page.

WP Admin Style

2007-04-06T14:58:22-04:00

Some Guy, let’s call him Randy for now, has done up Scrivs new style for the WordPress admin interface, and fixed all the problems, mostly. It’s beautiful!