Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

For-the-badge ratio is off #4691

Open
1 of 3 tasks
binyamin opened this issue Feb 26, 2020 · 1 comment
Open
1 of 3 tasks

For-the-badge ratio is off #4691

binyamin opened this issue Feb 26, 2020 · 1 comment
Labels
npm-package Badge generation and badge templates

Comments

@binyamin
Copy link

Are you experiencing an issue with...

🪲 Description

🔗 Link to the badge
The size of the for-the-badge style is not the same size as for-the-badge itself. The ratio is different.

Compare forthe-badge with shields

💡 Possible Solution
@binyamin binyamin added the question Support questions, usage questions, unconfirmed bugs, discussions, ideas label Feb 26, 2020
@paulmelnikow
Copy link
Member

Hmm, it's a different typeface too, isn't it! 😁

This code was refactored recently and hasn't yet been merged to master. I don't think that will fix the problem though if anyone would like to work on this, it should be on the v3-dev branch.

Happy to accept contributions (on that branch, for the time being) which bring our badges more inline with the design at https://forthebadge.com/.

If we need to add a new typeface that'll have to be done in this repo:
https://github.com/metabolize/anafanafo

@paulmelnikow paulmelnikow added npm-package Badge generation and badge templates and removed question Support questions, usage questions, unconfirmed bugs, discussions, ideas labels Feb 26, 2020
@paulmelnikow paulmelnikow mentioned this issue Oct 11, 2020
Merged
paulmelnikow added a commit that referenced this issue Oct 16, 2020
@paulmelnikow
Improve appearance of for-the-badge and social badges by measuring co…
af3f720 
…rrect font (#5696)

Even before #2311, Shields has measured all badge text using 11px Verdana, which is the correct font for plastic, flat, and flat-square.

However the for-the-badge style uses 10px Verdana and bold 10px Verdana, and the social badge uses bold 11px _Helvetica_. This causes these badges to be wider or narrower than they should be, and the text to be stretched accordingly.

Since the for-the-badge style relies on synthetic letter spacing (we just multiply the computed length in code) there is room to massage this further. Our test badges all look as good or better than before, so I think it should not block merging this, however we might need to get it right before the downstream problem in squint goes away. (There's also #4691 which this doesn't attempt to address.)

Fixes #4275
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
npm-package Badge generation and badge templates
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@paulmelnikow @binyamin