HTML newspaper columns

Question

I'm trying to create newspaper style columns using a block of text. I would like the text to be evenly spread out across 2 columns which could react to change of length in the text.

Is this possible using just HTML/CSS, if not could javascript be used?

Thanks

Answer 1

Two notes:

• What works for a printed medium isn't good for a display medium. Having to scroll up to continue to read doesn't seem like a good idea for me. After all, Web pages aren't limited in length...
• You cannot do that with CSS2. I think that CSS3 has support for that (not sure), I doubt it is supported by most browsers.

So I suppose JS is your best bet, but it won't work for users with disabled JS, of course.

Answer 2

CSS3 provides a way of turning any HTML node's content into any number of columns. There are properties for controlling the number of columns as well as their width, relative height ("fill," or how the content is divided across the existing columns), gutter between columns, "rule" (dividing line or border), etc.

As a starting point, see the w3schools.com CSS3 Multiple Columns reference page.

However, as usual, IE alone among widely used browsers does not support the column- CSS3 properties.

One cross-browser solution is the Columnizer jQuery Plugin.

Answer 3

Here's a simple (not CSS friendly) javascript function that will do this:

function Newspaperize(elem)
{
    var halflength = elem.innerText.length / 2; 
    var col1 = elem.innerText.substring(0, halflength);
    var col2 = elem.innerText.substring(halflength);

    elem.innerHTML = '<TABLE WIDTH=100%><TR>' + 
        '<TD WIDTH=50% VALIGN=TOP>' + col1 + '</TD>' +
        '<TD VALIGN=TOP>' + col2 + '</TD>' +
        '</TR></TABLE>';
}

Put your text in a regular element somewhere, and call Newspaperize(yourelement) when the page loads.

Note: this function just splits the text in half. To really work properly, you'd want to find a space or hyphen nearest the midpoint and split the text there.

Answer 4

CSS3 will allow you to do this with their multicolumn support, but at the moment, you probably can't rely on very many browsers to support it, so you'll probably need to rely on an alternate method.

Answer 5

As others have said - not something that's possible with vanilla CSS/XHTML (at least - not until we get widespread CSS3 :-)

However, wearing my user experience hat, I'd be interested in your use case for wanting this on a web page (assuming that it's a normal web page that you're targeting). Unlike print splitting a block of text over two columns can make it harder to read. If it's longer than a screen then the user has to do a lot of scrolling up and down to scan/read everything.

So - even if you can do it with some JS hacking - might be better to come up with an alternate design that doesn't need it.

Answer 6

If you decide to do this, it is already possible in Mozilla and WebKit (and Prince) with only CSS:

selector {
  -moz-column-count: 2;
  -webkit-column-count: 2;
  column-count: 2;
}