Unicode and Emoji

Volume 4, Issue 29; 28 May 2020

This morning, I tweeted about Unicode and emoji. Here’s a little back story and a few things I learned along the way.

I’ve been spending time in the evenings doing a little implementation work for my Balisage paper.It’s about markup and XSLT and pipelines and if you’re interested in those sorts of things you should register for Balisage. It’s a uniquely online event this year. If traveling to Rockville is a challenge, don’t miss this chance! I ran across a case where a combination of options might make a link break. I wanted to make that stand out in some way so that if you’re proofing a document, you’re more likely to find it. At the same time, I don’t want to insert markup that makes the document unpublishable. (Maybe you don’t have time to fix it, or maybe you’re going to print it on dead trees and you don’t care.)

I’ve been using CSS more on this project and that seemed like a good solution. I’d put the broken link on a red background and add a couple of typographic indicators (::before and ::after selectors!). I had something like this in mind :

Intended rendering

The actual broken link in this example is the “①”, for reasons that aren’t important right now. A quick search for “right hand pointing” lead me to U+01F449 (👉) and “link” found me U+01F517 (🔗). Great, I thought.

Initial rendering

Not so great. Blech, in fact. It’s kind of, sort of ok enlarged this way, but at “normal size” it’s a visual mess.

On the one hand, I’m glad I can put random Unicode characters into a web browser and they mostly just work. On the other hand, I don’t necessarily want little colored pictures. I just want plain typographic characters.

As I said, I tweeted about this. The thread that followed was really interesting. Michael Piotrowski pointed me to variation selectors. Various commentors suggested that they work (or don’t) depending on your operating system and/or the specific characters you apply them to.

I tried them out on 👉︎ and 🔗︎. VS15 (U+FE0E) suppresses the emoji versions in Safari on the Mac, but not in Safari on the iPad. It also suppresses them in Firefox on Linux, but not in Firefox on the Mac. ¯\_(ツ)_/¯ (And Twitter turns them all into SVG images, so that’s that. But at least it’s SVG, right?)

Michael also pointed out that U+261E (☞) would probably be a better choice and I think he’s right. It did improve things.

Better rendering

But before I even started this thread, I’d given up on the emoji on the red background and switched to this.

Final rendering

Which might just be better anyway.