Print. Images should NOT be cut off when printing

[alexiscott]

User story: As a user, when I print a page, I should see all images intact, not split between pages, so that it's easier to read.

Description

This relates to 2142, but it is more specific.

See this page for possible solutions: https://www.smashingmagazine.com/2013/03/tips-and-tricks-for-print-style-sheets/

Most specifically:

img { page-break-inside: avoid; }

QA

This might be tricky to QA if the code is not on a client site, but if it is on Georgia then it could be QA'd here:

1. Go to file/print on a page where images are cut off, and they should no longer be cut off. Example: https://gbpw.georgia.gov/physician-workforce-data

[iris-i]

Ok, this may have been the longest QA process in the history of QA's but I could not see this fix working as indicated.

I tested it in dkan locally, then I tested it in my local ga_gbpw sandbox, but could not get the print styles to prevent the pie charts from being cut off on top.

@alexiscott could you add some extra QA steps on how you tested this in Georgia or how else I can see this fix working? My testing steps may be incorrect.

I have attached PDF files of my local georgia dashboard with and without the fix in place. They are identical. local-georgia--with-css-fix.pdf local-georgia-without-css-fix.pdf

[alexiscott]

Hi Iris, Thanks and sorry; I know it's tricky to test because the problem is not reproducible on dkan local. What I was doing was to copy the compiled (you need to run gulp) output of print.css into the browser source window, and then pull up the print preview window.

I also thing that there was a problem with the CSS, so I have changed it to this:

@media print { img, tr, svg, .card-chart { -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; } }

Testing on https://gbpw.georgia.gov/physician-workforce-data

[iris-i]

Ah I see, thanks Alex. I'll give this another go.

[iris-i]

Awesome! This fix works as intended. Images no longer get cut off when printing. 🎉 pdf-fix.pdf