How to prevent Unicode characters from rendering as emoji in HTML from JavaScript?

Using Unicode variation selector-15 (U+FE0E)

Sometimes, to maintain the text form of the Unicode, you may append U+FE0E, the Unicode variation selector called VS15 after the emoji character. This guides the character to render in text-style:

<span>☎&#xFE0E;</span> 


Don't worry, your telephone emoji won't dial-up the internet dial tone but show up as a decent symbol.

A CSS solution to restrict wayward emojis

Apply a global prescription to your Unicode characters by setting the font-family in your CSS to monospace. This ensures that all Unicode glyphs remain textual:

.emoji-text {
  font-family: monospace;
}


Consider it a straitjacket for those sprightly emojis!

CSS tricks to tame the emojis

A mild CSS placebo like text-shadow with transparent color to fool the emoji and display it flat:

span.no-emoji {
  text-shadow: 0 0 transparent;
}


Or apply the monochromatic filter to keep the colorful emojis in check:

span.no-color {
  filter: grayscale(100%);
}


Take that, Rainbow Unicorn! 🦄

The power of Regex

Regex comes to rescue yet again by filtering out those pesky emojis within JavaScript:

let text = '🌅 Good morning!';
let sunriseText = text.replace(/[\u{1F600}-\u{1F64F}]/gu, '');
console.log(sunriseText); // outputs ' Good morning!' sans the sunrise emoji


The sun still shines bright, even without the sunrise emoji.

Rust's unicode segmentation to slice through strings

Should you require advanced text manipulation, as in graphing segmentation, Rust's unicode-segmentation crate is a powerful tool:

use unicode_segmentation::UnicodeSegmentation;

let s = '👨‍👨‍👧‍👧';
let g = UnicodeSegmentation::graphemes(s, true).collect::<Vec<&str>>();
println!("{:?}", g); // Will slice and serve the emoji sequence as a single grapheme cluster.


Unicode strings, now served table d'hote!

Mind the limitations

Be aware, CSS solutions might have filters you can't override. Furthermore, not all browsers interpret CSS properties equally. Always embrace the practice of cross-browser testing.

For those desiring simplicity

Simple CSS-only solutions without JavaScript jargon can also serve the purpose. Building on font-family or using text-shadow shows that less is sometimes more.

Perfecting the emoji appearance

The CSS magic can also help developers tailor the look of emojis. How about playing with color transparency and shadow effects?

Diving deeper with CSS techniques

Exploring various CSS techniques can lead to more ways of handling the display issues associated with Unicode and emojis. Be it choosing the perfect font family or deploying CSS filters, know that you're the artist and the canvas is wide open.

Browser-specific bugs

Not all browsers are created equal. Certain browsers, such as Chrome and Edge, may not completely honor variation selectors such as VS15 (U+FE0E). As always, good to have backup plans.