7

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: chrome print preview

fabb
  • 11,660
  • 13
  • 67
  • 111
  • I see _three_ symbols: [`` is U+1f44d](http://www.fileformat.info/info/unicode/char/1f44d "THUMBS UP SIGN"), [`` is U+1f1e6](http://www.fileformat.info/info/unicode/char/1f1e6 "REGIONAL INDICATOR SYMBOL LETTER A"), and [`` is U+1f1f9](http://www.fileformat.info/info/unicode/char/1f1f9 "REGIONAL INDICATOR SYMBOL LETTER T"). Can you provide the character codes, an image of what you expect, and an image of what you get? You should be able to take screen shots of the print preview. (I'm on Firefox on Linux.) – Adam Katz Mar 16 '16 at 18:08
  • Ah, those are [regional indicator symbols](https://en.wikipedia.org/wiki/Regional_Indicator_Symbol), so `` indicates [Austria](https://en.wikipedia.org/wiki/Austria) by [country code](https://en.wikipedia.org/wiki/Country_code) and the related emoji would (generally) be the Austrian flag. I'm still not sure what you mean by "the emoji space" though. Please provide your HTML/CSS code. – Adam Katz Mar 16 '16 at 19:06
  • I mean the physical width and height on the paper. – fabb Mar 16 '16 at 19:07
  • Emojis are just font characters, so you can adjust their [`font-size`](https://www.w3.org/TR/CSS2/fonts.html#font-size-props) in CSS. You can even specify centimeters or inches. I can't help you until you have sample code and a better demonstration of the issue so I can reproduce it. – Adam Katz Mar 16 '16 at 19:09
  • The issue is that the emoji are not printed at all on chrome, but they are printed correctly on safari. Nothing to do with fontsize. More like a browser problem. The question is if there is a workaround for chrome. – fabb Mar 16 '16 at 19:11
  • I can't keep guessing at what you want. This is a programming site. You need to show us code. If this is a font rendering issue, we might be able to help you with a workaround, but not without code. – Adam Katz Mar 16 '16 at 19:40
  • https://jsfiddle.net/fabb/6aq7s3u9/ – fabb Mar 17 '16 at 07:17
  • There is no code in your fiddle. Why did mention (and tag) CSS if this is a direct font rendering issue? I'm going to have to vote to close this as off-topic if this isn't a programming question. – Adam Katz Mar 17 '16 at 17:58
  • As i said, i'm searching for a workaround (utilizing css) that fixes the issue. – fabb Mar 17 '16 at 17:59

2 Answers2

2

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:

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.

Adam Katz
  • 14,455
  • 5
  • 68
  • 83
  • Thanks for the persistence in answering the question, you've earned the bounty. Unfortunately the emoji are user-generated, so I would need to convert the emoji in an automated fashion. So I'm looking into twemoji described in the answer of @Pandawan – fabb Mar 18 '16 at 08:06
2

This is due to a rendering difference between Chrome and Safari, I would not named it a bug since I do not believe that the expect behavior is defined anywhere (Firefox has issues rendering your emojis too by the way).

If you want a full and simple emoji support across all platforms you can use twemoji, a small library developed by Twitter for this specific need.

Community
  • 1
  • 1
Pandawan
  • 2,027
  • 1
  • 18
  • 24