jQuery.column

jQuery.column

I love text. I’m not talking about reading or writing, but everything surrounding it; fonts, styling and layout. Luckily HTML and CSS offer a wide range of tools to handle all this. HTML5 and CSS3 even more so with the excellent (though somewhat limited) support for columnization.

Columni-what?

Columnization, or the act of taking a large chunk of text (and pictures, lists, tables or any type of content, really) and evenly distributing it over multiple columns.Doing this improves readability of the text by making lines shorter. Not only does this look far less daunting than a large blob of characters, it’s so a lot quicker for the eye to scan, less likely to get you ‘lost’ and adds some visually attractive white space.This example right here is a hand-made table rather than real columnization, but you get the drift.

There is one minor problem with CSS3 column support though; Internet Explorer doesn’t support it, not even IE9. All other major browsers support it either using their customary ‘-o-‘, ‘-moz-‘ and ‘-webkit-‘ prefixes or the proposed syntax but the browser that is still (regretably) most used does not.

But with a bit of jQuery we can come a long way to supporting columnization ourselves.
And this is where my new jQuery.column plugin comes into play. It provides a simple syntax to simulate CSS3 column support, using familiar names and behaviour as close to actual CSS3 support as possible (using Chrome to verify similarity).

Support isn’t perfect though; for a starter this is still a young plugin. It works great for plain text with some minor portions of other content thrown in. In fact it sometimes produces better results than Chrome’s CSS3 column implementation. But it also lacks many interresting things like being able to break up large lists or paragraphs, removing top- and bottom margins at the top and bottom of columns.

I’m working on fixing some of these and others. I’d also like to have it automatically switch to using actual CSS3 styling if it detects a capable browser. And there are some other things possible that could improve column support beyond what CSS3 is capable of, so that would be interresting to do. In it’s current state however, it’s suitable for real-life use.

Get it (the code, documentation and a demo) here: jQuery.column