CSS Columns and Hyphenation

Whilst I generally do not condone making websites look like newspapers there are in fact some instances where columns with justification do look kind of nice¹ and there are lots of people who seem to like it. Some time ago I had to do a site with columns at work and was delighted to learn columns and hyphenation can, in theory, be done with CSS alone. Unfortunately not all browser suppot those features yet. I’ll first describe how one would do this with CSS alone and then we’ll use JavaScript to help the older browsers out.

CSS Only

Let’s for example take this piece of HTML:

<p class="text-justify hyphens three-columns"><!-- some text --></p>

As you can see my paragraph has three CSS classes. The first one just justifies the text:

.text-justify {
  text-align: justify
}

The next one makes sure there is hyphenation in as much browsers as possible:

.hyphens {
  -ms-word-break: break-all;
  word-break: break-all;

  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
}

With the last one I tell the browser to segment the paragraph in three columns and define the gap between those columns:

.three-columns {
  -moz-column-count: 3;    /* Firefox */
  -webkit-column-count: 3;    /* Safari and Chrome */
  column-count: 3;
  -moz-column-gap: 30px; /* Firefox */
  -webkit-column-gap: 30px; /* Safari and Chrome */
  column-gap: 30px;
}

In a perfect world this would be all one needed to do but Opera doesn’t support hyphenation and IE9 or earlier neither supports columns nor hyphenation.

JavaScript to the Rescue

Let’s start with the hyphenation. Hyphenator.js is a script that can do the hyphenation for you. It offers an mergeAndPack-Tool where you can click together the languages and settings for you’re site and get a minified script. To get it running with our HTML you have to specify hyphens as the classname under Element Selection. Now create the scrip, just copy and paste it into a new text-file and give it the name hyphenate.js and include it in your website:

<script src="hyphenate.js" type="text/javascript"></script>

That’s pretty much all you have to do to get it running but I’d do one more thing. Almost at the end of the script you can find the bit Hyphenator.config({classname:'hyphens'});. Change that to Hyphenator.config({classname:'hyphens',useCSS3hyphenation:true});. This tells the script to let the browser do the hyphenation via CSS if it is able, which is faster then doing it with JavaScript. With this in place you can safely remove the CSS for the class hyphens. The script will do that for you now.

All that’s left is the columns in IE9 or earlier. For that we’ll use the jQuery plugin Columnizer. Since IE supports conditional comments, we’ll use this to load the script only in the browsers we need to:

<!--[if lte IE 9]>
<script src="jquery.columnizer.js" type="text/javascript"></script>
<script>
  $(function(){
    $('.three-columns').columnize({columns: 3});
  });
</script>
<![endif]-->

With this only IE’s that are 9 or earlier will load the content and all other browser will think it’s just a comment.

That’s it. Now you should be set for pretty much all the recent browsers that are still being used.