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.
| 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. |
The only difference comes from the
empty string edge case. When measuring an empty label
(""):
anafanafo("") returned 10 (i.e., 1px
after scale(.1)), which was then rounded up to 11 by
roundUpToOdd().
pretext returns 0 for an empty string,
which is the correct behavior — an empty string has no width.
This 1px difference cascades into the SVG: the label rect shrinks by 1px, and all downstream x-coordinates shift accordingly.
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.
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 |
pretext measures raw glyph widths. Only the
for-the-badge template still needs explicit letter-spacing
compensation to match the previous anafanafo measurements:
LETTER_SPACING = 1.25 per character for Verdana 10px
preferredWidthOf() already matches anafanafo for
Verdana 11px
pretext produces identical text widths to anafanafo for non-empty social badge labels. The badge appearance is the same.
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)).
SVG width: 59 → 58 (-1px) | textLength[0]: 10 → 0 | textLength[1]: 10 → 0
SVG width: 73 → 72 (-1px) | textLength[0]: 10 → 0 | textLength[1]: 10 → 0
SVG width: 73 → 72 (-1px) | textLength[0]: 10 → 0 | textLength[1]: 10 → 0
SVG width: 26 → 25 (-1px) | textLength[0]: 10 → 0 | textLength[1]: 10 → 0