Emoji convered to greyed out in PDF output from Chrome Headless - puppeteer

Question

(Note, even though this mention Pyppeteer, the Python version of Puppeteer, the code is exactly the same and works with either Puppeteer and Pyppeeteer).
Hi,
I'm converting the page http://getemoji.com/ into PDF using the following code :
import asyncio
from pyppeteer import launch
from pyppeteer.launcher import connect
async def main():
browser = await launch()
context = await browser.createIncognitoBrowserContext()
page = await context.newPage()
page.on('dialog', lambda dialog: dialog.dismiss())
# await page.emulateMedia('print')
await page.goto('http://getemoji.com/')
await page.screenshot({'path': 'example.png'})
await context.close()
await browser.disconnect()
asyncio.get_event_loop().run_until_complete(main())
And it generates properly the following image:
But if I try to convert the page into PDF, like this:
await page.pdf({
'path': 'example.pdf',
'format': 'A4'
})
All the emoticons are greyed in the resulting PDF, like this:
The issue is not a font issue with the emoji, since they work perfectly on the screenshot. It's something related to how the PDF is generated, but I can't find out why.
I'm hoping you'll find it :)

Answer 1

I came across the same issue and did some searching. The issue seems to be twofold.
As you guessed, it is to do with the CSS rules for media printing. The site uses a bootstrap css file which has following rules:
#media print {
* {
color: #000!important;
text-shadow: none!important;
background: 0 0!important;
box-shadow: none!important
}
...
}
which gives a blanket rule for foreground color of all content to be black when printing it.
Fortunately, Pyppeteer provides an API to define the media type to be used for printing the content: page.emulateMedia which if provided the 'screen' argument would ignore the media print rules. If you use this, you would see that some of the content now has colors, the links look better too.
The second issue seems to be the way Chrome prints a pdf. Pyppeteer actually uses the 'Print to PDF' functionality as provided by Chrome. So, the issue is not really with Pyppeteer.
To confirm this, I created a simple webpage which had some emojis and did not have any media printing css. When I manually open the page in Chrome and save it as a PDF, the emojis appear in black.