Why the book can't be printed from Chrome 88?..

[mvasin]

Hey @michaelperrin,

thanks for putting up the article and the example.

It's (probably) not an issue with the repo, but... I don't quite understand is why in the year 2021 we still need Prince to print printer-friendly web pages. Namely, https://caniuse.com/css-paged-media claims CSS Paged Media is supported in Chrome since version 15, but the layout is completely off when I hit ctrl-p in Chrome 88. No picture on the first page, some text being cropped on the second...

I tried styling for printing around 5 years ago, didn't succeed much but hoped the browser vendors had some progress in the meantime. Seems like they had none... :/

What's your experience and thoughts about browser compatibility?

[mvasin]

Mm... wait, these examples https://www.princexml.com/samples/ look pretty darn good on ctrl-P. Then what's wrong with the repo example?

[michaelperrin]

Thank you for your message.

It's much more than just the CSS Paged Media module here as I am using:

• CSS Paged Media Module Level 3
• CSS Generated Content for Paged Media Module
• CSS Generated Content Module

No browser implements these modules currently. Note that most of them are in draft status. It's pretty frustrating that CSS is still very much targeted to screens, despite it could be a very neat way to handle print. So far, only PrinceXML has met my expectations for this, using "kind of" (as it's still in draft) standard techniques.

[mvasin]

Well, what I expected is to at least see the image stretched to the first page, like in this https://www.princexml.com/samples/catalog/PrinceCatalogue.html example. But it's off... I don't ask for the generated content, although even for it the support is not hopeless https://caniuse.com/?search=generated.

Is it possible to tweak your example so the first page looks good when printing from Chrome?

[michaelperrin]

To see the picture, make sure you have enabled backgrounds in the Print options.

Then it may be harder to get the page covering the whole page, but you can play with the margins (with the risk to apply it to all the pages with current supported CSS)

[mvasin]

Still, the image spills over to the next page... :/

[mvasin]

I tried weasyprint and it works pretty well: there are some margins on the first page, but overall looks good! Unlike Prince, Weasyprint is free.

All it takes is to have Docker installed and running, then npx serve path/to/this/example in one terminal window and docker run --rm -v $PWD:/app -w /app minidocks/weasyprint http://192.168.1.107:5000/book weasyprint.pdf in another terminal window (this Docker image is used). Don't use localhost, use the local network IP that serve prints on starting the server (substitute 192.168.1.107 with your own IP address).

Don't know if you need these instructions, but let it be for posterity.

If you're curious to try it out, wonder if you can get rid of the top and left margin on the first page.

[michaelperrin]

Thank you very much @mvasin for looking into alternatives! PrinceXML is free for non-commercial use, but it's always nice to have full open-source alternatives. Thank you for sharing instructions on how to use weasyprint too 👍