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

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 2

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 3

Yeah, without css3 you can't have your text flow evenly from one column to the next. You can only statically identify where your text will break on one column and flow to the next.

Alternatively, you could use javascript to flow the text for you. Believe me, this is more complicated than it sounds, as you have to react to the browser window resizing and other fun stuff.

Here's a great post about both the CSS3 and javascript implementations.

Answer 4

I agree with PhiLho. If you still want to try it the js code dividing your content into two columns is quite simple if the columns have fixed widths. The tricky bit is deciding where to split the content. You probably don't want to split in the middle of a word etc.

You could try with the following scenario: Add two columns into your page. Put your text into the first column (this allows non js browsers to still display your content). Get the text with js (eg. from onload event). Find the next index of "." (or if you have paragraphs "< /p>") starting from the middle. Use that index to split the text and put the first part back in the first column and so on...

Answer 5

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 6

The IHT has a nice implementation of a 3 colums format. It however seems to be calculated server side, I guess by counting words.

Answer 7

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 8

I managed to do something like this but again, not in CSS, I used PHP to count words and split the text. Unfortunately counting words is a pretty bad way of going about doing it, since some words are longer than others and the columns don't match up. My design was inspired by the IHT website. It's not very hard to implement in PHP.

Answer 9

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;
}

Answer 10

So i was looking for an answer for this question, sadly at first i didn't really found one, now 3 hours later i did.

I found a JavaScript lib which uses the css3 attributes (if i understood it right, only tried to make it work and it did, gonna read in the js later )

lib found here: http://www.csscripting.com/wiki/index.php?title=CSS3_Multi_Column

only disadvantage is that the text you want to have multicolumned HAS to be between two tags ( i prefer using <p> tag, as it also supports multiple <p> tags.)

tested it in ff 3.6, ie 8, opera 10.51 and chrome 4.1. Im not in the position to test for older browsers, so i recommend someone does that soon ;P

cheers!