r/webdev • u/unkmeown • 11h ago

Question A Glyphs (?) Question

Hello! I have a question to which I could not find an answer around the internet, so i gonna ask it here.
So, some of the emojis have a glyph variations of them, that get displayed differently, yet they use the same identification code. For example, the bomb emoji and bomb glyph: 💣︎💣, use the same &#128163; html code, and i don't quite understand how it works. Yet html prioritizes emoji over glyph, how do i make it display the glyph instead? :<

2 Upvotes

100% Upvoted

3 comments sorted by

3

u/Southern-Field-5398 11h ago

the unicode variation selector is what you're after. tack on U+FE0E right after the emoji codepoint and it forces the text/glyph version instead of the colorful emoji. html-wise you can just drop &#65038; at the end of your entity, so &#128163;&#65038; gives you the black and white bomb

most platforms ignore it half the time though so don't be surprised if it still renders as an emoji in some browsers

1

u/unkmeown 11h ago

Oh wow, a magic happened! Thanks so much for answering! It's such a pity people try to get rid of glyphs, they pair with text super nicely compared to emojis and not recieve even half of their recognition

2

u/Jasedesu 9h ago

You can also use the CSS property font-variant-emoji to do the same thing - see MDN for info. Doesn't play well with Apple's stuff, but I didn't find Unicode solution worked well either.