Adjust CSS to make OSX Chrome Print Emoji

Question

I cannot get Chrome on OSX to print emoji, is there any css trick or other?

Here are 2 emoji: 👍🇦🇹 When I try to print this page, the emoji space is preserved, but it's white. In Safari printing the emoji works just fine.

Here is a screenshot of the print preview of this page on Chrome:

Answer 1

After a lot of dialog in the question's comments, it seems you have a font rendering issue (perhaps a Chrome bug). I do not think this can be solved with any combination of HTML, CSS, or Javascript.

There is, however, the option to work around the issue by not using a font.

You can use a vector image like SVG to have the same kind of scaling capabilities as a font:

• SVG for 👍THUMBS UP SIGN Unicode character
• SVG for 🇦 REGIONAL INDICATOR SYMBOL LETTER A Unicode character
• SVG for 🇹 REGIONAL INDICATOR SYMBOL LETTER T Unicode character
• SVG for    Thumbs up sign
• SVG for    Austrian flag

Just link to the SVG as an image and specify its dimensions either in HTML or in CSS as needed.

 

With a little work, you could automate conversion of user-generated emojis to images by using a dictionary of known images and supplement the misses with the either the SVG or the emoji PNG at FileFormat.Info. They have a list of emojis you could scrape (assuming it's not a violation of their terms of service) for PNGs as well as an SVG for every character (emoji or otherwise) which can be obtained from from just the character code. For example, here's U+1f44d (👍):

http://www.fileformat.info/info/unicode/char/1f44d

It'll be the only SVG link on the page, so you could do this in JS:

var svg_src = fileformat_info.querySelector('a[href$=".svg"]').href;

That said, it'd be vastly preferable to have this ready-made rather than creating from scratch. @pandawan's answer suggesting twemoji looks promising.

 

Perhaps there is a CSS-only workaround: I've also read elsewhere that you can properly print these characters by avoiding bold (and perhaps all font and text manipulation? perhaps just make the font size bigger?). This may depend on the fonts installed on the client system.