0

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.

Basj
  • 41,386
  • 99
  • 383
  • 673
  • 1
    Emojis are normal Unicode characters. So just use a normal webfont, and specify the webfont in CSS. You can select the ranges. In any case, users want consistent emjiis on own platform. They do not care about what other browsers/operating system will display, so, if you have not a requirement from designed point-of-view, "consistent across browser" is the worst consistency for the user – Giacomo Catenazzi Feb 04 '22 at 14:06
  • [1] Have you considered creating and using your own font? [This answer](https://stackoverflow.com/a/27410391/2985643) to [Create webfont with Unicode Supplementary Multilingual Plane symbols](https://stackoverflow.com/q/19824628/2985643) explains how to do that. Here is [the experimental emoji icon font](https://github.com/jslegers/emoji-icon-font) that he created. [2] For what it's worth, is rendering fine for me with Chrome Version 98.0.4758.82 on Windows 10.0.19043.1526. – skomisa Feb 11 '22 at 06:13

1 Answers1

1

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.

AmigoJack
  • 5,234
  • 1
  • 15
  • 31