From a2f91080a506abc6bf2cd92572059a5e00936a86 Mon Sep 17 00:00:00 2001 From: Brian Muenzenmeyer Date: Thu, 16 Jul 2026 21:16:30 -0500 Subject: [PATCH] fix: update monospace font-sace for fenced code block --- src/generators/web/ui/index.css | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/src/generators/web/ui/index.css b/src/generators/web/ui/index.css index fb436e2e..ff4186c9 100644 --- a/src/generators/web/ui/index.css +++ b/src/generators/web/ui/index.css @@ -16,6 +16,27 @@ main { word-break: break-word; } + /* + * Fenced code blocks use a system monospace stack instead of IBM Plex Mono. + * Plex has no glyphs for the Unicode Box Drawing block (U+2500–U+257F) and + * Google Fonts never serves that block, so the box-drawing characters in + * ASCII-art diagrams (e.g. the URL table in url.md) fall back per-glyph to + * the OS default monospace. On Windows that is Consolas (0.55em) while Plex + * letters are 0.60em; the mismatched advance widths shear the diagram out of + * alignment. Rendering the whole block in one system font keeps every glyph + * the same width — the same stack nodejs.org and the legacy-html generator + * already use. See https://github.com/nodejs/doc-kit/issues/909. + * + * This only overrides the variable within `pre`, so inline code and the rest + * of the UI keep IBM Plex Mono. The variable keeps its name because the + * compiled @node-core/ui-components CSS reads `var(--font-ibm-plex-mono)`. + */ + pre { + --font-ibm-plex-mono: + 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', 'Courier New', + monospace; + } + /* Don't overflow the parent */ .overflow-container { overflow-x: auto;