16

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

11 Answers 11

19

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.

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

It's in the CSS3 spec, and Moz/Webkit already have it implemented with vendor prefixes. Use the column-count and column-gap properties:

#container {
  -moz-column-count: 2;
  -moz-column-gap: 20px;
  -webkit-column-count: 2;
  -webkit-column-gap: 20px;
  column-count: 2;
  column-gap: 20px;
}

Note that, of course, these are not supported by any version of IE that anyone uses. CanIUse.com claims IE 10 will support it as part of CSS3.

3

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.

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.

1

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.

0

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...

0

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

0

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.

0

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!

-1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.