Badge Comparison: anafanafo vs pretext

Why snapshots changed

This PR replaces anafanafo with @chenglou/pretext for text width measurement in badge generation. The two libraries measure text width slightly differently, which causes some snapshot values to change.

Summary of all snapshot changes

Category Count SVG width diff Cause
flat, flat-square, plastic templates 0 0px No change — pretext + preferredWidthOf() produces identical results to anafanafo for Verdana 11px
for-the-badge template 0 0px No change — letter-spacing compensation already in place, pretext matches anafanafo for Verdana 10px
social template (with label text) All 0px No change — pretext text widths match anafanafo for Helvetica bold 11px with the current social badge renderer
social template (empty label) 4 -1px Empty string: anafanafo returned width 10 (1px), pretext returns 0. See details below.

Root cause: empty string width

The only difference comes from the empty string edge case. When measuring an empty label (""):

This 1px difference cascades into the SVG: the label rect shrinks by 1px, and all downstream x-coordinates shift accordingly.

Why the pretext behavior is correct

An empty string should have zero width. The old anafanafo value of 10 (1px) was a quirk of how anafanafo handled the empty-string case. The new pretext value of 0 produces a more accurate badge — there is no visible difference since the label text is empty anyway.

Affected snapshots (4 total)

The only differences are in the 4 snapshots with empty labels. These show a 1px width reduction due to the empty string width change.

Snapshot Old width New width textLength change
"social" message only, no logo 59px 58px 10 → 0
"social" message only, with logo 73px 72px 10 → 0
"social" message only, with logo and labelColor 73px 72px 10 → 0
"social" logo-only 26px 25px 10 → 0

Width alignment notes

pretext measures raw glyph widths. Only the for-the-badge template still needs explicit letter-spacing compensation to match the previous anafanafo measurements:


Visual comparisons: social template (with label text)

pretext produces identical text widths to anafanafo for non-empty social badge labels. The badge appearance is the same.

message/label, no logo

pretext (current) — width: 95px, textLength: Cactus=370, grown=330 (matches anafanafo)
Cactus: grown

message only, no logo (empty label edge case)

anafanafo (old) — width: 59px, label rect width: 11, label textLength: 10
grown
pretext (current) — width: 58px, label rect width: 10, label textLength: 0 (1px diff from anafanafo)
grown

Visual comparisons: empty label snapshots (diff > 1px in inner attributes)

These 4 snapshots are the only ones with any difference. The root cause is that anafanafo("") returned 10 while pretext correctly returns 0 for empty strings. This causes a 1px SVG width reduction and shifts internal x-coordinates by up to 10 units (1px at scale(.1)).

"social" template: message only, no logo

SVG width: 59 → 58 (-1px) | textLength[0]: 10 → 0 | textLength[1]: 10 → 0

anafanafo (old) — width: 59px, textLengths: 10, 10, 330, 330
grown
pretext (current) — width: 58px, textLengths: 0, 0, 330, 330
grown

"social" template: message only, with logo

SVG width: 73 → 72 (-1px) | textLength[0]: 10 → 0 | textLength[1]: 10 → 0

anafanafo (old) — width: 73px, textLengths: 10, 10, 330, 330
grown
pretext (current) — width: 72px, textLengths: 0, 0, 330, 330
grown

"social" template: message only, with logo and labelColor

SVG width: 73 → 72 (-1px) | textLength[0]: 10 → 0 | textLength[1]: 10 → 0

anafanafo (old) — width: 73px, textLengths: 10, 10, 330, 330
grown
pretext (current) — width: 72px, textLengths: 0, 0, 330, 330
grown

social badge, logo-only

SVG width: 26 → 25 (-1px) | textLength[0]: 10 → 0 | textLength[1]: 10 → 0

anafanafo (old) — width: 26px, textLengths: 10, 10
pretext (current) — width: 25px, textLengths: 0, 0