Multiple Columns Bookmarklet

Posted on October 5th, 2007 in Bookmarklets by Patrick

Reading large chunks of text on a widescreen monitor can be a real pain if your eyes have to read across long horizontal lines. That's why newspapers print articles in columns! Ideally, websites should too, at least when you're trying to view them on a large monitor. Obviously you can't expect webpage designers to predict the size of your screen, but if you're using Firefox you can use this simple bookmarklet I wrote to reformat a selection of text (or the whole page) into multiple columns yourself.

How to use it the Multiple Columns Bookmarklet:
This is the link to my Multiple Columns Bookmarklet.

For starters, try it out yourself on this page! Select a few words in the first paragraph of this page and click the bookmarklet link. You should see it magically reformat into multiple columns 200px wide.

Now select two continuous paragraphs and click the bookmarklet link. You should see the entire article reformatted into easy to read columns. Cool huh?

If you want to use the bookmarklet on other pages, bookmark it now. When you're on a page that you want to reformat select the chunk of text and click on the bookmarklet. voila!

If you select text a single paragraph, only that paragraph will be turned into columns. If you select multiple paragraphs, the containing DOM element will be reformated (this isn't perfect but it usually does what you want). If no text is selected when you launch the bookmarklet, the entire page will be turned into multiple columns (that won't look great on my blog, but it's handy on pages with minimal styling)

If you add a keyword such as col to your bookmarklet link (Right Click > Properties), then you can launch the bookmarklet from the location bar by typing col rather than clicking on the link.

Finally, if you provide an argument of max, eg. col max then the maximum height of the columns will be set to the size of your web browser window. This is really handy if you're viewing a long document and you don't want the columns to scroll vertically for miles and miles (by setting the column height the columns will instead continue horizonally, just like a large-format newspaper).

In case you're wondering, the bookmarklet is only intended for Firefox because none of the other browsers have implemented any column-related CSS features.

2 Responses to 'Multiple Columns Bookmarklet'

Subscribe to comments with RSS

  1. andy said,

    on October 5th, 2007 at 11:55 pm

    I like it, Pat. A really nice feature. I hadn’t really thought about it before but you’re right - reading in columns is so much easier on the eye. The big online papers seem to set a max width for their pages to avoid huge chunks of text rolling across the page and that just cheats those of us with extra screen real estate.

    Selecting text or multiple paragraphs before clicking the link is a little clunky. I assume you can assign these options to some links at the top of an article?

  2. Patrick said,

    on October 6th, 2007 at 10:09 am

    @andy: yeah good idea, you could hardwire it to certain chunks of text and have a convenience link for visitors (although it currently only works for Firefox so a lot of visitors wouldn’t be able to use it). The intended use of the bookmarklet though is for when you’re viewing other people’s sites, in which case you need to be able to select some arbitrary chunk of text within the context of their entire site layout.