Unicode VS mobile

About unicode glyphs on mobile devices, and how to make them render properly (and not with strange emojis).

Written by dubiousdisc
Posted on July 3rd 2017

I am very fascinated by symbols and their study. I use them everywhere in my illustration and in my design work. Unicode glyphs find their way in my site designs, in my blog posts, and even in my forum signatures. I essentially swear by Copy Paste Character. Hell, just glance at any page of The Gifts of Darkness for three seconds and you'll most likely find at least one alchemical symbol for Fire and... But I digress.

In any case, you can imagine that the fact that these glyphs are not always displayed as intended bothers me a lot.

Case in point:

Sun symbol

The sun symbol: a simple, elegant, important symbol as ancient as humanity itself. This is displayed in a website by the code ☉ and properly rendered on most desktop computers.

Sun symbol... on mobile

...And this is how the same Unicode glyph looks like on my Android phone. I am displeased.

The reason why ☉ does not render properly on Android has to do with the fact that the default system fonts have a very limited number of glyphs which do not include this symbol. In lack of a font-based character, the phone manifacturer's own set of emoji sweeps in, and replaces the sun symbol with its own sun emoji. Note that the Unicode symbol is not simply replaced with this picture on all mobile devices; which picture is displayed is dependent on the phone in question, so you cannot even count on the pictorial representation being uniform across devices. In this case, I am seeing my Samsung device's default sun emoji; another user with another device will see a completely different picture which may convey a different meaning (here is a very interesting read on the standardization of emojis), which only adds another layer to our problem.

The sun picture must go!

Fortunately, this is where the @font-face declaration comes to the rescue. What we need is to make sure that the sun symbol is rendered by a font which has the proper glyph within its list of characters. Some good free options are GNU Unifont and DejaVu. In this case, let's use GNU Unifont.

So our CSS is:

font-family: 'GNU Unifont';
src: url('unifont.ttf') format('truetype');

font-family: "GNU Unifont";

For the HTML, we wrap the symbol with the .unicodefix class:

<span class="unicodefix">&#9737;</span>

And now our sun symbol is consistently rendered with the right glyph across all devices!

One issue with this solution is that it requires each problem glyph to be wrapped with a class every time it occurs. This is a suitable solution for isolated cases (for example, if the glyphs are used as decorative elements in a site's footer), but it requires some presentational markup, and becomes not as feasible in cases where the glyphs are extensively used through a site.

For such cases, a more complex solution uses the unicode-range descriptor of @font-face. Following the example of this article, we can ensure that all instances of the sun symbol through a site are rendered with our glyph-rich font, and the rest of the text can be styled as desired.

font-family: 'Glyphs';
src: url('unifont.ttf') format('truetype');
unicode-range: U+2609;

font-family: Glyphs, Arial, sans-serif;

The unicode-range line here makes it so that the only character this applies to is the sun symbol, U+2609. You will need a converter such as this one to figure out what the code for your symbol is; unicode-range takes the Unicode U+hex notation.

The font stack we're using means that the first font that the browser will try to use is our defined Glyphs font, which only applies to the sun symbol; all characters that are not the sun symbol will be displayed in the second font in the stack, and from then on it works like any other CSS font stack. At the time of writing this article (July 2017), this method has good support across browsers, and can be considered mostly safe to use.

And good riddance to that stupid sun.