Print layout with page columns breaks images

Hi - I’d really appreciate some help. I understand that implementation of @print css in browsers is imperfect, but I’m trying to style some documents for print and I’m keen to know whether what I’m aiming for is even possible.

Please see an example page at https://www.taxonomyaustralia.org.au/_functions/ajtview/61018bd8-e7a5-43fd-a950-f05bfb5e7802.

This works fine for me on screen. But when I try to print (from Chrome) the images are broken by page-breaks (the @media print {#bodycontent {column-count: 2; column-gap: 40px; column-break-inside: avoid;}} css is ignored).

If I remove the columns so the text is displayed fully across page, the images don’t break.

Is there a way to structure the css so I can have columns and images that don’t break?

Thanks - Kevin

Print media is fraught with problems and the only reliable output is to linearise the content for best results. I notice across the web that there are a lot of issues with css columns and images breaking across pages especially in Chrome which at first didn’t even support columns in print media due to page breaking problems.

As I see it there are possibly three solutions.

  1. Linearise the page and content as you have already noted and will display ok (although not in columns).

  2. It looks like if you don’t span the columns with your images then Chrome at least seems to not break them across pages (but that just may be luck due to reorganised content). It’s worth a try though and you would need to add this to the print media query.

img{max-width:100%}

#bodycontent{
    column-break-inside: avoid;
    -webkit-column-break-inside: avoid;
}

#generalImages{column-span:none;}

I added the img max-width because that images is stretching miles wide in the desktop version wne emulating the print media in chrome devtools. I also noticed in devtolls that Chrome only understands the prefix version of this rule -webkit-column-break-inside: avoid;

  1. Another solution would be to wrap your text content in a parent div and set only the text to display as css columns and leave the images out of that construct. You seem to have separate blocks of text
    anyway so that approach should produce better results.

In the end it’s a matter of trial and error and how much time you want to spend tweaking to get the best results. Not everything is possible and generally with print sheets I go for the simplest option.:slight_smile: