CODEWITHSUNDEEP
google-chromeutf-8fontsfont-awesomeemoji
Basj
Basj

Reputation: 46353

Consistent display of UTF8 emojis across browsers

I have a text-only comment textbox (users can submit comments), and UTF8 emojis are accepted, such as "Hello 😂".

This is finally displayed in a <div class="comment">, that already uses a Google Font (Barlow Semi Condensed).

How to make that the rendering of this emoji is consistent across the different browsers?

For example, 😂 (codepoint U+1F602) does not appear in color in Chrome for Windows (at least on certain versions), but only in black and white, whereas, it appears in yellow and blue colors in Firefox.

I thought that using font-awesome would allow this, but instead font-awesome requires that we use <i class="..."></i> instead which is not possible since users will submit ordinary text, containg UTF8 emojis.

Upvotes: 0

Views: 1231

Answers (1)

AmigoJack
AmigoJack

Reputation: 6174

This is impossible for various reasons:

  • Windows officially supports multi colored fonts since 8.1. If a browser uses the font rendering of the system then results will differ by the operating system and its version already.
  • Gecko engines (e.g. Firefox) and Goanna engines (e.g. Pale Moon) come with their own font(s) (which you can delete) and on top render that font themselves, instead of relying to the system. As a result even under Windows 7 the browsers render colored Emojis although the operating system itself is unable to do that.
  • The default font and/or the default font for Emojis may differ as per personal settings, either in the scope of the operating system (user settings) and/or in the scope of an installation (program settings). Settings can be modified - not everybody uses the factory setting of Times New Roman as default font for websites in an internet browser. Likewise the default for displaying Emojis can be different if you leave it undefined (as per CSS).

It's as impossible as expecting a user to have installed the fonts of interest and also in the minimal version of interest: having Tahoma is one question, but having version 5.22 or 7.00 of it is yet another.

Upvotes: 1

Related Questions