Adam Cap

  • About
  • Mail
  • Archive/Search

CSS

code | Language … see also: PHP / command line / JavaScript / HTML

Prevent iOS + WordPress from Replacing Arrows (and Other HTML Symbols) with Emoji

↘︎ May 4, 2019⇠ | skip ⇢

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/

Me

circa 2017 (29 y/o)

about adam

Jump…

  • 19 May 4: Prevent iOS + WordPress from Replacing Arrows (and Other HTML Symbols) with Emoji #CSS #HTML
  • 19 Jan 18: Fix Line Height for Input Placeholders in Safari #CSS

More…
code (Post Type)

Fix Line Height for Input Placeholders in Safari

↘︎ Jan 18, 2019⇠ | skip ⇢

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.

Me

circa 2017 (29 y/o)

Popularly…

  • 19 Jan 18: Fix Line Height for Input Placeholders in Safari #CSS
  • 19 May 4: Prevent iOS + WordPress from Replacing Arrows (and Other HTML Symbols) with Emoji #CSS #HTML
  • 19 Jan 30: Save Jetpack “Site Stats” Pageviews as Post Meta #JavaScript #PHP #WordPress
  • 19 Jan 18: Add Partner/Associates/Tracking ID/Tag to Amazon Links #PHP #regex #WordPress
  • 19 Jan 16: Move from Local macOS Development Sandbox (MAMP) to Live Production Environment #command line #WordPress
  • 19 Jan 26: Use Git to Manage WordPress Projects Developed Locally on macOS #command line #WordPress
  • 19 Mar 23: Move from Live Production Environment to Local macOS Development Sandbox (MAMP) #command line #WordPress
  • 19 Jan 15: Add Media/Attachment Source Fields (and Display Image Sources in Content) #PHP #regex #WordPress
  • 19 Jan 18: Add Fancybox Attribute to Image Links #PHP #regex #WordPress
  • 19 Jan 7: Remove Nonbreaking Spaces ( ’s) from Content and Text Widgets #PHP #WordPress
  • 19 Jan 18: Automatically Bold (or Style) the First X Words of Content #PHP #regex #WordPress

More…
code (Post Type)

  • Home
  • About
  • Archive
  • Mail
  • Random
  • Dingus
  • Reading
  • Code

ADAM CAP is an elastic waistband enthusiast, hammock admirer, and rare dingus collector hailing from Berwyn, Pennsylvania.

My main interests at this time include reading, walking, and learning how to do everything faster.

Psst: If you find my website helpful or enjoyable, please join my newsletter and/or send me an email—I want to hear from you!

Disclosure: As an Amazon Associate I earn from qualifying purchases.

© 2009–2023 Adam Cap(riola) top ⇡