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

user_7361479 0
Viewed 223

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:

Invasive emoji

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

Other non-emoji renderings

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?

fonts css
3 Answers

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;
}

Solved

user_73614790

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.

user_25667370

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.

user_91373950
Related