From 5769747a959e9b32470de9fd871142d3255bffe0 Mon Sep 17 00:00:00 2001 From: Leo Vasanko Date: Wed, 19 Aug 2026 00:44:40 +0000 Subject: [PATCH] Disable ligatures in CodeMirror editors CodeMirror measures text per character; Fira Code's ligature glyphs render wider than the measured sum of their parts, corrupting cursor and selection rendering. The font is set on .cm-content with ligatures off, and inner spans inherit it for consistent metrics. --- frontend/src/cmtheme.js | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/frontend/src/cmtheme.js b/frontend/src/cmtheme.js index 30ce3d9..5561d41 100644 --- a/frontend/src/cmtheme.js +++ b/frontend/src/cmtheme.js @@ -14,7 +14,22 @@ export const cmTheme = EditorView.theme({ color: "var(--text)", }, ".cm-scroller": { fontFamily: '"Fira Code", monospace' }, - ".cm-content": { caretColor: "var(--text)" }, + // Fira Code in CodeMirror: set the font on .cm-content (not only the + // scroller) and force every span inside to inherit it, so highlighting + // spans can't drift to a different font/metrics. Ligatures are disabled + // entirely — CodeMirror measures per character, and ligature glyphs + // render wider than the measured sum of their parts. + ".cm-content": { + caretColor: "var(--text)", + fontFamily: '"Fira Code", monospace', + fontVariantLigatures: "none", + fontFeatureSettings: '"calt" 0', + letterSpacing: "normal", + }, + ".cm-content *": { + fontFamily: "inherit", + letterSpacing: "inherit", + }, ".cm-cursor": { borderLeftColor: "var(--text)" }, // basicSetup's active-line highlight assumes a dark theme. ".cm-activeLine": { backgroundColor: "transparent" },