How can I prevent these characters ("♈♉♊♋♌♍♎♏♐♑♒♓") from being replaced by emoji?

Question

I'm working on a simulation of the Prague Astronomical Clock (https://shetline.com/orloj). I'm trying to show the glyphs for signs of the zodiac, which are (along with other astronomical symbols) in the Unicode range U+263C-2653.

I want simple text glyphs, but various web browsers oh-so-helpfully replace the characters with emoji, like this:

There are, however, clearly non-emoji versions of these characters available:

I've tried this:

@font-face {
  font-family: 'NoEmojiAstronomy';
  src: local('Apple Symbol'); // Have tried source other fonts, listing multiple fonts too
  unicode-range: U+263C-2653;
}

.info-panel {
  background-color: $controls-background;
  color: $controls-text;
  font: 14px NoEmojiAstronomy, Arial, sans-serif;
  padding: 0.5em 2.5em 0.5em 0.5em;
  position: relative;

This hasn't helped. I'm still getting the emoji instead. Any ideas how to fix this?

On my browser, the characters are being rendered [differently](https://i.stack.imgur.com/LEb9D.png) on the tab title and on the website itself. So maybe this might even have a platform dependent variations. Is there a way for you to use the UTF-8 codes given `E2 99 88...` on the character viewer instead of the unicode identifer? — cSharp, Apr 13 '22 at 02:45

kshetline · Answer 1 · 2022-04-13T05:09:41.497

1

Ah! I just had to try more fonts, using the correct syntax for listing multiple fonts.

@font-face {
  font-family: 'NoEmojiAstronomy';
  src: local("Apple Symbol"), local("Segoe UI Symbol"), local("Arial Unicode MS"), local("Menlo"), local("sans-serif");
  unicode-range: U+263C-2653;
}

edited Apr 13 '22 at 05:09

answered Apr 13 '22 at 02:50

kshetline

12,547
4
37
73

See if [this thread](https://stackoverflow.com/questions/32915485/how-to-prevent-unicode-characters-from-rendering-as-emoji-in-html-from-javascrip) helps in your case for a more elegant solution! – cSharp Apr 13 '22 at 02:58
2

To be 100% safe you could even add a web-font at the end. – Kaiido Apr 13 '22 at 02:59

score 0 · Answer 2 · answered Apr 13 '22 at 04:51

No matter what kinds of font-family you choose .There still will be some emojis which the os didn't suppot. The reason that os can display the emoji is the os builtin fontType has the corresponding code. Different os has different views. Twitter has a library replce emoji to images. Check the example ,you will see the difference.

<script src="https://twemoji.maxcdn.com/v/latest/twemoji.min.js" crossorigin="anonymous"></script>

<body>

    How can I prevent these characters ("♈♉♊♋♌♍♎♏♐♑♒♓") from being replaced by emoji?

    <span id="emo">
        How can I prevent these characters ("♈♉♊♋♌♍♎♏♐♑♒♓") from being replaced by emoji?
    </span>
    <script>
        twemoji.parse(document.querySelector('#emo'));
    </script>
</body>

Hope this may help you.

score 0 · Answer 3 · answered Apr 13 '22 at 14:12

In the Unicode range U+263C..2653, the characters U+2640, 2642 and 2648..2653 are used for emoji. But these can also be used as plain text (non-emoji) characters. (U+263C..263F, 2641 and 2643..2647 are never used for emoji.) When emoji from Japan were first added to Unicode, there was a decision (unfortunate, in retrospect) to unify emoji with existing symbol characters when possible. For situations like yours, the presentation can be controlled by the choice of font.

But Unicode also provides a way to reflect in the character sequence whether these characters should or should not be displayed as emoji, regardless of font. This is done by combining those characters with a variation selector character, U+FE0E to indicate non-emoji (text style), and U+FE0F to indicate emoji.

Base character	Default in browser	With U+FE0E	With U+FE0F
U+2640	♀	♀︎	♀️
U+2642	♂	♂︎	♂️
U+2648	♈	♈︎	♈️
U+2649	♉	♉︎	♉️
U+264A	♊	♊︎	♊️
U+264B	♋	♋︎	♋️
U+264C	♌	♌︎	♌️
U+264D	♍	♍︎	♍️
U+264E	♎	♎︎	♎️
U+264F	♏	♏︎	♏️
U+2650	♐	♐︎	♐️
U+2651	♑	♑︎	♑️
U+2652	♒	♒︎	♒️
U+2653	♓	♓︎	♓️

(The two right columns should display as text style and emoji style. If not, that's a bug or feature gap in the font being used.)

You can see a complete list of such variation sequences at https://unicode.org/Public/14.0.0/ucd/emoji/emoji-variation-sequences.txt.

I tried what you suggest here with this code: `toZodiac = (angle: number): string => '\uFE0E' + '\u2648♉♊♋♌♍♎♏♐♑♒♓'.charAt(floor(mod(angle, 360) / 30));`. This function is being call from an Angular document to inject the appropriate glyph. I even changed the Aries glyph to a Unicode escape, just in case some unexpect character encoding issue was involved. It didn't help, and I still need the @font-face hack. — kshetline, Apr 13 '22 at 16:01
The variation selector character U+FE0E needs to follow the symbol character. — Peter Constable, Apr 14 '22 at 04:47
I tried appending rather than prepending the U+FE0E, but still got the emoji. — kshetline, Apr 15 '22 at 13:35
The variation selector sequences are defined in Unicode as a way to indicate in the text what the desired display is. But there's a separate matter of whether the layout engine and font implementation are conformant. If you still get the emoji, report a bug to the font vendor. — Peter Constable, Apr 16 '22 at 18:00

How can I prevent these characters ("♈♉♊♋♌♍♎♏♐♑♒♓") from being replaced by emoji?

3 Answers3