Shields: emoji sequences do not render in some browsers

[HouCoder]

Are you experiencing an issue with...

• [x] [shields.io](https://shields.io/#/)
• [ ] My own instance
• [ ] [badge-maker NPM package](https://www.npmjs.com/package/badge-maker)

:beetle: Description

Here is my code:

[![About me](https://img.shields.io/badge/About%20me-👨‍💻-green.svg)](https://shields.io/)

The emoji I'm using is this one - https://emojipedia.org/man-technologist/ , but when I try to put it in my markdown doc, the finial rendered is this:

Seems the 👨‍💻 was split into two parts during the image generating process.

:link: https://img.shields.io/badge/About%20me-👨‍💻-green.svg

[chris48s]

To quote from the emojipedia link you posted:

The Man Technologist emoji is a ZWJ sequence combining 👨 Man, Zero Width Joiner and 💻 Laptop. These display as a single emoji on supported platforms.

We have seen this before with some subset of emoji, but it doesn't happen in all browsers. For example, the link you posted https://img.shields.io/badge/About%20me-%F0%9F%91%A8%E2%80%8D%F0%9F%92%BB-green.svg

shows as

in firefox for me, but if I hit that in Chromium, I get

Similarly, if I hit https://img.shields.io/badge/%F0%9F%87%B3%F0%9F%87%B4%20norway-lightgrey.svg in firefox I get

whereas in Chromium, I get

(🇳🇴 is also an emoji sequence)

AFAIK we're rendering the emoji correctly and passing the correct sequence to the browser. Note the rendered output contains

<text aria-hidden="true" x="775" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="210">👨‍💻</text>

but AFAIK, Chromium is capable of rendering that as a single-character emoji in some contexts, although if I view your GH issue in Chromium I've got

whereas in Firefox I've got

..so definitely not an issue unique to sheilds there.

I guess how emoji are rendered is a function of both browser/platform and also what font is being used (and maybe other things?) so it may be that this is caused by some intersection of font/browser. It may be this is not a problem we can solve in shields, but it might be partly about the (fallback)fonts we're using. Any emoji experts out there got any input on this?

Whatever we do (if anything), one fairly large caveat to be aware of when using emoji in any context is that your user's experience of them is going to vary fairly widely depending on who is looking at it in what environment.

[HouCoder]

Well explained, thanks!