Rendering on screen different to rendering when printed to PDF

davidrsim's Avatar


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?

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 }

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

    Brett's Avatar

    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.

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

    Brett's Avatar

    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.

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

    davidrsim's Avatar

    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.

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

    Brett's Avatar

    Sorry I couldn't offer a better solution!

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

Comments are currently closed for this discussion. You can start a new one.

Keyboard shortcuts


? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac