When multiple spaces are present, label width is computed incorrectly

[ruro]

Are you experiencing an issue with...

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

🪲 Description

It seems that the width of the badge label/value text is computed incorrectly for space characters. This leads to the rest of the text getting stretched out.

🔗 Link to the badge

Here are some badges that have their label replaced by foo + N spaces + bar. Notice that there are no whitespace characters between f, o and o as well as between b, a and r.

https://raster.shields.io/pypi/v/a?label=foo%20bar:

https://raster.shields.io/pypi/v/a?label=foo%20%20bar:

https://raster.shields.io/pypi/v/a?label=foo%20%20%20%20bar:

https://raster.shields.io/pypi/v/a?label=foo%20%20%20%20%20%20%20%20bar:

https://raster.shields.io/pypi/v/a?label=foo%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20bar:

https://raster.shields.io/pypi/v/a?label=foo%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20bar:

Compare with the same badges but with %20 replaced by _:

https://raster.shields.io/pypi/v/a?label=foo_bar:

https://raster.shields.io/pypi/v/a?label=foo__bar:

https://raster.shields.io/pypi/v/a?label=foo____bar:

https://raster.shields.io/pypi/v/a?label=foo________bar:

https://raster.shields.io/pypi/v/a?label=foo________________bar:

https://raster.shields.io/pypi/v/a?label=foo________________________________bar:

And the svg versions

https://img.shields.io/pypi/v/a?label=foo%20bar:

https://img.shields.io/pypi/v/a?label=foo%20%20bar:

https://img.shields.io/pypi/v/a?label=foo%20%20%20%20bar:

https://img.shields.io/pypi/v/a?label=foo%20%20%20%20%20%20%20%20bar:

https://img.shields.io/pypi/v/a?label=foo%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20bar:

https://img.shields.io/pypi/v/a?label=foo%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20bar:

https://img.shields.io/pypi/v/a?label=foo_bar:

https://img.shields.io/pypi/v/a?label=foo__bar:

https://img.shields.io/pypi/v/a?label=foo____bar:

https://img.shields.io/pypi/v/a?label=foo________bar:

https://img.shields.io/pypi/v/a?label=foo________________bar:

https://img.shields.io/pypi/v/a?label=foo________________________________bar:

[calebcartwright]

Thanks for opening this, could you please update your description to also include the badge urls? Also worth noting explicitly that you're referring to the raster badges here, not the svgs.

[ruro]

You can click on the badges to navigate to their urls. I can also add the links as plain text if you want.

I am not referring specifically to the raster badges. The same thing happens with the svg badges for me, but I included the
raster badges as illustrations to make sure that they will render exactly the same for everyone. Again, I can include the svg versions if you want.

Edit: done

[calebcartwright]

What's happening with the consecutive whitespace cases is that we're (correctly) computing all the width/length properties for the badge with the provided number of whitespace characters, but at render time the browsers are dropping all the consecutive spaces resulting in the value of foo%20bar being stretched to fill the text length calculated with the additional X number of space characters (intentionally ignoring the raster cases because it's sparingly used and we've a variety of known/existing issues with width calcs over there)

This feels like a rather extreme edge case, and I'm not sure if we've any history on this topic and/or past decisions intentionally driving this behavior. However, certainly worth asking if we could/should tweak the generated xml to preserve whitespace in the text elements.

cc @badges/shields-maintainers

[Daniel15]

@calebcartwright Non-breaking spaces appear to work fine:

https://raster.shields.io/pypi/v/a?label=foo%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0bar

https://img.shields.io/pypi/v/a?label=foo%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0bar

So a workaround could just be to replace spaces in the label with non-breaking spaces instead. Something like:

label = label.replace(/ /g, '\u00A0')

may suffice.