🔥 those 🤬 emojis

Working to simplify this website’s CSS last week, I updated the pages which promote my CSS Grid templates. I’d called them Layout Love, but I wanted to restyle them as Layout ❤︎. However, I encountered an issue when I checked the pages on iOS and iPadOS, which turned my Unicode characters into emojis.

Restyling this text to display Layout ❤︎ meant rewriting Layout Love as:

Layout ❤

That ❤ is the Unicode character for a heart, which displays the same colour as the text around it in the majority of browsers. However, on iOS and iPadOS, instead of a flat heart, I got a glossy red heart emoji. That might work for some designs, but not for mine.

It turns out, this behaviour isn’t limited to hearts. It did the same to the spades in my Code ♠︎ Shirts ♠︎ Rock titles and the play/pause icons in my banner animations. I asked the socials and Colin kindly replied with a link to a post by Kevin Schaul about the “plain text modifier,” something I’d not come across.

On iOS Safari (and likely Android and other devices), these are rendered in the cartoony, emoji style, which means trying to colour them with CSS doesn’t work. Fortunately, there is an easy (but cryptic) fix: Simply append ︎ immediately following your unicode character, like ■︎. The code modifies the previous character to be rendered in text style rather than emoji style.

So now I need to write:

Layout ❤︎

Kevin’s post linked to another, more detailed explanation in 2015 by Matias Singers. So, I guess I’m not the only person to struggle with this.

I would be better if there was a meta tag I could use to tell Safari to turn this behaviour off, but there isn’t. I’m never in a million years going to remember how to type ︎ so I’ve added it as a new aText snippet so I only have to type §mod.

🍻