Multicolumn CSS does not work on print

H

3

6

I discovered multicolumn CSS for me, however found that when printing these styles are ignored.

Is this a known bug? Or did I do something wrong?

div {
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
    font-size: 16px;
    line-height: 1.6;
    width: 760px;
}

@media print {
    button {
        display: none;
    }
}

<button onclick="print()">Print...</button>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed vehicula quam, ut placerat ipsum. Cras suscipit dui nisl, at pretium leo mollis sed. Vestibulum iaculis ultricies nulla at mattis. Ut at augue sed nulla mollis pellentesque. Nulla vel
    sollicitudin libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus fringilla ligula, sit amet pellentesque velit eleifend ut. Fusce id metus et tellus iaculis vulputate. Aliquam blandit fermentum augue. Cras accumsan fermentum
    tempor. In pulvinar magna vitae eros faucibus, vitae scelerisque lacus mollis. Aliquam tincidunt justo eu tortor tincidunt, nec bibendum ligula interdum. Duis sit amet tincidunt sapien. Cum sociis natoque penatibus et magnis dis parturient montes,
    nascetur ridiculus mus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut erat ipsum, elementum sit amet magna ut, rhoncus convallis nunc. Pellentesque tortor magna, posuere eu orci non, ultrices elementum nisi. Integer quis ullamcorper
    mi, id porta sapien. Nam ornare dolor quis nisl imperdiet eleifend. Praesent facilisis fermentum fermentum. Etiam porttitor semper nulla vel tincidunt. Fusce a nunc volutpat, ullamcorper erat id, varius nulla. Integer fringilla urna velit, quis varius
    velit interdum at. Maecenas at nisi nulla. Nunc laoreet, odio nec fermentum interdum, felis enim bibendum augue, id consectetur nibh nibh a eros. Quisque non ante venenatis, fringilla ipsum semper, dictum lacus. Nulla facilisi. Pellentesque condimentum
    feugiat consectetur. Nullam sollicitudin pellentesque quam sit amet auctor. Vestibulum eget lacus ipsum. Praesent tristique quam vel mi pellentesque, et condimentum justo suscipit. In viverra odio justo, et egestas nulla mattis sed. Etiam id porttitor
    orci. Vivamus at cursus quam. Maecenas placerat lacus ut pulvinar imperdiet. Aliquam varius arcu lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras ornare suscipit posuere. Nullam vel sodales nisl,
    ac mollis quam. Nam imperdiet faucibus ipsum. Curabitur in felis in mi tempor pharetra. Mauris eu egestas diam. Pellentesque placerat lectus vitae cursus adipiscing. Proin non enim eros. Integer id semper ante. Vivamus pulvinar, libero in laoreet
    pellentesque, ipsum lectus suscipit dolor, a mollis erat turpis quis quam. Curabitur sapien orci, lobortis sit amet tincidunt eget, rhoncus id mi. Aliquam accumsan velit sit amet purus ullamcorper congue. In hac habitasse platea dictumst. Aliquam
    quis purus venenatis, sagittis augue non, fringilla enim. Nunc non semper justo, nec fermentum tortor. Donec fringilla massa at arcu dictum, at consequat dui faucibus. Cras sed eleifend ante. Etiam non nisi nisi. Nam aliquet felis non turpis pretium,
    quis scelerisque tortor auctor. Donec eu porttitor erat. Cras egestas tincidunt erat ac euismod. Ut eget dolor vitae magna commodo iaculis vitae nec purus. Sed vitae eros mi. Donec eu justo urna. Vivamus volutpat rhoncus erat, sit amet malesuada ligula
    pellentesque nec. Nullam sollicitudin diam arcu, quis tincidunt dui pretium et. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In varius at libero et pulvinar. Fusce ut tincidunt felis. Ut vulputate cursus facilisis.
    Etiam erat nunc, feugiat a vestibulum vel, posuere in leo. Ut ac aliquet turpis, non ultricies mauris. Nam sed elit suscipit, mollis urna eu, laoreet odio. Duis porttitor vulputate magna, eu porta augue adipiscing volutpat. Vestibulum mi lectus, pulvinar
    at pharetra sit amet, rhoncus vel lorem. Pellentesque semper, quam sit amet pretium rutrum, ante massa tristique dui, ut interdum quam neque sit amet ligula. Mauris gravida leo eu mauris luctus fringilla. Sed malesuada libero leo, in egestas turpis
    laoreet eu. Aenean egestas imperdiet libero sit amet venenatis. Aliquam luctus tristique feugiat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec hendrerit a nibh eu molestie. Nullam enim velit,
    bibendum in est et, accumsan condimentum leo. Sed aliquam tempus dolor in imperdiet. Ut sed dignissim felis. Phasellus nec sagittis tortor, eu ultricies sapien. Nulla convallis ipsum eget purus aliquet euismod. Sed vitae arcu sed eros dignissim fermentum.
    Integer egestas ultrices purus, ut pulvinar lacus pellentesque in. Vivamus neque ante, elementum nec lacus a, aliquam varius libero. Phasellus consequat, sem facilisis varius fringilla, tellus mi malesuada nulla, ac elementum enim ligula ut diam.
    Maecenas feugiat libero dui, eget blandit orci faucibus non. Cras iaculis at metus lobortis iaculis. Etiam nec lobortis metus, in hendrerit lacus. Sed tincidunt scelerisque turpis, non tempus arcu blandit ac. Pellentesque interdum velit at enim porta
    dapibus. Phasellus et accumsan nulla. Vestibulum augue erat, congue a sagittis dapibus, volutpat condimentum enim. Proin non ante eget eros scelerisque vestibulum id bibendum quam. Sed imperdiet vitae augue eget dapibus. Integer consectetur ut velit
    vel tristique. Sed scelerisque elit felis, ut suscipit elit ultrices vitae. Sed blandit commodo dolor at pulvinar. Vestibulum id consectetur libero. Ut vestibulum pretium ipsum. Suspendisse ac fringilla urna. Aliquam egestas enim nibh, id tristique
    nulla pharetra sed. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vel neque diam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut congue lacus quis accumsan accumsan. Praesent nec
    pellentesque mi. Etiam id lorem sed neque tempor imperdiet. Ut molestie velit eu pellentesque rhoncus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec vel lorem in nulla tristique auctor. Cras vitae
    hendrerit neque. Aliquam accumsan porttitor malesuada. Fusce malesuada urna id tortor ultrices, at lobortis mauris faucibus. Sed eget enim volutpat, tempor libero ut, hendrerit justo. Pellentesque eu aliquet urna. Morbi laoreet metus suscipit aliquam
    pellentesque. Suspendisse mattis ipsum sed mauris faucibus porttitor. Morbi posuere et nisl non euismod. Donec malesuada dapibus eros quis consequat. Duis non aliquet nisl, in pharetra nulla. Vestibulum venenatis risus ac elit scelerisque, a scelerisque
    diam rutrum. Maecenas cursus sodales tortor id luctus. Sed eleifend lectus pharetra pulvinar sagittis. Morbi risus orci, molestie sit amet orci nec, aliquet iaculis enim. Suspendisse at lorem suscipit, rutrum odio in, gravida massa. Aliquam vitae
    convallis ligula, a hendrerit nunc. Pellentesque tempor blandit ultrices. Curabitur hendrerit libero at adipiscing suscipit. Ut pretium consectetur tincidunt. Quisque facilisis quis enim id hendrerit. Cras aliquam mi orci, tristique porta arcu posuere
    lobortis. Ut at felis molestie, pharetra ligula quis, venenatis quam. Integer sit amet sapien eget quam consectetur adipiscing. Sed sit amet ligula a ligula ultrices euismod. Aliquam fermentum, lorem a vehicula tempor, est erat semper ipsum, ac mollis
    neque lacus non magna. Curabitur semper sem volutpat justo volutpat varius. Aenean placerat, justo aliquet lobortis scelerisque, libero ipsum tincidunt quam, at gravida augue lacus sit amet nunc. Sed tempor mattis aliquet. Proin vitae ante arcu. Donec
    lobortis facilisis eros, vitae condimentum odio fermentum sagittis. Nunc imperdiet erat eget vehicula volutpat. Phasellus eget nulla in nisl vulputate dignissim. Sed tincidunt lectus ac molestie vestibulum. Duis hendrerit dolor a accumsan tempus.
    Curabitur eget ante ut dolor vulputate pretium suscipit et lacus. Cras adipiscing est ultricies elementum gravida. Praesent consequat enim justo, sit amet posuere nunc sodales ut. Proin eget risus tempor velit iaculis molestie sit amet ac velit. Cras
    in est at tortor lacinia rutrum. Pellentesque lobortis et dolor eget pellentesque. Cras id varius libero. Suspendisse vitae dui ut mauris imperdiet rutrum. Aliquam quis viverra dolor. Cras lacinia massa et dignissim luctus. Pellentesque et lobortis
    metus. Etiam sed auctor felis, at cursus neque. Nam ut vehicula augue. Proin commodo aliquam dolor, molestie ullamcorper quam pretium eu. Sed semper, libero quis convallis consequat, leo est porttitor mi, quis blandit lorem lacus eu arcu. Etiam vel
    sapien vel dolor facilisis elementum eu sed dui. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras scelerisque sapien eros. Integer hendrerit magna non fermentum euismod. Mauris feugiat nisl elit, id viverra
    nunc tempus non. Phasellus ut placerat ante. Pellentesque volutpat dolor in odio vulputate rhoncus. Maecenas suscipit placerat quam, ut aliquam velit volutpat a. Cras et turpis tellus. Sed vitae purus vitae orci condimentum suscipit eu non odio. Fusce
    non leo eleifend, sagittis augue sed, laoreet dui. Integer adipiscing sapien auctor, luctus sem id, semper enim. Vestibulum facilisis justo vitae enim gravida consequat. Maecenas tempus, mi vitae convallis feugiat, lorem orci bibendum felis, a tincidunt
    quam magna et nibh. Aenean tempus nec purus bibendum egestas. Pellentesque ut arcu et arcu aliquam bibendum sed quis est. Nunc pharetra sagittis eleifend. Quisque elementum tortor eget porta elementum. Vivamus ut eros ac nulla facilisis consequat.
    Donec venenatis orci ipsum, at ultrices turpis interdum vel. Fusce vitae orci dolor. Morbi sodales eros eros, quis tempus est imperdiet a. Aenean ultricies lorem elit, a rhoncus neque mollis at. Fusce placerat sapien ut cursus condimentum. Nulla consequat
    elementum vulputate. Pellentesque gravida volutpat tellus, ac hendrerit nulla sagittis sed. Ut nec turpis elit. Proin in pulvinar nisi. Donec ac condimentum velit. Sed et tortor non justo aliquam iaculis id eget sem. Pellentesque vulputate eu lectus
    at ultrices. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam at egestas sem, nec luctus augue. Mauris sagittis rhoncus bibendum. Morbi laoreet aliquet eros, adipiscing tempor mi vestibulum vitae. Duis massa arcu, aliquet semper
    magna id, tristique adipiscing velit. Quisque id rhoncus quam, a euismod justo. Fusce eget ipsum non justo mattis feugiat in in nisi. Donec ac est vehicula, aliquet nisl sed, sodales nunc. Donec luctus ante nunc, in suscipit orci dignissim quis. Nulla
    quis dolor rutrum, pharetra lacus a, facilisis ante. Phasellus a hendrerit tellus, eu viverra libero. Nulla luctus risus quis elementum placerat. Fusce rhoncus, purus vitae sollicitudin dapibus, massa nibh sodales nibh, a aliquet ante arcu id diam.
    Donec egestas laoreet viverra. Vestibulum at risus a tellus imperdiet tincidunt. Suspendisse suscipit, odio eget ultricies consequat, tellus erat auctor sem, quis placerat quam mauris sit amet felis. Pellentesque aliquam at justo eget blandit. Vivamus
    placerat risus et sagittis semper. Vivamus imperdiet vehicula pellentesque. In scelerisque quis mauris vel egestas. Proin eleifend lacinia sollicitudin. Pellentesque varius enim et felis pulvinar euismod. Nullam varius, lorem non commodo mollis, odio
    eros posuere sapien, sed aliquam eros enim vel justo. Mauris eleifend porta molestie. Quisque vulputate, leo id tempus facilisis, neque nunc cursus ipsum, et ultricies dui massa quis nibh. Quisque consectetur justo ac venenatis cursus. Nullam ut sapien
    ac velit lacinia fermentum vel eu sem. Quisque luctus ac eros vel sagittis. Quisque venenatis sem orci, eu dignissim nulla dignissim nec. Pellentesque eu elementum purus. Nulla placerat sodales lorem quis interdum. Vestibulum sodales ultricies dolor
    vitae auctor. Phasellus vel diam purus. Nam eget libero pellentesque, sagittis elit et, pharetra lorem. Quisque elementum nibh et augue ornare, ac rutrum odio blandit. Maecenas ac turpis rutrum, elementum arcu vitae, pulvinar ante. Donec nisi dolor,
    dictum at sagittis eget, ornare in erat. Curabitur velit leo, faucibus non turpis quis, suscipit pellentesque elit. Cras in venenatis orci. Maecenas blandit est id augue pellentesque, et faucibus sapien vulputate. Morbi sed molestie risus, sit amet
    elementum felis. In non turpis nisi. Nunc bibendum sem sed metus ornare, ut volutpat sem aliquam. Aliquam bibendum adipiscing suscipit. Donec consectetur sem at arcu viverra, a tincidunt velit ullamcorper. Phasellus at metus mi. Proin rhoncus mattis
    gravida. Suspendisse pellentesque pharetra turpis, sit amet facilisis orci adipiscing in. Fusce egestas nec nulla in scelerisque. Nulla congue pretium nibh, et scelerisque erat pretium eu. Aenean et nunc mauris. Morbi bibendum urna a aliquet suscipit.
    Nunc pretium dapibus lacinia. Fusce dapibus mollis molestie. Nam at interdum metus, eu consequat est. Nulla a metus massa. Vivamus justo eros, tristique ut orci vitae, sollicitudin volutpat felis. Integer consequat justo metus, non adipiscing arcu
    tristique in. Aliquam imperdiet ipsum id velit condimentum, sit amet aliquet neque ullamcorper. Nunc mi nibh, dignissim nec mauris sit amet, semper venenatis arcu. Phasellus a rhoncus turpis, interdum blandit metus. Cras sit amet posuere mauris. Donec
    at fermentum elit. Praesent sagittis augue ipsum, sed pellentesque arcu tincidunt non. Ut eu purus consequat, adipiscing eros eu, suscipit metus. Sed eu mauris eu lacus feugiat venenatis ac ut velit. Nunc eget aliquam tortor, ac iaculis orci. Quisque quis sodales lectus. Nunc dui felis, aliquam luctus nisi malesuada, ultrices varius risus. Phasellus malesuada eros ut dictum consectetur. In adipiscing condimentum fermentum. Nullam ultrices purus ac dui lobortis vehicula. Donec et dapibus ligula, a bibendum nisl. In hac habitasse platea dictumst. Integer auctor massa vitae mauris fermentum rutrum. Sed urna ligula, tempus eget lectus ac, adipiscing consectetur diam. Cras quis eros vitae ipsum blandit sollicitudin. Curabitur eget ornare ligula, vel pellentesque ipsum. Aliquam volutpat imperdiet ipsum. Sed at orci sit amet nisl elementum pellentesque quis sed dolor. Aliquam nec sem vitae nulla pulvinar viverra. Mauris turpis ipsum, pretium eget neque vel, tempus tempor neque. Etiam malesuada dui sed dui malesuada venenatis. Duis rhoncus id felis in rhoncus. Donec at suscipit erat, sed elementum tortor. Nullam pulvinar, erat quis suscipit placerat, lectus lectus euismod enim, at sollicitudin odio metus at metus. Sed ut enim aliquet, varius enim sit amet, dapibus ipsum.</div>

