6

I'm experimenting an odd behavior for some emojis (the ⚠️ emoji, in particular, gets converted to its symbol version).

What I cannot explain is why it works on some websites and not in others.

For instance, using the MacOS "Emoji finder" (cmd + ctrl + space) and selecting the "warning" emoji, it displays the emoji in Asana, but it converts the emoji into it's symbol version in StackOverflow:

⚠️ (I would expect an emoji there, not a symbol)

I'm merely wondering why it works "as expected" in some websites and not in others. Does it have to do with fonts?

Here is the expected emoji enter image description here

I'm experienced that behavior with Chrome and Brave browsers, under MacOS Monterey 12.2.1.

Edit: Here is a video that hopefully explains things better

Edit 2 Here is what I see:

enter image description here

Vadorequest
  • 16,593
  • 24
  • 118
  • 215
  • What do you mean here by "symbol version." The ⚠️ in your question (and in this comment) is an emoji. Are you seeing it as ⚠ somewhere perhaps? (That's its text form.) – Rob Napier May 01 '22 at 23:16
  • I meant, I select something that looks like an image/icon but what's displayed is a glyph/text instead. Why doesn't it displays as image/icon? – Vadorequest May 04 '22 at 15:43
  • I think you're going to need to post some images of what you mean. In the above question, the ⚠️ before "(I would expect an emoji there)" looks identical to the ⚠️ in the FREQUENTLY USED section of the image you posted (when viewed on Safari). Please post an image of what you mean by the "symbol version." I don't have access to Asana to test what you're describing. ⚠️ is an emoji. Yes, it is possible for different sites to have different fonts and those fonts to present emoji differently. The default Mac emoji font is Apple Color Emoji. – Rob Napier May 04 '22 at 15:57
  • It's also possible for websites with custom display logic to replace an emoji glyph with an image. That's up to the website to code. (They search for characters, and replace the character with an `img` tag.) You'd have to look at the HTML to see if they're doing that. But the behavior of StackOverflow is "as expected," at least on Safari. – Rob Napier May 04 '22 at 16:00
  • Thanks for the feedback, I've edited and recorded a video (https://youtu.be/InWq2AdK1KY) to explain it better! – Vadorequest May 05 '22 at 10:40
  • 1
    That looks like a font failure on your platform or in your browser. What you're seeing is the "text presentation" form of that character, likely because there is no emoji font in the cascade list of the font you're using. I don't see the behavior you're describing in my browser (Safari on Mac). I would explore whether you're doing anything unusual with fonts (perhaps custom user CSS, or a plugin). In my browser, ⚠️ is the emoji form and ⚠ is the text form. I suspect both are showing up in the text form in your browser. – Rob Napier May 05 '22 at 12:54
  • Specifically, the emoji form is the 2-character sequence: ⚠ WARNING SIGN (U+26A0), followed by VARIATION SELECTOR-16 (U+FE0F). So another possibility is that something is filtering the VS (U+FE0F) character for you (but not for other users). At a minimum, you should edit your question to make clear what browser you're using on what OS (though I would also make sure to turn off all extensions or plugins, and possibly experiment w/ another browser). – Rob Napier May 05 '22 at 12:57
  • Thanks, I didn't know that! I'm using Brave and Chrome under MacOS. – Vadorequest May 06 '22 at 15:26
  • 1
    Just tested with Chrome, and yes, Chrome appears to be broken, and does not correctly render this character. I see other references to this: https://stackoverflow.com/questions/51902495/chrome-is-not-displaying-my-emoji-correctly https://stackoverflow.com/questions/54519758/flag-emojis-not-rendering https://www.reddit.com/r/chrome/comments/dit5iw/this_emoji_renders_in_firefox_does_not_render_in/ I recommend searching for (and possibly opening) a defect with the Chrome team. – Rob Napier May 06 '22 at 17:28
  • 1
    What a rabbit hole I went down to! Thanks xD – Vadorequest May 07 '22 at 17:10

1 Answers1

2

It is because how browsers renders the character, the reason why you see different representations of the same character with the same browser can be probably, some websites are appending "unicode variation selector": ︎ at the end of the character to be able to style it freely without relying on browser to render it.

A more detailed explanation: https://tonsky.me/blog/emoji/ and an example: https://mefody.dev/chunks/emoji-to-text/

mow
  • 271
  • 2
  • 6
  • 1
    That's interesting, could you explain a bit more in-depth? For instance, how would a developer ensure the ⚠️ is displayed as an emoji and not as text? – Vadorequest May 06 '22 at 15:30
  • 2
    I assume there is no way to guarantee it currently. The "︎" is a unicode standard but implementation on all browsers may differ, I updated my answer with some links. – mow May 06 '22 at 15:54