fix: keep logo & text alignments consistent #11284

LitoMore · 2025-08-12T15:42:09Z

Some of our current badges have some inconsistent spacing. Especially the logo-only badge. I've fixed/changed them to be consistent.

I've attached the 5x zoom level preview image with measurements. As you can see, some badges don't have consistent left-right padding. But if the numbers differ by only 1, it can be ignored.

I didn't change the style of the social badge since its design is a bit special. I think the padding is fine. Please let me know if you want the social badge to be changed as well.

The measurement tool I use: PixelSnap 2.

img.shields.io

![](https://img.shields.io/badge/M-M-000) ![](https://img.shields.io/badge/-M-000) ![](https://img.shields.io/badge/M-M-000?logo=npm) ![](https://img.shields.io/badge/-M-000?logo=npm) ![](https://img.shields.io/badge/--000?logo=npm)\
![](https://img.shields.io/badge/M-M-000?style=flat-square) ![](https://img.shields.io/badge/-M-000?style=flat-square) ![](https://img.shields.io/badge/M-M-000?logo=npm&style=flat-square) ![](https://img.shields.io/badge/-M-000?logo=npm&style=flat-square) ![](https://img.shields.io/badge/--000?logo=npm&style=flat-square)\
![](https://img.shields.io/badge/M-M-000?style=plastic) ![](https://img.shields.io/badge/-M-000?style=plastic) ![](https://img.shields.io/badge/M-M-000?logo=npm&style=plastic) ![](https://img.shields.io/badge/-M-000?logo=npm&style=plastic) ![](https://img.shields.io/badge/--000?logo=npm&style=plastic)\
![](https://img.shields.io/badge/M-M-000?style=for-the-badge) ![](https://img.shields.io/badge/-M-000?style=for-the-badge) ![](https://img.shields.io/badge/M-M-000?logo=npm&style=for-the-badge) ![](https://img.shields.io/badge/-M-000?logo=npm&style=for-the-badge) ![](https://img.shields.io/badge/--000?logo=npm&style=for-the-badge)\
![](https://img.shields.io/badge/M-M-000?style=social) ![](https://img.shields.io/badge/-M-000?style=social) ![](https://img.shields.io/badge/M-M-000?logo=npm&style=social) ![](https://img.shields.io/badge/-M-000?logo=npm&style=social) ![](https://img.shields.io/badge/--000?logo=npm&style=social)

pr-11284-badges-shields.fly.dev

![](https://pr-11284-badges-shields.fly.dev/badge/M-M-000) ![](https://pr-11284-badges-shields.fly.dev/badge/-M-000) ![](https://pr-11284-badges-shields.fly.dev/badge/M-M-000?logo=npm) ![](https://pr-11284-badges-shields.fly.dev/badge/-M-000?logo=npm) ![](https://pr-11284-badges-shields.fly.dev/badge/--000?logo=npm)\
![](https://pr-11284-badges-shields.fly.dev/badge/M-M-000?style=flat-square) ![](https://pr-11284-badges-shields.fly.dev/badge/-M-000?style=flat-square) ![](https://pr-11284-badges-shields.fly.dev/badge/M-M-000?logo=npm&style=flat-square) ![](https://pr-11284-badges-shields.fly.dev/badge/-M-000?logo=npm&style=flat-square) ![](https://pr-11284-badges-shields.fly.dev/badge/--000?logo=npm&style=flat-square)\
![](https://pr-11284-badges-shields.fly.dev/badge/M-M-000?style=plastic) ![](https://pr-11284-badges-shields.fly.dev/badge/-M-000?style=plastic) ![](https://pr-11284-badges-shields.fly.dev/badge/M-M-000?logo=npm&style=plastic) ![](https://pr-11284-badges-shields.fly.dev/badge/-M-000?logo=npm&style=plastic) ![](https://pr-11284-badges-shields.fly.dev/badge/--000?logo=npm&style=plastic)\
![](https://pr-11284-badges-shields.fly.dev/badge/M-M-000?style=for-the-badge) ![](https://pr-11284-badges-shields.fly.dev/badge/-M-000?style=for-the-badge) ![](https://pr-11284-badges-shields.fly.dev/badge/M-M-000?logo=npm&style=for-the-badge) ![](https://pr-11284-badges-shields.fly.dev/badge/-M-000?logo=npm&style=for-the-badge) ![](https://pr-11284-badges-shields.fly.dev/badge/--000?logo=npm&style=for-the-badge)\
![](https://pr-11284-badges-shields.fly.dev/badge/M-M-000?style=social) ![](https://pr-11284-badges-shields.fly.dev/badge/-M-000?style=social) ![](https://pr-11284-badges-shields.fly.dev/badge/M-M-000?logo=npm&style=social) ![](https://pr-11284-badges-shields.fly.dev/badge/-M-000?logo=npm&style=social) ![](https://pr-11284-badges-shields.fly.dev/badge/--000?logo=npm&style=social)

localhost:8080

GitHub cannot display localhost assets since they have Camo for caching resources. But these links might be helpful for you to review.

Markdown

![](http://localhost:8080/badge/M-M-000) ![](http://localhost:8080/badge/-M-000) ![](http://localhost:8080/badge/M-M-000?logo=npm) ![](http://localhost:8080/badge/-M-000?logo=npm) ![](http://localhost:8080/badge/--000?logo=npm)\
![](http://localhost:8080/badge/M-M-000?style=flat-square) ![](http://localhost:8080/badge/-M-000?style=flat-square) ![](http://localhost:8080/badge/M-M-000?logo=npm&style=flat-square) ![](http://localhost:8080/badge/-M-000?logo=npm&style=flat-square) ![](http://localhost:8080/badge/--000?logo=npm&style=flat-square)\
![](http://localhost:8080/badge/M-M-000?style=plastic) ![](http://localhost:8080/badge/-M-000?style=plastic) ![](http://localhost:8080/badge/M-M-000?logo=npm&style=plastic) ![](http://localhost:8080/badge/-M-000?logo=npm&style=plastic) ![](http://localhost:8080/badge/--000?logo=npm&style=plastic)\
![](http://localhost:8080/badge/M-M-000?style=for-the-badge) ![](http://localhost:8080/badge/-M-000?style=for-the-badge) ![](http://localhost:8080/badge/M-M-000?logo=npm&style=for-the-badge) ![](http://localhost:8080/badge/-M-000?logo=npm&style=for-the-badge) ![](http://localhost:8080/badge/--000?logo=npm&style=for-the-badge)\
![](http://localhost:8080/badge/M-M-000?style=social) ![](http://localhost:8080/badge/-M-000?style=social) ![](http://localhost:8080/badge/M-M-000?logo=npm&style=social) ![](http://localhost:8080/badge/-M-000?logo=npm&style=social) ![](http://localhost:8080/badge/--000?logo=npm&style=social)

HTML

<img src="http://localhost:8080/badge/M-M-000" />
<img src="http://localhost:8080/badge/-M-000" />
<img src="http://localhost:8080/badge/M-M-000?logo=npm" />
<img src="http://localhost:8080/badge/-M-000?logo=npm" />
<img src="http://localhost:8080/badge/--000?logo=npm" />
<br />
<img src="http://localhost:8080/badge/M-M-000?style=flat-square" />
<img src="http://localhost:8080/badge/-M-000?style=flat-square" />
<img src="http://localhost:8080/badge/M-M-000?logo=npm&style=flat-square" />
<img src="http://localhost:8080/badge/-M-000?logo=npm&style=flat-square" />
<img src="http://localhost:8080/badge/--000?logo=npm&style=flat-square" />
<br />
<img src="http://localhost:8080/badge/M-M-000?style=plastic" />
<img src="http://localhost:8080/badge/-M-000?style=plastic" />
<img src="http://localhost:8080/badge/M-M-000?logo=npm&style=plastic" />
<img src="http://localhost:8080/badge/-M-000?logo=npm&style=plastic" />
<img src="http://localhost:8080/badge/--000?logo=npm&style=plastic" />
<br />
<img src="http://localhost:8080/badge/M-M-000?style=for-the-badge" />
<img src="http://localhost:8080/badge/-M-000?style=for-the-badge" />
<img src="http://localhost:8080/badge/M-M-000?logo=npm&style=for-the-badge" />
<img src="http://localhost:8080/badge/-M-000?logo=npm&style=for-the-badge" />
<img src="http://localhost:8080/badge/--000?logo=npm&style=for-the-badge"/>
<br />
<img src="http://localhost:8080/badge/M-M-000?style=social" />
<img src="http://localhost:8080/badge/-M-000?style=social" />
<img src="http://localhost:8080/badge/M-M-000?logo=npm&style=social" />
<img src="http://localhost:8080/badge/-M-000?logo=npm&style=social" />
<img src="http://localhost:8080/badge/--000?logo=npm&style=social" />

github-actions · 2025-08-12T15:43:13Z

	Messages
📖	✨ Thanks for your contribution to Shields, @LitoMore!

Generated by 🚫 dangerJS against 4940ae7

github-actions · 2025-08-12T19:40:34Z

🚀 Updated review app: https://pr-11284-badges-shields.fly.dev

jNullj

It's a bit hard to see that changes, i might pick some pixel art editor to try comparing them.
But i do have some feedback about the code, see my changes suggestion.

Regarding the fix, Could you present what exactly is inconsistent here before the change and how this solves the issue?

badge-maker/lib/badge-renderers.js

LitoMore · 2025-08-12T21:07:37Z

I've attached two 5x zoom level images with measurements to the PR description. It appears that the logo-only in-for-the-badge style still has an alignment issue. I will look into it.

LitoMore · 2025-08-12T22:02:13Z

I've fixed the style of the for-the-badge. I also updated its 5x preview image. The 1x preview may require your deployment to update.

jNullj

Sorry for the late response.
This review I set some time to try and understand the existing and proposed logic here

jNullj · 2025-08-23T15:08:05Z

badge-maker/lib/badge-renderers.js

+      messageRectWidth =
+        2 * TEXT_MARGIN + logoWidth + gutter + messageTextWidth - 1
+      if (noText) {
+        messageRectWidth += 5 // Compensate for the extra padding


I tried to warp my head around this one.

If you look closely the original logic seems to say, if we have a logo add the logo width and a separator (gutter) to separate logo and message text, otherwise, only use message text. ofc we add text margin in both sides as well.

You seem to increase our LOGO_MARGIN then add some compensation.
I wonder if we shouldn't add this logic to the gutter to begin with at line 808
const gutter = noText ? LOGO_TEXT_GUTTER - LOGO_MARGIN : LOGO_TEXT_GUTTER

But as i was thinking that i noticed, we get a negative gutter, which hardly makes sense as it should, if im not wrong, be never negative, as it represent a size to space out elements.

in that case, maybe presenting abs would fix our problems and remove the need for the -1 and additional compensation. Even more so that the mentioned line to set gutter already takes into account the noText logic!

please let me know what you think.

Thanks for looking so deep. I've made a commit to make these logics cleaner.

You will notice that now some values have base value now:

let labelTextMinX = TEXT_MARGIN let labelRectWidth = 2 * TEXT_MARGIN let messageTextMinX = TEXT_MARGIN let messageRectWidth = 2 * TEXT_MARGIN + messageTextWidth

I also removed the LOGO_MARGIN since its has the same value as TEXT_MARGIN. And the LOGO_MARGIN meaningless because we should actual use TEXT_MARGIN to caculate its size.

I now have a clear idea of how to calculate the size of the badge, and I should be able to optimize the calculation logic of other badges in the same way in the future.

Looking forward to your another review. ✌️

@jNullj would be great if you could take another look at this one :)

jNullj · 2025-09-22T23:20:54Z

badge-maker/lib/badge-renderers.js

-  const gutter = noText ? LOGO_TEXT_GUTTER - LOGO_MARGIN : LOGO_TEXT_GUTTER
-  let logoMinX, labelTextMinX
+  let labelTextMinX = TEXT_MARGIN
+  let labelRectWidth = 2 * TEXT_MARGIN


Fixes issue where we add empty space after the badge when there is no label/logo-in-label

Suggested change

let labelRectWidth = 2 * TEXT_MARGIN

let labelRectWidth = needsLabelRect ? 2 * TEXT_MARGIN : undefined

jNullj · 2025-09-22T23:35:17Z

badge-maker/lib/badge-renderers.js

-    labelTextMinX = logoMinX + logoWidth + gutter
-  } else {
-    labelTextMinX = TEXT_MARGIN
+    if (labelColor) labelRectWidth += logoWidth


Suggested change

if (labelColor) labelRectWidth += logoWidth

if (labelColor || needsLabelRect) labelRectWidth += logoWidth

jNullj · 2025-09-22T23:35:20Z

badge-maker/lib/badge-renderers.js

-    }
-    messageTextMinX = labelRectWidth + TEXT_MARGIN
-    messageRectWidth = 2 * TEXT_MARGIN + messageTextWidth
+    if (hasLabel) labelRectWidth += labelTextMinX + labelTextWidth


Suggested change

if (hasLabel) labelRectWidth += labelTextMinX + labelTextWidth

if (hasLabel) labelRectWidth += labelTextWidth

jNullj

I added a few fixes, there was issues in forTheBadge style with label rect growing outside rendered area, creating empty space.
That also added space to the label area itself.
You can easily apply the fixes if you don't find anything i missed there.

as a side note, i used your html examples but added another case, for labelColor, as it exists in the edited code.
http://localhost:8080/badge/--000?logo=npm&style=for-the-badge&labelColor=blue

fix: keep logo & text alignments consistent

dfb80d8

jNullj added the npm-package Badge-maker NPM package label Aug 12, 2025

jNullj requested changes Aug 12, 2025

View reviewed changes

badge-maker/lib/badge-renderers.js Outdated Show resolved Hide resolved

badge-maker/lib/badge-renderers.js Show resolved Hide resolved

LitoMore added 2 commits August 13, 2025 05:17

apply suggestions

95bcbd6

fix for-the-badge with logo + no-label badges

e35df6d

LitoMore requested a review from jNullj August 12, 2025 22:00

LitoMore added 2 commits August 13, 2025 06:26

fix badge paddings

bb30ccc

Update snapshots

cf2a982

jNullj reviewed Aug 23, 2025

View reviewed changes

polish badge size logics

a1d7671

LitoMore requested a review from jNullj August 25, 2025 09:48

Merge branch 'master' into align-items

4940ae7

jNullj requested changes Sep 22, 2025

View reviewed changes

	let labelRectWidth = 2 * TEXT_MARGIN
	let labelRectWidth = needsLabelRect ? 2 * TEXT_MARGIN : undefined

	if (labelColor) labelRectWidth += logoWidth
	if (labelColor \|\| needsLabelRect) labelRectWidth += logoWidth

	if (hasLabel) labelRectWidth += labelTextMinX + labelTextWidth
	if (hasLabel) labelRectWidth += labelTextWidth

Uh oh!

fix: keep logo & text alignments consistent #11284

Are you sure you want to change the base?

fix: keep logo & text alignments consistent #11284

Uh oh!

Conversation

LitoMore commented Aug 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

img.shields.io

pr-11284-badges-shields.fly.dev

localhost:8080

Markdown

HTML

Uh oh!

github-actions bot commented Aug 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Aug 12, 2025

Uh oh!

jNullj left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

LitoMore commented Aug 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

LitoMore commented Aug 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jNullj left a comment

Choose a reason for hiding this comment

Uh oh!

jNullj Aug 23, 2025

Choose a reason for hiding this comment

Uh oh!

LitoMore Aug 25, 2025

Choose a reason for hiding this comment

Uh oh!

PyvesB Sep 20, 2025

Choose a reason for hiding this comment

Uh oh!

jNullj Sep 22, 2025

Choose a reason for hiding this comment

Uh oh!

jNullj Sep 22, 2025

Choose a reason for hiding this comment

Uh oh!

jNullj Sep 22, 2025

Choose a reason for hiding this comment

Uh oh!

jNullj left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

LitoMore commented Aug 12, 2025 •

edited

Loading

github-actions bot commented Aug 12, 2025 •

edited

Loading

LitoMore commented Aug 12, 2025 •

edited

Loading

LitoMore commented Aug 12, 2025 •

edited

Loading

jNullj left a comment •

edited

Loading