􀀂􀀟􀀍􀀆 􀀂􀀜􀀍􀀉 Presentation selectors

In some HTML, I used the ↩ HTML entity, intending to product a nice classy U+21A9 LEFTWARDS ARROW WITH HOOK as described in the Arrows Unicode block (PDF). I built my site and tested it in Firefox, and it looked as I expected, like so:

↩︎

This morning, upon awakening from agitated dreams (and promptly looking at my own website on my phone before getting out of bed), I found the character had been transformed into a monstrous vermin emoji, like so:

↩️

Outrageous. Ridiculous! Sad, shameful, and uncouth.

This was caused by different default presentation between Firefox on macOS and Safari on iOS. In fact, those two symbols are both valid representations of the U+21A9 LEFTWARDS ARROW WITH HOOK character that I put in my HTML.

I was reminded that emoji are not Unicode codepoints, but glyphs. Some glyphs have their own codepoint; some are made up of multiple codepoints strung together in a certain order, and some share a codepoint with other glyphs.

U+21A9 LEFTWARDS ARROW WITH HOOK is a codepoint in that latter category. For codepoints like these, text rendering engines can decide which glyph to use however they like. Fortunately, however, I can use presentation selectors to specify the one I want.

• ↩ by itself will be rendered according to the browser’s defaults, which for your browser is ↩.
• ↩︎ will be rendered as text: ↩︎.
• ↩️ will be rendered as emoji: ↩️.

Postscript

I tripped over this last night when implementing section links, so that each TIL has a link to the TILs section like ↩︎ /til/, each blog post has a link to the blog section, etc.

But when writing up this TIL, I wrote a footnote¹. Lo and behold, the footnote also has a U+21A9 LEFTWARDS ARROW WITH HOOK as a link to return to the main content, and it is using the text presentation selector to avoid emojification. I don’t control this, however; I believe it comes from the goldmark markdown processor, which appears to insert the text presentation selector automatically.

Something I didn’t appreciate until now is that inspector from the browser dev tools, at least in Firefox and Chrome on macOS, will display the rendered character like ↩︎ or ↩️ not HTML entities like ↩︎ or ↩️ even if that’s what comes across the wire. You have to “view source” to see what is in the HTML.

(Caveat lector: By the time you read this, the layout may have changed.)