1

I'm currently developing a web app that pulls tweets from the Twitter API and displays them on a website. For reference, I'm using Google Chrome on Mac OS X 10.9 to test it.

I've noticed that certain tweets with Emoji emoticons display as squares, or the icon for "unrecognized character". Which originally led me to believe that data was being garbled somehow by the backend. But when I copy into or display the characters using a Mac system font...

Selecting and right clicking the unknown characters

So what's going on here, and what would be the best way to handle it? I'm using Google's Open Sans font on my site, if that matters, but I've tried a few fonts to no avail.

Matt Vukas
  • 3,225
  • 3
  • 26
  • 37

4 Answers4

2

This is a limitation of Chrome.

Chrome for Android and iOS should display them fine. For Mac and Windows there is an extension to display these emojis in-browser.

Of course that won't solve the problem for anyone else who doesn't have the extension, but in that case there really isn't much you can do short of manually replacing them with your own images, as Twitter does.

Mathias Bynens
  • 144,855
  • 52
  • 216
  • 248
Andrew
  • 4,953
  • 15
  • 40
  • 58
  • Hmm interesting. I would have figured noticeable issues like that would have been worked out of Chrome by now, but alas. Tried my app on Safari and everything worked perfectly. I'll just keep that limitation in mind for now – Matt Vukas Jul 10 '14 at 17:44
  • Also, lol at that Chromium issue: "Unicode / font-fallback: Unicode pile of poo does not display on Mac OS X, works on Linux" – Matt Vukas Jul 10 '14 at 17:45
  • If you want to implement the Twitter inline Emoji images for all browsers, take a look at my answer to http://stackoverflow.com/questions/24070515/rendering-or-deleting-emoji – Tom Wuttke Aug 22 '14 at 00:31
2

You may want to check out the Twitter Emoji (Twemoji) library on Github: https://github.com/twitter/twemoji

According to the readme, Twemoji is:

A simple library that provides standard Unicode emoji support across all platforms.

Works well for me on Chrome, which has been troublesome for certain characters on my machine.

Phil
  • 2,797
  • 1
  • 24
  • 30
1

Just use the newer (last) version of twemoji library. They solved this issue in it:

<script src="//twemoji.maxcdn.com/2/twemoji.min.js?2.2"></script>
Ramin Bateni
  • 16,499
  • 9
  • 69
  • 98
0

The square is not a symbol for an unrecognizable character, but for a character that cannot be rendered because there is no glyph for it in the fonts being used. Open Sans does not help, since it does not contain these emoji symbols. You would need to try and find a font that has them and use it as a web font.

Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390