Emojis in "label" remove the right padding

[alvarocastro]

Are you experiencing an issue with...

• [x] shields.io
• [ ] My own instance
• [ ] badge-maker NPM package

:beetle: Description

Using emojis as the badge label removes the right padding, and there is no workaround for that since spaces (%20) are trimmed.

:link: Link to the badge

https://img.shields.io/badge/%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg

:bulb: Possible Solution

Not trimming spaces would be a cheap solution/workaround to this issue.

[paulmelnikow]

Hi! Thanks for the report.

This is how the badge is rendering for me:

Is that similar to what you're seeing?

Are you expecting more space between the two emoji, more padding around them, or both?

[alvarocastro]

This is how it's rendering for me (in chrome)

What I noticed is that if I use the browser zoom-in in the badge svg, the spacing on the right of the rocket gets more noticeable, making the error less noticeable

But zooming-in in the first screenshot I took on normal zoom, you can see the lack of padding

---

Looking into more detail now, the problem seems to be that the "symbol box" (I don't know how to call it, the space alocated to render the emoji) is smaller than the actual symbol being rendered, making it overflow to the right. Using normal zoom, you can notice that the box and rocket emojis are a bit overlaped.

Given these two badges, one with only the emojis and the other with the emojis and a single character at the end, the right padding changes considerably. https://img.shields.io/badge/%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg https://img.shields.io/badge/%F0%9F%93%A6%F0%9F%9A%80a-semantic--release-e10079.svg

Here is a screenshot of how it looks for me:

[paulmelnikow]

This is from Chrome on OS X:

And Firefox OS X:

The emoji still look somewhat different from what you're seeing. Are you on Linux?

---

Looking into more detail now, the problem seems to be that the "symbol box" (I don't know how to call it, the space alocated to render the emoji) is smaller than the actual symbol being rendered, making it overflow to the right.

Yes, that's right.

The most direct place to fix that problem would be in anafanafo, the library we use to estimate text length. IIRC it's not attempting to measure emoji at all, at present.

[alvarocastro]

Weird, I'm using Chrome on OS X too.

Can you post a not zoomed-in screenshot of the following badge?

[paulmelnikow]

Firefox:

Chrome:

[chris48s]

Is this screenshot

in https://github.com/badges/shields/issues/5668#issuecomment-705111521 using the default font? It looks like it isn't to my eye, but I don't use Chrome or a Mac so maybe that looks normal in that world. I wonder if emoji widths are a bit off for some of the fallback fonts?

[paulmelnikow]

@alvarocastro Do you want to continue debugging this with us? We recently merged some changes to the font-width computation. (And during that work, I realized that we are computing text widths for emojis, by the way.) I don't think we can proceed on this particular case without your help.

[alvarocastro]

Yeah, the problem is still happening.

This is how I see the badge Chrome:

Chromium:

Firefox:

Safari:

Safari seems to be working fine.

[paulmelnikow]

Can you check which font your browser is using to render that?

[alvarocastro]

How do I check that?

Updated the post with screenshots of the browsers I have.

[paulmelnikow]

In Firefox, right-click the text semantic-release, choose "Inspect Element" and then click the Fonts tab.

[alvarocastro]

Here, font seems to use the same settings, but some attributes in the markup are different, the y coordinate for example, or the fact that I don't have the fill-opacity thing.

[paulmelnikow]

I think we've just got different elements highlighted.

[paulmelnikow]

Could you save this into a .svg file, confirm the spacing looks better, and check the width of the label and message text elements?

<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink" width="136" height="20" role="img" aria-label="📦🚀: semantic-release">
    <title>📦🚀: semantic-release</title>
    <linearGradient id="s" x2="0" y2="100%">
        <stop offset="0" stop-color="#bbb" stop-opacity=".1"/>
        <stop offset="1" stop-opacity=".1"/>
    </linearGradient>
    <clipPath id="r">
        <rect width="136" height="20" rx="3" fill="#fff"/>
    </clipPath>
    <g clip-path="url(#r)">
        <rect width="31" height="20" fill="#555"/>
        <rect x="31" width="105" height="20" fill="#e10079"/>
        <rect width="136" height="20" fill="url(#s)"/>
    </g>
    <g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110">
        <text aria-hidden="true" x="165" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)">📦🚀</text>
        <text x="165" y="140" transform="scale(.1)" fill="#fff">📦🚀</text>
        <text aria-hidden="true" x="825" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)">semantic-release</text>
        <text x="825" y="140" transform="scale(.1)" fill="#fff">semantic-release</text>
    </g>
</svg>

On my machine they are 22.1667 and 94.5.