QR Code contains TinyURL of this article.Unicode Variant Form

(or “How Not to Have Mobile Safari Replace Your Glyphs with Emoji”)

I noticed a behaviour on iOS that I wasn’t too enamoured with. Safari on my favourite mobile operating system was replacing a couple of characters in my content with Emoji… and it looked like shit.

Morphology

My posts often contain footnotes. In the traditional manner, I present a footnote with a superscript index like so:1

When nanoc — my CMS — renders the footnote, it appends to it the Unicode character U+21A9. The CMS hyperlinks that character back to the position in the main body of content where the footnote indicator occurs.

This is what U+21A9 looks like in a regular browser:

↩︎

This is how Safari on iOS renders that character:

Unicode Character Unicode Glyph Image Ref.
U+21A9 ↩️ Emoji: return button

Similarly, on my Archives page, I use the character U+25B6:

▶︎

iOS/Safari chooses to display this as:

Unicode Character Unicode Glyph Image Ref.
U+25B6 ▶️ Emoji: play button

And for my “I ♥︎ San Francisco” post, iOS/Safari thought I’d much prefer the title: “I ♥️ San Francisco.”2

Hell no! I invest a lot of time in refining the typography of the Perpetual βeta so that it renders as I want it to. The last thing I want is for a rendering engine to change glyphs on me.3

Unicode Variant

“A variant form is a different glyph for a character, encoded in Unicode through the mechanism of variation sequences: sequences in Unicode which consist of a base character followed by a variation selector character.” Wikipedia

After a lot of googling and sifting through the source code of other web-pages, I learned that we can counter iOS/Safari’s behaviour if we specify a Unicode Variant Form.

It’s easy enough to do. We simply append a variant selector to the recalcitrant characters:

<div>&#x21A9;&#xFE0E;</div>

The above HTML will yield the ↩︎ character, even on iOS.

tl;dr: If iOS/Safari chooses a Unicode Variant that you don’t want, append &#xFE0E; after the original character (or entity).

  1. This is a footnote. 😃 ↩︎

  2. Note: Due to the nature of these things, the iOS/Safari variants I’m trying to illustrate here will most likely only render the way I see it if you are reading this on an Apple device, with a WebKit browser. ↩︎

  3. Even the legendary John Gruber was bitten by this↩︎