fix(ui): show every character of monospace text, no font ligatures - #386
Merged
Merged
Conversation
JetBrains Mono ships programming ligatures (contextual alternates). It drew `--` as one continuous line: a learner typing `git merge --no-ff` saw one of the two dashes disappear as soon as the space was typed, and it reappeared after Enter. They had to paste the command to finish the exercise (reported by @thierryvm, 24 September 2026, reproduced in Chrome). The characters were never altered: the input held "-- " (recorded keydown/beforeinput/input events). Only the rendering merged them. Ligatures are now disabled for .font-mono, code, kbd, samp and pre. The property is inherited, so it covers the terminal output, its input, the landing terminal demo, lesson code blocks and inline code chips. A static test guards the rule (jsdom does not apply stylesheets); the visual effect was checked in Chrome. Known limit: WebKit (Safari macOS / iOS) is documented as unable to turn off contextual alternates from CSS. Not verified on a real Apple device yet; the ligature-free font fallback is tracked in THI-354. Refs THI-353, THI-354 Co-Authored-By: Claude Opus 5.5 <[email protected]>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
There was a problem hiding this comment.
Sorry @thierryvm, you've used your own review budget of 250,000 diff characters for the last 7 days.
You can request another review in 2 days and 17 hours by commenting @sourcery-ai review. Upgrade to get a review now.
Guide du réviseurLa PR corrige les caractères fusionnés visuellement dans le texte monospace de l’interface en désactivant les ligatures et les variantes contextuelles de JetBrains Mono sur les surfaces du terminal et du code, avec une vérification Vitest au niveau du code source et une documentation explicite de la limitation non résolue concernant Safari/WebKit. Diagramme de séquence pour le rendu des commandes en monospacesequenceDiagram
actor Learner
participant Input as Terminal input
participant CSS as Monospace CSS
participant Browser as Chrome renderer
Learner->>Input: Type git merge --no-ff
Input->>CSS: Inherit ligature settings
CSS->>Browser: Disable liga and calt
Browser-->>Input: Render both dashes distinctly
Input-->>Learner: Show exact command characters
Diagramme de flux pour empêcher les ligatures en monospaceflowchart LR
Content[Monospace content] --> Surfaces[font-mono, code, kbd, samp, pre]
Surfaces --> CSS[font-variant-ligatures: none<br/>font-feature-settings: liga 0, calt 0]
CSS --> Rendering[Distinct character rendering]
Rendering --> Learner[Learner sees and types every character]
Diagramme de flux pour la protection contre les ligatures et la limitation de Safariflowchart LR
Rule[Monospace ligature rule] --> Guard[monospaceLigatures.test.ts]
Guard --> Pass[Source rule verified]
Rule --> Chrome[Chrome: ligatures disabled]
Rule --> Safari[WebKit: contextual alternates may remain]
Safari --> Followup[JetBrains Mono NL tracked by THI-354]
Modifications au niveau des fichiers
Conseils et commandesInteragir avec Sourcery
Personnaliser votre expérienceAccédez à votre tableau de bord pour :
Obtenir de l’aide
Original review guide in EnglishReviewer's GuideThe PR fixes visually merged characters in monospace UI text by disabling JetBrains Mono ligatures and contextual alternates across terminal and code surfaces, with a source-level Vitest guard and explicit documentation of the unresolved Safari/WebKit limitation. Sequence diagram for monospace command renderingsequenceDiagram
actor Learner
participant Input as Terminal input
participant CSS as Monospace CSS
participant Browser as Chrome renderer
Learner->>Input: Type git merge --no-ff
Input->>CSS: Inherit ligature settings
CSS->>Browser: Disable liga and calt
Browser-->>Input: Render both dashes distinctly
Input-->>Learner: Show exact command characters
Flow diagram for monospace ligature preventionflowchart LR
Content[Monospace content] --> Surfaces[font-mono, code, kbd, samp, pre]
Surfaces --> CSS[font-variant-ligatures: none<br/>font-feature-settings: liga 0, calt 0]
CSS --> Rendering[Distinct character rendering]
Rendering --> Learner[Learner sees and types every character]
Flow diagram for ligature guard and Safari limitationflowchart LR
Rule[Monospace ligature rule] --> Guard[monospaceLigatures.test.ts]
Guard --> Pass[Source rule verified]
Rule --> Chrome[Chrome: ligatures disabled]
Rule --> Safari[WebKit: contextual alternates may remain]
Safari --> Followup[JetBrains Mono NL tracked by THI-354]
File-Level Changes
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
This branch was successfully deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Why
Reported by @thierryvm (24 September 2026) and reproduced in Chrome/Windows: typing
git merge --no-ff, one of the two dashes "disappeared" as soon as the space was typed and reappeared after Enter, so the learner pasted the command to finish the exercise.Root cause (evidence, not a guess): the characters were never altered — recorded
keydown/beforeinput/inputevents show the field holding"-- "(U+002D U+002D U+0020). The font, JetBrains Mono, ships programming ligatures (contextual alternates) and draws--as one continuous line. In a terminal course that hides the very characters being taught (--,->,!=…).What
src/styles/theme.css(@layer base):font-variant-ligatures: none; font-feature-settings: "liga" 0, "calt" 0;on.font-mono, code, kbd, samp, pre— inherited, so it covers the terminal output and input, the landing terminal demo, lesson code blocks and inline code chips.Known limit — disclosed, tracked
WebKit (Safari macOS / iOS) is documented as unable to turn off contextual alternates from CSS. Verified in Chrome only. THI-354 tracks a real-iPhone check and, if needed, the robust fix: serve the official ligature-free JetBrains Mono NL (official JetBrains release, checksum verified, OFL) — no new npm package.
Gates
src/test/monospaceLigatures.test.ts— red without the rule, green with it (jsdom does not apply CSS, so it guards the rule itself)font-variant-ligatures: noneon terminal input, output and lesson<code>;git merge --no-ffnow shows two distinct dashes while typingRefs THI-353, THI-354
🤖 Generated with Claude Code
Résumé par Sourcery
Garantir que les caractères monospace restent visuellement distincts dans toute l’interface en désactivant les ligatures de police et les variantes contextuelles.
Corrections de bugs :
Tests :
Original summary in English
Summary by Sourcery
Ensure monospace characters remain visually distinct throughout the interface by disabling font ligatures and contextual alternates.
Bug Fixes:
Tests: