Centre star pills with align=absmiddle (#73)

WebKit maps align=middle to baseline-middle, which drops the pill below
the text on GitHub; absmiddle maps to vertical-align: middle in WebKit,
Blink and Gecko alike. With that the 4px padding is no longer needed, so
the pill is 20px tall again.

Author: floatdrop

internal/badge/badge.go

@@ -181,26 +181,17 @@ func textWidth(s string) int {
 // up regardless of how many digits the count has.
 const StarsWidth = 46
 
-// The pill box is 20px tall like the badge, but the SVG is 24px: the 4px of
-// transparent space below the box shifts it up 2px when GitHub centres the
-// image on the x-height of the line, which is where the mixed-case text
-// around it visually sits.
-const (
-	starsBoxHeight = 20
-	StarsHeight    = 24
-)
-
 // Stars renders the star pill that precedes each entry in the README: the
 // count in a fixed-width rounded box, in the same style as the badge, so the
 // list reads as a single column of numbers.
 func Stars(text, title string) []byte {
 	var b strings.Builder
 	w := func(format string, args ...any) { fmt.Fprintf(&b, format, args...) }
-	w(`<svg xmlns="http://www.w3.org/2000/svg" width="%d" height="%d" role="img" aria-label="%s">`, StarsWidth, StarsHeight, html.EscapeString(title))
+	w(`<svg xmlns="http://www.w3.org/2000/svg" width="%d" height="20" role="img" aria-label="%s">`, StarsWidth, html.EscapeString(title))
 	w(`<title>%s</title>`, html.EscapeString(title))
 	w(`<linearGradient id="s" x2="0" y2="100%%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient>`)
-	w(`<clipPath id="r"><rect width="%d" height="%d" rx="3" fill="#fff"/></clipPath>`, StarsWidth, starsBoxHeight)
-	w(`<g clip-path="url(#r)"><rect width="%d" height="%d" fill="#555"/><rect width="%d" height="%d" fill="url(#s)"/></g>`, StarsWidth, starsBoxHeight, StarsWidth, starsBoxHeight)
+	w(`<clipPath id="r"><rect width="%d" height="20" rx="3" fill="#fff"/></clipPath>`, StarsWidth)
+	w(`<g clip-path="url(#r)"><rect width="%d" height="20" fill="#555"/><rect width="%d" height="20" fill="url(#s)"/></g>`, StarsWidth, StarsWidth)
 	w(`<g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" font-size="11">`)
 	cx := StarsWidth / 2
 	t := html.EscapeString(text)

internal/badge/badge_test.go

@@ -106,8 +106,8 @@ func TestColorIsStableAndVaried(t *testing.T) {
 func TestStarsPillHasFixedWidth(t *testing.T) {
 	for _, text := range []string{"120", "2.1k", "89k", "new"} {
 		svg := string(Stars(text, "x has stars"))
-		if !strings.Contains(svg, `width="46" height="24"`) {
-			t.Errorf("Stars(%q) must be %dx%d:\n%s", text, StarsWidth, StarsHeight, svg)
+		if !strings.Contains(svg, `width="46" height="20"`) {
+			t.Errorf("Stars(%q) must be %d wide and 20 tall:\n%s", text, StarsWidth, svg)
 		}
 		if !strings.Contains(svg, "★</tspan> "+text+"</text>") {
 			t.Errorf("Stars(%q) must show the count:\n%s", text, svg)

internal/render/readme.go

@@ -160,14 +160,16 @@ func README(l *list.List, m *list.Metadata, now time.Time) []byte {
 // item renders one entry line. Every line starts with the entry's star pill,
 // a fixed-width image, so the names line up in one column. It is an HTML img
 // rather than Markdown because GitHub puts Markdown images on the text
-// baseline, which leaves a 20px pill floating above the line; align="middle"
-// is the one alignment attribute GitHub's sanitizer keeps.
+// baseline, which leaves a 20px pill floating above the line. GitHub's
+// sanitizer keeps the align attribute; "absmiddle" is the value every engine
+// maps to vertical-align: middle, whereas WebKit treats "middle" as
+// baseline-middle and drops the pill below the text.
 func item(r ranked) string {
 	alt := "new"
 	if r.known {
 		alt = FormatStars(r.stars) + " stars"
 	}
-	return fmt.Sprintf(`<img src="%s" alt="%s" align="middle"> [%s](%s) - %s`, StarsPath(r.entry.Repo), alt, r.entry.DisplayName(), r.entry.URL(), r.entry.Description)
+	return fmt.Sprintf(`<img src="%s" alt="%s" align="absmiddle"> [%s](%s) - %s`, StarsPath(r.entry.Repo), alt, r.entry.DisplayName(), r.entry.URL(), r.entry.Description)
 }
 
 // FormatStars renders 1234 as "1.2k" and 80123 as "80k".

internal/render/readme_test.go

@@ -38,9 +38,9 @@ func TestREADMEOrderAndPodium(t *testing.T) {
 		"# Awesome Go\n\n> Curated.\n",
 		"## Contents\n\n- [Web & HTTP](#web--http)\n",
 		"## Web & HTTP\n\nServers.\n\n",
-		"- <img src=\"badges/stars/b--big.svg\" alt=\"46k stars\" align=\"middle\"> [big](https://github.com/b/big) - Big.\n",
-		"- <img src=\"badges/stars/c--mid.svg\" alt=\"2.1k stars\" align=\"middle\"> [middle](https://github.com/c/mid) - Mid.\n",
-		"<summary>More (2)</summary>\n\n- <img src=\"badges/stars/a--small.svg\" alt=\"120 stars\" align=\"middle\"> [small](https://github.com/a/small) - Small.\n- <img src=\"badges/stars/d--unknown.svg\" alt=\"new\" align=\"middle\"> [unknown](https://github.com/d/unknown) - Unknown.\n",
+		"- <img src=\"badges/stars/b--big.svg\" alt=\"46k stars\" align=\"absmiddle\"> [big](https://github.com/b/big) - Big.\n",
+		"- <img src=\"badges/stars/c--mid.svg\" alt=\"2.1k stars\" align=\"absmiddle\"> [middle](https://github.com/c/mid) - Mid.\n",
+		"<summary>More (2)</summary>\n\n- <img src=\"badges/stars/a--small.svg\" alt=\"120 stars\" align=\"absmiddle\"> [small](https://github.com/a/small) - Small.\n- <img src=\"badges/stars/d--unknown.svg\" alt=\"new\" align=\"absmiddle\"> [unknown](https://github.com/d/unknown) - Unknown.\n",
 		"last refreshed on 2026-09-12",
 		"An entry earns its place by covering something no listed project does, or by doing it better.",
 		"Search, filter and sort the full list at [x.github.io/y](https://x.github.io/y/).",
@@ -60,7 +60,7 @@ func TestREADMEOrderAndPodium(t *testing.T) {
 func TestREADMEPodiumWithoutMore(t *testing.T) {
 	l, m := fixture(4)
 	out := string(README(l, m, time.Now()))
-	if !strings.Contains(out, "- <img src=\"badges/stars/a--small.svg\" alt=\"120 stars\" align=\"middle\"> [small](") || !strings.Contains(out, "- <img src=\"badges/stars/d--unknown.svg\" alt=\"new\" align=\"middle\"> [unknown](") {
+	if !strings.Contains(out, "- <img src=\"badges/stars/a--small.svg\" alt=\"120 stars\" align=\"absmiddle\"> [small](") || !strings.Contains(out, "- <img src=\"badges/stars/d--unknown.svg\" alt=\"new\" align=\"absmiddle\"> [unknown](") {
 		t.Fatalf("every podium entry must carry a star pill:\n%s", out)
 	}
 	if strings.Contains(out, "<details>") {