Download button has weird space in between o and w

[Andre601]

Bug Report

Q	A
BC Break	?
Library Version	N/A (not used by myself)
PHP version	N/A (not used by myself)

Summary

There seems to be some odd rendering behaviour with this PHP library and using letters such as "W".
When using those is there a weird gap before the letter itself.
This is prominently visible in this project's readme, by looking at the "downloads" badge, which displays as "do wnloads"

Here's an image of what I mean.

Using shields.io directly (i.e. https://img.shields.io/badge/downloads-16.9%20k-blue) doesn't show this specific issue, so it must be a cause by this library.

This was originally reported to antonkomarev/github-profile-views-counter#26

I use Edge as browser to view these badges, so if it doesn't show on Chrome (Probably unlikely as Edge also uses Chromium), Firefox, Safari, etc. could it be a browser-specific issue.

Current behavior

The badges have random gaps (mostly before a W) for no apparent reason.

How to reproduce

1. Use this library to generate a badge I guess.

I don't really use this library myself, so I can't give clear steps to reproduce. It's just something I noticed and wanted to report.

Expected behavior

The badge should look like the example I provided:

[garak]

I tried with Edge 90.0.803.0 and can't reproduce this issue.
(also tried with Firefox and Chrome, same result)

[Andre601]

Weird. The issue so far only seems to happen with that download badge.

There must be something with the pugx.org domain perhaps?

[Metacinnabar]

This could be an issue with your font?

[Andrew-J-Larson]

Kerning issue with text prevails, including in https://github.com/antonkomarev/github-profile-views-counter

Previously made an issue at antonkomarev/github-profile-views-counter#41, but was directed to post it here.

Here's an example of my profile views badge as of today (1/23/2022 @ 5:53 AM PST):

• 

Underlined is where the issue occurs:

• 

As you can see, for some reason, more space has been added to the left of the 'w', causing it to also intersect the 's' in the word "views".

---

The issue I don't believe the issue is the font or a particular badge, but in however the text is being rendered (floating-point issue maybe?).

[JellyBellyDev]

@TheAlienDrew does this also happen incognito?
With which browser and operating system?

[Andrew-J-Larson]

@TheAlienDrew does this also happen incognito?
With which browser and operating system?

I was using Chrome on Windows 11 (latest stable build for both).

But I've noticed today at work (same version of Chrome and Windows 11).

It doesn't have the issue. (incognito and without it)

[JellyBellyDev]

So I think it's the fault of some extension you use on the chrome of your home PC. Could be?

[Andrew-J-Larson]

So I think it's the fault of some extension you use on the chrome of your home PC. Could be?

They practically have the same extensions except for one I don't use at work, being Privacy Badger. I wouldn't assume that would be an issue, but it could.

[Andrew-J-Larson]

Just checked that though, and that doesn't seem to cause the kerning issue.

[Andrew-J-Larson]

The only thing I can think of that can be a factor, is the fact that I have a very large monitor at home, vs compared to at work.

[Andrew-J-Larson]

Nvidia card at home, normal intel integrated graphics at work.

[JellyBellyDev]

all this makes no sense to me... :S

[Andrew-J-Larson]

Basically, I think it's likely more of a high-dpi issue when it comes to rendering the badge.

[Andrew-J-Larson]

Not sure if this helps, but could explain the kerning issue: https://phabricator.wikimedia.org/T36947