CODEWITHSUNDEEP
cssgoogle-chromeprinting
TKoL
TKoL

Reputation: 13892

Printing from Chrome - not dealing with white-on-black correctly

I have some html that I'm trying to turn into a pdf using puppeteer, and the html has some bits of it with a black background with white text on top. When I use puppeteer to convert it to a pdf, it renders black text on white perfectly, but the bits with white text on black change to white background with grey text.

Here's some example html:

<!DOCTYPE html>
<html>
<head>
</head>
<body style="font-family:Arial;">

<div style="display: flex; max-width: 100mm;">
    <div style="padding: 1em;">
        <h1>A</h1>
    </div>
    <div style="background:black;color:white;padding: 1em;">
        <h1>C</h1>
    </div>
</div>



</body>
</html>

When I try it in my own Chrome browser and press ctrl+p to print, it actually does the same thing - it renders white-on-black as grey-on-white.

What's going on here? How can I fix this?

Upvotes: 1

Views: 1931

Answers (1)

TKoL
TKoL

Reputation: 13892

I found the answer after some messing around.

When printing to pdf, you can click 'more settings' and there's a setting called 'background graphics'. That shows my white-on-black sections correctly.

Furthermore, I'm using puppeteer from a php / Browsershot context. The Browsershot command to do 'background graphics' is the function $browsershot->showBackground()

Upvotes: 1

Related Questions