Here is the Fiddle

I check it in my Ubuntu Chrome.

UserAgent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/36.0.1985.125 Safari/537.36

Hallelujah answered 8/8, 2014 at 5:17 Comment(11)

Have you check this link, its stated while printing that property doesn't support. dev.joeblade.com/?p=12 – Infamy 8/8, 2014 at 5:22

you need to layout the css for print media.... – Generally 8/8, 2014 at 5:27

@C-linkNepal you mean to say write a specific HTML code for @print media – Infamy 8/8, 2014 at 5:29

yes, exactly, but not html code just in css like setting width 25% for that column div... – Generally 8/8, 2014 at 5:33

I printed jsfiddle in PDF seems to work fine.. not sure about actual paper but usually its the same. – Ettie 8/8, 2014 at 5:42

@ImranBughio so in print preview you can see the content split into 2 columsn? – Infamy 8/8, 2014 at 5:49

yes i can see it in 2 columns – Ettie 8/8, 2014 at 6:15

@ImranBughio, what browser? – Hallelujah 8/8, 2014 at 6:32

@ImranBughio, yes I check it in FF, it works correctly... :( – Hallelujah 8/8, 2014 at 6:50

How can I replace it for multi-browser support? May be some jQuery plugin or something else? – Hallelujah 11/8, 2014 at 4:8

It doesn't work at Safari too( – Staphylo 19/11, 2016 at 11:18

P

4

It looks like a known bug in Chrome: https://code.google.com/p/chromium/issues/detail?id=99358

Btw, there is a related question on stackoverflow: CSS columns breaking when printing

Philbrook answered 3/11, 2014 at 16:17 Comment(1)

This bug was recently fixed. – Felly 18/1, 2016 at 19:36

A

1

I wanted to add a couple things here:

The Chrome Bug Referenced in Damien's answer is still not fixed yet.
Printing in FireFox works as expected.
Strangely enough, printing in IE11 works. The output is not the same as FireFox, but still yields expected results.

Abattoir answered 19/3, 2015 at 20:21 Comment(1)

Update: That bug appears to have been fixed. – Keeley 21/1, 2016 at 19:35

A

0

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

Aloes answered 22/12, 2014 at 9:2 Comment(1)

"Use IE" can't to be a solution. I can't to say this to my users :) – Hallelujah 22/12, 2014 at 10:16

Recommended topics

Hot tags