Recently I have been researching different aspects of web development, including ways of presenting textual information, be it news, articles, or any other text. One idea that intrigued me was using columns to make reading text easier.

This is certainly not anything new, newspapers have been doing it for years. But it is a little trickier to implement in a browser, especially if a dynamic number of columns is desired for any piece of text. Floated divs are usually used, but that requires processing the text with the height and width known beforehand. I wanted a way to do it with just HTML and CSS.

Fortunately, CSS3 includes specifications for creating columns in a div: just set the column-width, column-gap, and/or the column-rule and you're set, the text will automatically create the necessary columns with the specified width and gap. Both Safari and Firefox support these rules (with the -webkit- and -moz- prefixes), as well as the iPad and iPhone.

One thing I wanted to accomplish was to have text in columns only as tall as the window and extending beyond the window to the right, similar to Tofu, an application for the mac. Doing this was fairly simple, I just set the column rules on the text container and setting the max-height to 100%. Getting some padding around the text was much harder. For some reason, the padding on the container only effects the first column, the others were unaffected. I eventually just put two empty divs before and after the container with their height set to 2% and the container's max-height to 96%. That did the trick and now I had some beautiful columns extending to the right of the window. Here is a screenshot of the page in Safari:

Columns in Safari

If you are using Safari or Firefox, you can view the page here. I really enjoy working on these kinds of things, especially with the end results! Hopefully I will get to use something like this for a real project, it is quite a nice effect.