126

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?

9

5 Answers 5

145

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 https://www.fileformat.info/info/emoji/browsertest.htm

18
  • 57
    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
    Commented Feb 1, 2017 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
    Commented Feb 1, 2017 at 18:25
  • 4
    They might not have noticed due to poor font support. On my browser, the green backdrop doesn't show up. Commented Feb 1, 2017 at 18:31
  • 8
    @Stijn, for me in Chrome both of them are the green-boxed checkmark i.imgur.com/Cv5RTFM.png Commented Feb 1, 2017 at 18:47
  • 8
    This doesn't answer the question, which is about how it's being rendered in Firefox, not why the emoji are there.
    – oldmud0
    Commented Feb 4, 2017 at 2:45
76

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.

7
  • 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
    Commented Feb 2, 2017 at 8:29
  • 6
    @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
    Commented Feb 2, 2017 at 15:09
  • 4
    @Bas Colored emoji support is in the latest Edge previews and will be in the next public version. Commented Feb 2, 2017 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
    Commented Feb 3, 2017 at 17:02
  • 2
    @Luke Ubuntu has color glyph support planned for Unity 8.
    – jobukkit
    Commented Feb 4, 2017 at 19:56
26

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.

6
  • 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
    Commented Feb 3, 2017 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
    Commented Feb 3, 2017 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
    Commented Feb 3, 2017 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
    Commented Feb 3, 2017 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
    Commented Feb 4, 2017 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

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 quite a 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

Update:

Firefox later switched to Twemoji

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .