CSS columns breaking when printing

Question

.class {    -webkit-column-count: 4;
    -webkit-column-gap: 0.25in;
    -webkit-column-rule-width : 1px;
    -webkit-column-rule-style : solid;
    -webkit-column-rule-color : #eee;
}

So it works perfectly in Safari, but when printing, the 4 columns turn into a single column spanning multiple pages. Any ideas?

This is very frustrating. I've been working on a solution for a few hours now and it looks like I'll have to take a different route entirely. The WebKit implementation (including the latest build, which I just checked, Chrome and wkhtmltopdf) have CSS3 columns turned off (see Peter's answer). Firefox actually renders them correctly, but I have no idea how to access that efficiently programatically :-( Bad times. — Hut8, Oct 06 '13 at 11:58
Related Chromium bug: https://code.google.com/p/chromium/issues/detail?id=99358 — Damien, Nov 03 '14 at 16:57

score 33 · Answer 1 · answered Nov 07 '12 at 09:58

33

It seems like the developer of columns in Webkit (Dave Hyatt) disabled columns when printing, because he couldn't implement page breaking properly: https://www.webkit.org/blog/88/css3-multi-column-support/#comment-16854

I'm surprised that in more than 5 years, no solution has been found...

answered Nov 07 '12 at 09:58

Peter

2,874
2
31
42

2

That's very interesting because I've run into a similar problem that I'll have to end up implementing as a custom solution. It's pretty annoying there is not a solution yet. – Nick Felker Nov 12 '13 at 04:12
1

In the conversation it seems the developers are indicating that is fixed but I'm still seeing the issue. – Joel Mar 08 '16 at 21:42
2

this bug was recently fixed in chome - https://bugs.chromium.org/p/chromium/issues/detail?id=99358 – Māris Kiseļovs Dec 30 '16 at 06:28
2

This is fixed in Chrome, not in Safari. – doekman Apr 16 '18 at 09:38
it's fixed in Safari, but when I tried to print on iOS WKWebView, the errors shows up again – Alan Donizete May 25 '20 at 18:12
How is this still not fixed over a decade later???!!! – Kudit Aug 10 '22 at 16:26

score 2 · Answer 2 · answered Oct 13 '14 at 23:34

It's worth noting that in Firefox 31.0 on OSX these do print correctly with the below style. However it's still broken in WebKit (safari/chrome).

.column_wrapper {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
}

score 0 · Answer 3 · answered Dec 22 '14 at 09:29

0

It's not working in chrome, firefox. you have only one temporary solution. use IE for multi column print

answered Dec 22 '14 at 09:29

Vishal Patel

635
6
12

Works like a charm in firefox. – Alejandro Salamanca Mazuelo May 07 '16 at 22:39

score 0 · Answer 4 · answered Oct 06 '15 at 00:18

0

The only way to print in columns is to print with FireFox or IE... and use the un-browser prefixed versions so that FF nad IE can read the columns CSS

answered Oct 06 '15 at 00:18

bjornmeansbear

98
10

score -1 · Answer 5 · answered Apr 21 '11 at 09:28

-1

the print and web page are 2 different things. So try to use diff css for print pages and try to see

page-break css properties. it will come in handy

answered Apr 21 '11 at 09:28

Hacker

7,798
19
84
154

2

it would be very nice if you had post and example! – mandza Aug 18 '14 at 12:48

CSS columns breaking when printing

5 Answers5

Linked