120

I can see these characters as colored icons:

🌍🌎🌏✅️

It only works in Firefox for me. If you can't see the characters in color, it looks like this on my system (it's probably font-dependent):

image description

I can even see them in firebug and tab titles:

image description

image description

image description

And there's full file of them. I also did this document.title animation with them, which demonstrates that they work even outside HTML.

What is that?

144

These characters are emojis that are recognized by the Unicode standards which defines what each character presents.

The exact look for them is different for each OS, and each application, but all depict the same thing.

The globe (🌏) is Unicode character 1F30F and is called EARTH GLOBE ASIA-AUSTRALIA. the 2nd one (✅) is called WHITE HEAVY CHECK MARK and is Unicode 2705.

In that manner, there are thousands of emojis, some that every application supports and some with less support. See complete list here http://www.fileformat.info/info/emoji/browsertest.htm

  • 55
    The exact look for them depends on the font you use, because font are the things that define how a character should look and emojis are just characters. – totymedli Feb 1 '17 at 13:17
  • 23
    Actually, the second one is (as you said) WHITE HEAVY CHECK MARK combined with VARIATION SELECTOR-16. ✅️ copied from the question looks like a white checkmark in a green box, ✅ copied from your answer looks like a white checkmark with a black border, and when I paste the variation selector after your ✅ white checkmark with a black border, I get the same ✅️ white checkmark in a green box. Screenshot of this comment for clarity – Stijn Feb 1 '17 at 18:25
  • 4
    They might not have noticed due to poor font support. On my browser, the green backdrop doesn't show up. – user2357112 Feb 1 '17 at 18:31
  • 8
    @Stijn, for me in Chrome both of them are the green-boxed checkmark i.imgur.com/Cv5RTFM.png – Yisroel Tech Feb 1 '17 at 18:47
  • 6
    This doesn't answer the question, which is about how it's being rendered in Firefox, not why the emoji are there. – oldmud0 Feb 4 '17 at 2:45
72

Firefox is using a special font for these emoji characters. It's employing a relatively new and otherwise rarely used feature of TrueType fonts: layered colour glyphs. Other than that (i.e. having a special font with pre-coloured glyphs) these icons are ordinary Unicode characters.

Windows has native support for these coloured fonts only in versions 8.1 and onwards, thus Firefox installs EmojiOne privately and uses its own font renderer for it in Windows 7. This also explains the absence of colourful emoji icons in most other applications.

  • 2
    If there's native support for layered colour glyphs in Win10, why do they still show up in monochrome in, for instance, Edge? – Bas Feb 2 '17 at 8:29
  • 5
    @Bas, as we can see via Edge developer tools, Segoe UI Emoji doesn't get selected to display this page (other monochrome fonts do). Inserting the font to the font-family attribute does the trick: i.imgur.com/IXiNC86.png – aitap Feb 2 '17 at 15:09
  • 4
    @Bas Colored emoji support is in the latest Edge previews and will be in the next public version. – Josiah Keller Feb 2 '17 at 18:36
  • 1
    Curiously enough, Firefox on my Ubuntu 16.10 box displays black and white glyphs (I have booted into Win10 afterwards and confirmed they are indeed coloured) – Luke Feb 3 '17 at 17:02
  • 2
    @Luke Ubuntu has color glyph support planned for Unity 8. – stommestack Feb 4 '17 at 19:56
25

In short: Firefox uses a font in which these symbols look the way they do.

These characters are a part of the Unicode Standard.

Unicode is a computing industry standard for the consistent encoding, representation, and handling of text expressed in most of the world's writing systems. Developed in conjunction with the Universal Coded Character Set (UCS) standard and published as The Unicode Standard, the latest version of Unicode contains a repertoire of more than 128,000 characters covering 135 modern and historic scripts, as well as multiple symbol sets. -Wikipedia

Thus, unlike ASCII (which had very few), Unicode contains several symbol sets. Now while it has been standardized on what code should represent what alphabet or symbol, Unicode does not exactly specify how the symbol should look like. Thus, all operating systems have their own sets of symbol graphics to look different. This may include some being colored and some being just outlines or black and white.

Also, it is also possible for fonts to have their own set of art for these symbols so that the characters can go with the feel of the application. Even inside the application, you may have different pages using different sets of images. Thus, you can interact with the character like you would otherwise, but it would just look different.

You can see how exactly emoji (for 🌍🌎🌏, skip to #1483) look on various platforms here.

  • 4
    128,000 is a lot of icons to draw. I don't blame the artists for going with black-and-white icons instead of full color. – Dan Feb 3 '17 at 16:10
  • @Dan, 128,000 is the number of characters, not symbols. These include language characters too, which are huge in number for languages like Japanese or Mandarin. – PulseJet Feb 3 '17 at 16:49
  • 1
    @Dan, I only meant that there are not 128,000 symbols that would have to be colored. Not saying there are not many to color, but that's nowhere close to 128,000. – PulseJet Feb 3 '17 at 20:07
  • 1
    Ah, I didn't mean to imply that they should all be colored, merely that drawing that many of anything is enough to make me not want to complicate (i.e. color) any of them. Haha. – Dan Feb 3 '17 at 21:25
  • 2
    @Dan no one draws that much code points, and almost no fonts contain characters for all Unicode code points. The font renderer will substitute glyphs from another font when the current font doesn't contain those glyphs. Why isn't there a font that contains all Unicode glyphs? – phuclv Feb 4 '17 at 1:06
2

These characters "work" the same way as other characters, such as a, ø, λ, ଶୁ, and , work. Characters are represented by an abstract number, which is used to select and index an available font to display the character.

On your system, it appears that Firefox does its own rendering, and has access to fonts containing glyphs for🌍, 🌎, 🌏 and ✅️. Other applications will normally use the fonts made available by the X server (or equivalent), so be restricted to fonts you've installed or pointed your server at (e.g. with xset +fp or similar).

Multi-colour fonts are a recent and still fairly experimental development; traditionally, font glyphs are a single colour that can be composed against any background.

1

It's different on each browser, tho you can add a specific font to your website, which loads in these emojis. For example:

This post over on Graphics Design Are there any free Emoji fonts? might also be interesting. Without such a custom icon font, you have to keep in mind, that your website will look different in every browser.


This is just a list intended to guide people to emojis and unicode smileys faster.

0

Those are just Unicode characters so any textboxes that support Unicode can display them without problem, provided the font and glyphs are available on the system. However the look and feel for each Unicode character depends on the renderer and font used for them.

Traditionally characters are filled only with a single color. Colored emojis are a quite new thing, hence their support varies from platform to platform. Various techniques have been invented for coloring like embedded PNGs, SVGs or layered masks. But all of them require a new renderer which was not available in older OSes.

As a result since version 50.0 Firefox has embedded its own renderer and font for supporting colored emoji. You can find it in the release notes

Changed

Added a built-in Emoji set for operating systems without native Emoji fonts (Windows 8.0 and lower and Linux)

The font file can be found in %FirefoxInstallDir%\fonts\EmojiOneMozilla.ttf

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.