Splitting Content into Two Columns, e.g. Word Wrap with PHP or CSS + Javascript

Over the last couple days I’ve had the dilemma of trying to figure out how to word-wrap WordPress post content into two columns. Here is an example of what I needed to produce.

Double columns

As you can tell it shouldn’t be too difficult, but there’s a crux that I’ll bring up after the first solution.

The first solution that will use CSS3 column-count;  and some js for that browser we all hate ( IE if you couldn’t tell ).

For Firefox and Webkit browsers ( chrome and safari ) it’s as easy as this:

#container {
text-align: justify;
width: 885px;
margin: 10px auto;
padding: 10px;
}
.columns {
-moz-column-count: 2;
-moz-column-gap: 1.5em;
-moz-column-rule: none;
-webkit-column-count: 2;
-webkit-column-gap: 1.5em;
-webkit-column-rule: none;
/* future proof */
column-count: 2;
column-gap: 1.5em;
column-rule: none;
}

Then for IE there’s a great script that will parse through your CSS and force IE to split the content up into two columns. Here’s a demo of the script in action. You should be able to figure out how to implement it from there, it’s pretty easy.

[note: just make sure that you don't have your style sheets on a different domain, otherwise the script will not be able to parse it. I ran into this because of how I have my local wp dev setup]

Now this solution will solve just about 99% of anyones needs. However, if you wanted to print that same page you’re at a lose, the columns will break down.

Here comes my second solution, the one that I’m using on the current project.

The below function will essentially figure out where the middle of the content is, then insert your separation code in-between.

function content_split($text, $separator = '<hr/>', $start = false ) {

if ( $start === false) {
$start = strlen($text) / 2;
}

$lastSpace = false;
$split = substr($text, 0, $start - 1);

// if the text is split at a good breaking point already.
if (in_array(substr($text, $start - 1, 1), array(' ', '.', '!', '?'))) {

$split .= substr($text, $start, 1);
// Calculate when we should start the split
$trueStart = strlen($split);

// find a good point to break the text.
} else {

$split = substr($split, 0, $start - strlen($separator));
$lastSpace = strrpos($split, ' ');

if ($lastSpace !== false) {
$split = substr($split, 0, $lastSpace);
}

if (in_array(substr($split, -1, 1), array(','))) {
$split = substr($split, 0, -1);
}

// Calculate when we should start the split
$trueStart = strlen($split);
}
//now we know when to split the text
return substr_replace($text, $separator, $trueStart, 0);

}

[props to this function which helped me through]

And to implement it into WordPress just place the above function in your functions.php file, then just use the function anywhere you’d like and pass the appropriate vars:

<div class="first-column column">
<?php
$text = get_the_content();
$separator = '</div><div class="second-column column">';
echo content_split($text,$separator);
?>
</div>

My CSS is basic after that:

.column {
float: left;
width: 430px;
clear: right;
}
.first-column {
margin-right: 20px;
}

Now I can print the page exactly how it looks on the web ( maybe with a little print.css love ).