microsoft / microsoft/monaco-editor
[Bug] Cursor becomes misaligned when using custom font
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 46.8k
- Forks
- 4.1k
- Avg merge
- 17h 58m
- Merged PRs (30d)
- 1
Description
Reproducible in vscode.dev or in VS Code Desktop?
- Not reproducible in vscode.dev or VS Code Desktop
Reproducible in the monaco editor playground?
- Not reproducible in the monaco editor playground
Monaco Editor Playground Link
Monaco Editor Playground Code
JS:
require.config({ paths: { 'vs': 'monaco-editor/min/vs' } });
require(['vs/editor/editor.main'], function () {
const editor = monaco.editor.create(document.getElementById('editor'), {
value: '<!DOCTYPE html>\n<html lang="en">\n<head>\n <meta charset="UTF-8">\n <meta name="viewport" content="width=device-width, initial-scale=1.0">\n <title>Document</title>\n</head>\n<body>\n <h1>Hello, Monaco Editor!</h1>\n</body>\n</html>',
language: 'html',
theme: 'vs-dark',
automaticLayout: true,
fontFamily: 'Laurentia Code',
});
const preview = document.getElementById('preview');
editor.onDidChangeModelContent(() => {
const html = editor.getValue();
preview.srcdoc = html;
});
});
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CodePen-like Editor</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<div id="editor"></div>
<iframe id="preview" sandbox="allow-scripts"></iframe>
</div>
<script src="monaco-editor/min/vs/loader.js"></script>
<script src="script.js"></script>
</body>
</html>
CSS:
@font-face {
font-family: 'Laurentia Code';
src: url(https://andorraeditor.pages.dev/DejaVuSansMono.ttf);
}
body, html {
margin: 0;
padding: 0;
height: 100%;
display: flex;
flex-direction: column;
font-family: Arial, sans-serif;
}
#container {
display: flex;
height: 100%;
width: 100%;
}
#editor {
width: 50%;
height: 100%;
}
#preview {
width: 50%;
height: 100%;
border: none;
}
Reproduction Steps
We were loading a custom font a code editor we wanted to create. When we entered the URL and changed the font in the CSS file, the cursor would be gradually misplaced in the Monaco editor, both in the playground and on our website.
Actual (Problematic) Behavior
When the custom font gets loaded, as the user moves right in a line (or farther away from the left size of the editor) their cursor would start to become misaligned. It is the worst on desktop (Win11) but also happens a bit on mobile. We have tried a few other fonts and the
text cursor still does the same thing.
Expected Behavior
The cursor should stay aligned with the text, no matter what font.
Additional Context
No response
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked Monaco Editor Playground reproduction and the custom font setup in the JavaScript and CSS examples. Compare cursor placement as the custom font loads and as the caret moves farther across a line. Done means the cursor remains aligned with the rendered text on desktop and mobile reproductions.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100