On: Whither print.css? A Rallying Cry for a Web That’s Fit to Print (2013)

[ef4]

Unfortunately, printed media support in CSS still sucks.

I have a web app that needs to generate printable official documents, and it's really not possible to do a good job with CSS. I resort to generating PDF in Javascript, which is laborious and duplicates a lot of effort.

My biggest gripe is the inability to control the header and footer and the inability to sanely specify where page breaks are allowed.

[romey → ef4]

"page-break-inside: avoid" and "page-break-after" seem to work fairly reliably, as long as you aren't doing too much weird stuff with positioning, floats, etc.

Three major problems I've had with printing from HTML is 1) It seems that the different browsers have different default margins, and the outside margins aren't controllable from CSS 2) The javascript print dialog doesn't give any sort of feedback...it just blocks JS execution. There's no way to no if the user cancelled the print, etc. 3) Different browsers don't reliably resize things to fit on the page. Using percentages for anything (while maybe not recommended anyway) just doesn't work for printed CSS

[ef4 → romey]

I fought with those and eventually gave up, because their implementations were either broken or missing in the browsers I was supporting. But that probably 18 months ago now. Maybe they have improved.

[_5nni → ef4]

> the inability to sanely specify where page breaks are allowed.

I can usually explain away the issues of printing from a web page, except for this point. My customers always have difficulty accepting that I can't set page breaks. Cruel first-world problems!

[mountaineer → ef4]

I've used <table style="page-break-inside:avoid;"> to prevent unsightly page breaks. (specifically for rendering web pages that are then captured and served as PDFs)