badges / badges/poser

Download button has weird space in between o and w

Open
#72 14 comments 0 reactions 0 assignees View on GitHub
Dominant language
PHP
Stars
146
Forks
44
PR merge metrics
No merged PRs in 30d

Description

### 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.
![image](https://user-images.githubusercontent.com/11576465/109767092-5188f200-7bf7-11eb-9a15-9e4169cfcdd1.png)

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 https://github.com/antonkomarev/github-profile-views-counter/issues/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:

![badge](https://img.shields.io/badge/downloads-16.9%20k-blue)

Contributor guide

Open the contributing guide

Research direction

Start by reproducing the README's "downloads" badge in Edge and compare it with the direct shields.io example linked in the report. Inspect the badge-generation or rendering path responsible for the text spacing; the issue is done when the generated badge no longer inserts gaps before letters such as W across the relevant browsers.

Written by the indexing model from the issue text.

Assessment

Tech stack
php
Domain
web-dev
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.