Shields: In Windows Firefox, labels and status text in badges overlap and push outside boundaries

[un1versal]

Here are a few examples from shields.io website, to illustrate whats happening in projects Im involved in, clearly this is now a global issue.

Would you guys consider adding padding to left and right of label portion and left and right of status portion?

[un1versal]

anyone?

[un1versal]

this is todays coverity, it is pretty much unreadable...

@badges is there a point reporting issues here on GH issue tracker or? just no replies at all... makes one wonder

[espadrine]

Could you provide us with a list of fonts available on your computer among the following names, please?

• DejaVu Sans
• Verdana
• Geneva

Could you also provide us with an exact version number corresponding to your operating system and one corresponding to your browser?

Thanks a lot for reporting this!

[un1versal]

The issue is visible on Windows 7 sp1 all up-to-date + Firefox 47.0.1 its not always been the case.

LInux ubuntu variant 16.04 + Firefox 47.0 is OK

Fonts available (checked) The others are not available on Windows by default.

• [ ] DejaVu Sans
• [x] Verdana
• [ ] Geneva

Screenshot of Vanilla windows...

[un1versal]

@espadrine any advance on this?

[mralexgray]

are these people even alive?

[un1versal]

are these people even alive?

Clearly its not an important issue to them like paying the bills or world hunger etc.

[mralexgray]

it actually looks decent on Safari (MacOS)... this must be a browset-specific issue... _sigh_

[un1versal]

This isnt a OSX or Linux or Unix-like issue, afaict is Windows (perhaps Windows 7 only) and Firefox. Internet Explorer is OK, but who wants to use that crap?

@mralexgray I saw your other post, and tbh I think seeing the type of response it had + comparing with here, indicates lack of developers at the elm with interest in this.

So that being a normal day in opensource, I wouldnt expect anything to happen in this context for a few months perhaps even years, if ever.

[RedSparr0w]

There seems to have been only relatively small updates since i started following this project.

assume its just lack of people with privileges to accept PR's ect. as there seems to be lots of people willing to work in this and create PR's but nothing is getting done about them.

_edit: since August 18th things seem to have slowed down_

[un1versal]

Firefox 49.01 and Win 7 sp1 still same issue.

[paulmelnikow]

I joined the project a few weeks ago and have been steadily merging PRs. Thaddée has been deploying the updates.

Some further research was done in #797. Would be great if someone could dig into this problem further.

If we can isolate the problem, maybe running some tests on Sauce Labs would help diagnose the problem thoroughly and prevent a regression.

cc @aburgd @mralexgray

[aburgd]

I've found that the badges are showing up properly on my laptop running WX
with Chrome.

On Apr 17, 2017 5:52 PM, "Paul Melnikow" [e-mail] wrote:

I joined the project a few weeks ago and have been steadily merging PRs.
Thaddée has been deploying the updates.

Some further research was done in #797
https://github.com/badges/shields/issues/797. Would be great if someone
could dig into this problem further.

If we can isolate the problem, maybe running some tests on Sauce Labs
would help diagnose the problem thoroughly and prevent a regression.

cc @aburgd https://github.com/aburgd @mralexgray
https://github.com/mralexgray

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/badges/shields/issues/746#issuecomment-294618572, or mute
the thread
https://github.com/notifications/unsubscribe-auth/AGA4He7SQx0zqkgpSn16cBEWZhfsI0vuks5rw-0cgaJpZM4JOcmy
.

[the-j0k3r]

@paulmelnikow

I just noticed this problem and came looking for a report or make my own.
Ive not tested in other OS's

The issue exists with svg badges only as far as I can tell, with png badges the issue is gone, but of course the text is quite small in comparison.

My environment:

Windows 10
Firefox 56 64bit

Issue test

as above

[![Scrutinizer](https://img.shields.io/scrutinizer/g/filp/whoops.svg)]()
[![Scrutinizer](https://img.shields.io/scrutinizer/g/filp/whoops.png)]()

Screenshot as I see it.

[paulmelnikow]

Thanks for the info.

Could you include your answer to Thaddée's question in https://github.com/badges/shields/issues/746#issuecomment-236384036?

The issue exists with svg badges only as far as I can tell, with png badges the issue is gone, but of course the text is quite small in comparison.

Yea, that's right, it's only with the svg badges. The png badges are rasterized on the server, so they look the same everywhere.

[paulmelnikow]

It looks like you tried to reply but I'm not seeing it. I mean: which of those fonts do you have installed?

[the-j0k3r]

Its Windows, doubtful it will have Dejavu Sans or any Dejavu or Geneva, verdana yes.

DejaVu Sans -- No
Verdana -- Yes
Geneva --No

If these badges depend on those fonts, there's MUCH better fonts by default to use as substitutions

Ugh https://github.com/badges/shields/blob/cafb66bd93c9ac7871468c99ba4ec685383df64b/Dockerfile#L4

https://github.com/badges/shields/blob/bb66a99a66af3838c8d5bf3ea2f6af09d2450004/package.json#L71

If I read this right, no wonder this is broken Windows side by default, no Dejavu fonts there. Perhaps some sane font substitutions to consider?

[paulmelnikow]

It's rendering with Verdana on my Mac OS machine too. I'm not sure why the size is so different.

[![Scrutinizer](https://img.shields.io/scrutinizer/g/filp/whoops.svg)]()
[![Scrutinizer](https://img.shields.io/scrutinizer/g/filp/whoops.png)]()

Here's what I'm seeing:

Is the problem observed in Firefox, and not in Chrome or IE?

[paulmelnikow]

There's a known issue with minimum font size. Do you have that turned on? (#848)

[the-j0k3r]

There's a known issue with minimum font size. Do you have that turned on? (#848)

You nailed it, that seems to be the problem. 👍 🍾 🥇 disable minimum size and issue is gone. 😊

Im not sure when or why that setting changed here but its off now.

One thing though, #848 report doesnt mention which browser or version, even no OS or version either

Is the problem observed in Firefox, and not in Chrome or IE?

If you have read through both tickets, https://github.com/badges/shields/issues/797#issuecomment-249511923 and https://github.com/badges/shields/issues/797#issuecomment-249436383 cover those questions.

But Firefox side you now know that is the minimum size thing.

[paulmelnikow]

@RedSparr0w has a brilliant fix! Could you help us test it @the-j0k3r, by turning min-font-size back on till the problem comes back, and then screenshotting this page?

http://whois.paulmelnikow.com/extra/1132.html

[the-j0k3r]

My pleasure, to help out, least I can do :)

[the-j0k3r]

This issue is still present, I though once PR was merged it would go away.

[RedSparr0w]

Doesn't look like the change has gone live yet, it can take a few weeks after being merged to the master branch before it is pushed through.

Sent from my iPhone

On 21/10/2017, at 6:35 PM, the-j0k3r <[email protected][e-mail]> wrote:

This issue is still present, I though once PR was merged it would go away.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHubhttps://github.com/badges/shields/issues/746#issuecomment-338365759, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AG82ApW3vk2s_Qd1RXJVBpCmFHmlDoT1ks5suYKNgaJpZM4JOcmy.

[the-j0k3r]

Ah, well lets hope thats soon.