From 1a1bfccfcf8da8e5801adc44cdfb7e9385ef0ff4 Mon Sep 17 00:00:00 2001 From: Goldfinch Date: Sun, 19 Jul 2026 10:43:28 -0600 Subject: [PATCH] Playground: tab stops measure from the code, not the gutter The line-number ::before was an inline-block at the head of every line, so CSS tab stops (multiples of tab-size from the line box start) landed mid-phase after the gutter's width - the first tab rendered at whatever remainder was left (width 1 at tab-size 2, 3 at 4, 1 at 5...). Numbers now sit absolutely positioned inside reserved padding, each line is its own pre-formatted block, and the first tab stop lands a full tab-size from where the code starts at every width. Co-Authored-By: Claude Fable 5 --- docs/src/pages/playground.astro | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/docs/src/pages/playground.astro b/docs/src/pages/playground.astro index 19df16b..0a0fc70 100644 --- a/docs/src/pages/playground.astro +++ b/docs/src/pages/playground.astro @@ -457,16 +457,25 @@ const baseHref = import.meta.env.BASE_URL; tab-size: var(--tab-width, 2); background: transparent !important; } - .output code { display: block; counter-reset: line; } + /* Line numbers live in reserved padding, absolutely positioned, + so they never join the inline flow: CSS tab stops are measured + from the line box start, and an inline gutter would shift the + first tab stop by its own width. */ + .output code { display: block; white-space: normal; counter-reset: line; } .output .line { + display: block; + position: relative; + white-space: pre; + min-height: 22px; counter-increment: line; + padding-left: 4.3rem; padding-right: 1rem; } .output .line::before { content: counter(line); - display: inline-block; + position: absolute; + left: 0; width: 3.2rem; - padding-right: 1.1rem; text-align: right; color: #4a4453; font-family: "JetBrains Mono", monospace; -- 2.51.2