Login/Register
CSS columns breaking when printing
Asked Answered
htmlsafariwebkitcss
F

5

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

Fonville answered 21/4, 2011 at 2:40 Comment(2)
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. – Peddada
Related Chromium bug: code.google.com/p/chromium/issues/detail?id=99358 – Intercommunion
O
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...

Outfoot answered 7/11, 2012 at 9:58 Comment(6)
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. – Filing
In the conversation it seems the developers are indicating that is fixed but I'm still seeing the issue. – Regarding
this bug was recently fixed in chome - bugs.chromium.org/p/chromium/issues/detail?id=99358 – Crossover
This is fixed in Chrome, not in Safari. – Singlehandedly
it's fixed in Safari, but when I tried to print on iOS WKWebView, the errors shows up again – Inclination
How is this still not fixed over a decade later???!!! – Iodometry
G
2

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;
}
Gunlock answered 13/10, 2014 at 23:34 Comment(0)
M
0

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

Metaphase answered 22/12, 2014 at 9:29 Comment(1)
Works like a charm in firefox. – Dinnie
E
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

Entertain answered 6/10, 2015 at 0:18 Comment(0)
P
-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

Preparation answered 21/4, 2011 at 9:28 Comment(1)
it would be very nice if you had post and example! – Colincolinson

© 2022 - 2024 — McMap. All rights reserved.