Repository navigation
Keep text in place when a wrong key lands on a space - #9
Merged
Merged
Conversation
The red dot for a missed space replaced the space glyph. In fonts where the dot is wider or narrower than a space (the Mac system font), the rest of the line shifted. The span now keeps the real space and draws the dot on top of it. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
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
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.
Problem
A wrong key where a space belongs shows a red dot. The dot replaced the space character, and on a Mac the system font draws "·" at a different width than " ". So every typo on a space nudged the rest of the line sideways. The text should never move while you type.
Fix
The span now keeps the real space, so its width and line breaks match a correct keystroke. The dot is drawn on top of the space as an absolutely positioned overlay that takes no layout room.
Proof
New check in
tests/play.mjs. It forces Liberation Sans, where a space is 27.8 and a dot is 33.3 at 100px, the same kind of gap the Mac font has. It then compares the left edge of the untyped text after a correct space and after a wrong key on that space.FAIL a wrong key on a space does not move the text after it (541.484375 vs 542.59375)ok ... (541.484375 vs 541.484375)The dot looks the same as before (Inter, 3x zoom):
With Liberation Sans, the dot sits centered in the narrower space:
npm run lint,npm run typecheck,npm run test:unit(28 passed), andnode tests/play.mjs(38 ok) all pass. I could not test on a Mac with the real system font. The Liberation Sans check stands in for it.Reviewed with sol-loop: 1 round with gpt-6.1-sol. Sol verdict: approved
Created with Claude Opus 5.5 in Claude Code (T3 Code).
🤖 Generated with Claude Code