CSS

The Problem (and Solution)

↘ = ↘ (which varies across operating systems and web browsers)
↘︎ = ↘︎ (which is consistent across web browsers—at least on the same operating system)

Append your character’s hex code, HTML code, or HTML entity with ︎. If working with unicode, append with U+FE0E (plus a preceding space).

The FE0E part denotes the variation selector, which determines the variant of the preceding character to use. (Characters can have multiple displays.) Without specifying the variation selector, web browsers will fall back to a default selector for rendering.

Specifying the variation selector also serendipitously thwarts WordPress’s emoji script. This approach is fine for one-offs, but if you want to totally disable WP emojis, then look into comprehensive options.

Bonus Technique

Similarly, a CSS pseudo-element can be used to bypass browser rendering:

.css-class::before { content: "\2198\FE0E" }

Sources

• https://meta.stackexchange.com/a/223447
• https://stackoverflow.com/a/37189611
• https://meta.stackexchange.com/q/261074
• https://www.toptal.com/designers/htmlarrows/

I had a difficult, hair-twirling time (hair-twirling being a prime indicator of internalized consternation) attempting to control the vertical positioning of the placeholder attribute of a search input field, located here, in Safari. Here’s a gif to illustrate the issue:

The placeholder attribute (gray text) differed in line-height from the value attribute (black text), so as I began to type in the field, it felt like the text was shifting down two pixels, and it was vexing. I tried redeclaring the line-height of the input, but, I assume to due wonkiness with my CSS in conjunction with Safari’s user agent stylesheet, the texts still didn’t align satisfactorily.

I subsequently resorted to fiddling with padding, vertical-align, and position to no avail. Then, huzzah:

line-height: revert; is a valid property–value combo I’d never before encountered and that appears undocumented. (I only came across it cycling through the populated values for line-height in Safari’s web inspector.) In Chrome, the placeholder assumes line-height without issue. Goofy.