Use unicode version for unicode (highcharts and plain html)

Question

Refer to this jsfiddle .

It includes text, both inside the diagram of tall diagrams and outside, where the text contains the symbol "BC", as shown on this page . I also included options with both selectors (see also here ) to see what the difference is.

External charts:

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

Inside the high cards:

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

Now it seems to depend on which browser you are viewing in this jsfiddle about whether you get a color version of the sun symbol or a version of black text ... or even both versions!

For example, in Chrome on the Windows desktop, you get the regular version:

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

I really don't like that the style of emoji versions is completely out of control, especially when the style is horribly confronted with the rest of the page (for example, the sun symbol is bright orange and the equivalent moon symbol is bright blue).

So, I would like to make the page use the regular version in all browsers in all contexts ... any idea how?

It would seem completely insane to resort to the use of images, because I want the characters to have the same appearance as the surrounding text, including the color of the text (which the user can change as he wishes). And doesn't UTF-8 mean being a character encoding, not an emoji encoding? I have nothing against cute emoticons per se, but only in the right context.

Answer 1

The appearance of the characters depends on the font you are using.

Check out the updated jsfiddle . I just changed the font on all elements:

 * {font-family:serif !important} 

Any element can have its own font.
It depends on which font to use. Therefore, select the correct one and configure it.

Update

I need to clarify a few points:

• There are NO "safe" or "unsafe" fonts.
• Basically, the font works as a repository with the key {code1 => glyph1, code2 => glyph2, ...} , enters the code and receives the corresponding character
• The font may or may not contain a pair of code-glyphs
• You can create your own font containing only the necessary characters that have codes of your choice associated with the glyphs of your choice, for example. \u263d can be any glyph you want, and not always moon
• In css font-family: you can specify one or more font families and / or common families ( see here ). When the style is applied to the text, the browser converts each character ( 'A', ' ' or '\u263d' ) into its code and tries to get the glyph from the specified font families until the glyph is found or no more fonts.
  If the font contains the desired pair of code-glyphs, we can see the glyph, if not, we can see the space,?, Outlined rectangle, rectangle with internal code, etc. (Depends on the browser).

In this case, the browser {font-family:serif} for \u263d searches for the glyph for \u263d in all system fonts in the generic serif family. And on Android, he first finds what you call "emoji".

The solution should be to find (see jsfiddle ) or make (see another jsfiddle ) a font with the desired glyphs and apply it to the necessary elements.

We hope that this will be useful and understandable.

Answer 2

Kosh's answer Really hit something. Indeed, changing the font family on all elements in serif really leads to the fact that a simple character is used in highcharts, even in Android 7. The problem is that in reality I can not stick to one "safe" font family ... the font can be specified by the user from any web font specified in Google fonts .

I updated jsfiddle to enable the download and use of the web font:

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

And I use this font everywhere, both inside and outside of high graphics. The result in Windows Chrome is still (plain text characters), but now the result in Android 7 Chrome is:

So now it’s more likely that the problem is not high definition, after all, and more of a problem with a font like Kosh Very, as indicated. Indeed, in the original example, without any font specified explicitly, the font used in tall charts is different from the font used outside ... and this is probably the difference in the style of the character.

But I tried a couple of other completely different web fonts in the updated jsfiddle example with the same result. In other words, the symbol of the sun from emoji does not seem to follow from the font itself. Perhaps when a font is missing a specific character (these fonts probably do not have a character for each value in unicode), then it returns to using characters from the system font? From other discussions, it seems that these color emulators can only be displayed on Samsung devices, so maybe the system font on Samsung has this data?

The solution (or workaround) seems to use the "safe font" only where it is needed (for graphic characters) and the desired font elsewhere, according to this updated jsfiddle , which gives the following result on Android 7 Chrome:

BUT I hit this problem with this solution ... it works great for the sun symbol as above, but for the very next Unicode character (moon symbol) it is not. therefore, it is possible that this character is not in the serif font family, and it returns to the system emoji again.

jsfiddle with moon

So the solution is probably still very heterogeneous ... perhaps limited to just a few characters.

Even for a font such as Cardo that explicitly supports the moon symbol \u263d , this example does not work in Android Chrome ... you still get the color version of emoji, not just the version.