Skip to content

Inherit the editor font in the highlight overlay (macOS) - #199

Closed
Ciinz-04 wants to merge 1 commit into
sysprog21:mainfrom
Ciinz-04:patch-1
Closed

Ciinz-04 wants to merge 1 commit into
sysprog21:mainfrom
Ciinz-04:patch-1

Conversation

@Ciinz-04

@Ciinz-04 Ciinz-04 commented Sep 30, 2026 •

Copy link
Copy Markdown
 The <code> element inside #editor-highlight took font-family: monospace from the user-agent stylesheet instead of the stack set on the overlay.
 On macOS that is a different font from the text area's ui-monospace, and its taller line box moved the painted text away from the caret a little more on every line.

Makes the highlight overlay inherit the editor font so the caret stays aligned on macOS.

Tested on macOS with Safari 27.0 (22625.1.29.11.27). The caret drifted away from the highlighted text in every test I ran, and the gap grew with the number of lines. After running document.querySelector("#editor-highlight code").style.font = "inherit" in the developer console, the caret stayed aligned with the text on every line.

Closes #82


Summary by cubic

Fixes the highlight overlay so the caret stays aligned with the text on macOS. The <code> element inside #editor-highlight was using the user-agent monospace font instead of the overlay’s font stack, which made the caret drift downward as lines increased. Now #editor-highlight code inherits the editor font, keeping the caret aligned. Closes #82.

Written for commit 5ab9c2c. Summary will update on new commits.

Review in cubic

     The <code> element inside #editor-highlight took font-family: monospace from the user-agent stylesheet instead of the stack set on the overlay.
     On macOS that is a different font from the text area's ui-monospace, and its taller line box moved the painted text away from the caret a little more on every line.

@ColtenOuO ColtenOuO left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we can add a browser test to verify that #editor, #editor-highlight, and its inner <code> have matching computed font styles, so removing font: inherit does not reintroduce text/caret misalignment.

@jserv jserv left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Check https://github.com/sysprog21/codetrial/blob/main/CONTRIBUTING.md carefully and rework git commit message.

@ColtenOuO

Copy link
Copy Markdown
Collaborator

Superseded by PR #204, close this one.

For future changes: when a review asks for changes, please update the existing pull request instead of opening a new one. Amend the commit (or add a new one), then push to the same branch, using git push --force-with-lease after an amend or rebase. The PR picks up the new commits automatically, and the review history stays in one place. A second PR splits the discussion across two threads, so maintainers have to work out which one is current and which comments still apply

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

UI/Editor sync issue causes typed code to misalign and display incorrectly (Safari only)

3 participants