Search code examples
htmlcssprintingprinting-web-page

using css pagestyle is there a way to columnize the result?


I'm trying to make a webpage that will display normally in a browser, but when printed will print using 2 columns per page. Is there a way to get the text to flow from the left to right column, and have it paginate correctly?


Solution

  • In CSS3 there is a Multi-Column module which is designed just for this.

    Unfortunately, being CSS3 the column-count property is currently only supported in Firefox 3.6 -moz-column-count, Safari 4 and Chrome -webkit-column-count, as you can see in this overview:

    http://www.standardista.com/css3/css3-columns-browser-support

    But there is a javascript library that will add this functionality to most older browsers! You can find this script, as well as a really good explanation of the multi-column module in this 2005 article on A List Apart:

    http://www.alistapart.com/articles/css3multicolumn/