CSS Columns and printing

Question

In Mozilla, applying a css rule like

-moz-column-count: 2;

gets you 2 columns that are the full height of the page. From what their MDC suggests, this is called "Height Balancing".

Webkit has something similar:

-webkit-column-count: 2;

I'm not completely sure if Webkit has "Height Balancing" or not (this may be the root of my problem, honestly). In Webkit, this is displayed the same way on the page. However, when you print the page with said columnar content, in Firefox, the printed pages end up looking like this:

A C
B D
---
E G
F H

whereas Webkit displays like this:

A E
B F
---
C G
D H

Is there a way to make Webkit print like Mozilla?

Answer 1

This was a bug in WebKit. It's been replaced by another bug when multi-column was disabled for printing:

https://www.webkit.org/blog/88/css3-multi-column-support/#comment-16854

https://code.google.com/p/chromium/issues/detail?id=99358

There is a related stackoverflow question: CSS columns breaking when printing

Answer 2

Height balancing just means that if you do not specify a height on the element, The browser will attempt to make all columns a equal height. If you do set a height it will not balance the height of the columns and it will fill the columns to the height specified, and the last column will be shorter.

It sounds like the WebKit behaviour is a bug in their printing code. The Mozilla behaviour is correct. Which version of WebKit are you using though, as in the test I'm using it doesn't print columns at all in Chrome 8.0.552.231 and Safari 5.0.3.