microsoft
[Bug] Cursor becomes misaligned when using custom font
Reproducible in vscode.dev or in VS Code Desktop?
- [X] 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
Yeah, sorry. We forgot to close this. You can use this function in the code to make sure the font cache gets reset.
function ensureFontsLoaded(callback) {
document.fonts.ready.then(() => {
monaco.editor.remeasureFonts();
callback();
});
}
ensureFontsLoaded(() => {
console.log("Fonts loaded and remeasured");
});