Use non-emoji version of unicode character (highcharts and plain html)

Question

Please refer to this jsfiddle.

It includes text, both inside a highcharts chart and outside, where the text includes a "sun" character as shown in this page. I've also included variants both with and without variation selectors (see also here) to see what difference they make.

Outside highcharts:

<p>Embedded: &#x263C; &#x263C;&#xFE0E; &#x263C;&#xFE0F;</p>
symbols.innerHTML = '<p>Added: \u263C \u263C\uFE0E \u263C\uFE0F</p>';

Inside highcharts:

title: {
    text: 'In highcharts: \u263C \u263C\uFE0E \u263C\uFE0F'
},

Now, it seems to depend on which browser you view this jsfiddle as to whether you get a coloured emoji version of the sun symbol, or a plain-text black version... or even both versions!

For example, in Chrome on a Windows desktop you get the plain version all round:

... while in Chrome on Android 7 you get part-plain and part-emoji:

I really don't like that the style of the emoji versions is completely out of my control, particularly when the style clashes horribly with the rest of the page (e.g. the sun symbol is bright orange and the equivalent moon symbol is bright blue).

So I'd like to force the page to use the plain version on all browsers in all contexts... any idea how?

It would seem completely crazy to have to resort to using images, because I want the symbols to have the same appearance as the surrounding text, including text colour (which the user can change at will). And isn't UTF-8 meant to be a character encoding rather than an emoji encoding? I have nothing against cute emojis per se, but only in the right context.

Answer 1

The symbols appearance depends on the font you use.

Please look at your updated jsfiddle. I've just changed the font on all elements:

* {font-family:serif !important}

Any element can have its own font.
It's up to you which font to use. So choose the right one and tune it up.

Update

I have to clarify several points:

1. There are NO 'safe' or 'unsafe' fonts.
2. Basically font works like a key-value storage {code1 => glyph1, code2 => glyph2, ...}, input a code and get the corresponding glyph
3. Font may or may not contain any code-glyph pair
4. You can make your own font containing only desired symbols, having codes of your choice associated with glyphs of your choice e.g. \u263d can be any glyph you want, not always the moon
5. In css font-family: you can specify one or several font-families and/or generic-families (look here). When the style's being applied to the text the browser converts each symbol ('A', ' ' or '\u263d') to its code and tries to get the glyph from the specified font-families until the glyph has been found or no more fonts have left.
   If the font contains the desired code-glyph pair we can see a glyph, if not - we can see a space, ?, an outlined rectangle, a rectangle with the code inside, etc. (depends on the browser).

In this case: {font-family:serif} for \u263d browser searches for the glyph for \u263d in all system fonts of generic-family serif. And on Android it firstly finds what you name the 'emoji'.

The solution is to find (see the jsfiddle) or to make (see the other jsfiddle) a font with the desired glyphs and apply it to the desired elements.

Hope it's helpful and clear.

Answer 2

The answer by Kosh Very has hit on something. Indeed, changing the font-family on all elements to serif does indeed result in the plain symbol being used in highcharts, even in Android 7. The trouble is, in actual use I cannot stick to a single "safe" font family... the font can be specified by the user, from any web font listed on Google fonts.

I've updated the jsfiddle to include loading and use of a web font:

// see https://github.com/typekit/webfontloader
WebFont.load({
    google: {
      families: ['Fresca:400']
    }
});

And I use that font throughout, both inside and outside highcharts. The result on Windows Chrome is as before (plain text symbols all over), but now the result in Android 7 Chrome is:

So this now rather suggests that the issue isn't highcharts-specific after all, and more of a font issue as Kosh Very as indicated. Indeed in the original example, without any font stated explicitly, the font used in highcharts is different to that used outside... and probably hence the difference in symbol style.

But I've tried a couple of other completely different web fonts in the updated jsfiddle example, with the same result. In other words, the emoji sun symbol is not apparently coming from the font itself. Perhaps when a font is missing a particular character (these fonts probably don't have a character for every unicode value) then it reverts to using characters from the system font? From other discussions it seems that these coloured emojis might only show on Samsung devices, so maybe the system font on Samsung has these?

The solution (or workaround) seems to be use a "safe font" only where required (for the graphical characters), and your desired font elsewhere, as per this updated jsfiddle, which gives the following result on Android 7 Chrome:

BUT I've hit a snag with this solution... it works nicely for the sun symbol as above, but for the very next unicode character (moon symbol) it doesn't... so maybe that symbol is missing from the serif font family and it reverts again to system emoji.

jsfiddle with moon

So the solution is probably still very patchy... maybe only limited to certain symbols.

Even for a font like Cardo that apparently supports the moon character \u263d, this example doesn't work in Android Chrome... still get the coloured emoji version rather than the plain version.