Home → Problems →

Rendering on screen different to rendering when printed to PDF

• Edit

davidrsim

25 Jun, 2023 08:34 PM

I'm trying to use some (relatively complex) CSS to colourise text to make it easier for recipients to read.

Amazingly, it appears beautifully when rendered on screen... but as soon as I print to PDF if turns into a blocky mess. Any ideas? A low priority - I appreciate this is a bit 'out there'.

I'd understand if it didn't render properly, but I don't understand why printing to PDF or exporting to PDF doesn't work. A different renderer?

CSS:
p {
font-size:24px; line-height:32px; background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAABgCAIAAAC46DQiAAAAYUlEQVQoz73SwQ3DIBAF0aetYDuAEtNJWoQKTAfOgcgS+M5pVnMafS0+X4JWHyAv4CbmdQDJICrthULfpYuckU52DshoUDd0KKuUZizc5zpJRlBpLxT6KtdFT3aO3H/wjx/oyySm/xnbdAAAAABJRU5ErkJggg==); background-position-y:8px; background-size:100% 128px; -webkit-background-clip:text; -webkit-text-fill-color:transparent }

• Exported_as_PDF.png 107 KB
• Text_on_Scrren.png 114 KB

1. Support Staff 1 Posted by Brett on 26 Jun, 2023 05:01 PM

   

   Marked uses the same print engine as Safari to generate PDFs. Could you try saving to HTML and then opening the result in Safari and try printing from there? I'm curious if you have the same issue doing that.

   • Edit

2. Support Staff 2 Posted by Brett on 26 Jun, 2023 05:02 PM

   

   Marked's version of WebKit is also an older one that might have trouble with clipping text where the current version of Safari does not.

   • Edit

3. 3 Posted by davidrsim on 27 Jun, 2023 07:52 AM

   

   Thanks Brett. Interesting. The HTML produced by Marked2 renders fine in both Chrome and Safari.

   In both Chrome and Safari I need to turn on "Print Backgrounds" (understandibly!) to see the text at all.

   When I actually print the HTML to PDF, Chrome does a pretty passible job of it. Safari, however, renders the text exactly as Exported_as_PDF.png above. It seems that Safari's print engine is lagging behind Chrome's in its accurate rendering of clipping. Presumably something that will be resolved in the future.

   At least I have a workaround now as I use Chrome as my default browser anyway... many thanks.

   • Edit

4. Support Staff 4 Posted by Brett on 27 Jun, 2023 12:22 PM

   

   Sorry I couldn't offer a better solution!

   On 27 Jun 2023, at 2:51, davidrsim wrote:

   • Edit