Unicode Variant Form

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:¹

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	↩️

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	▶️

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

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.³

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>↩︎</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 ︎ after the original character (or entity).