Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Bug] Guidelines not rendering in correct positions #4695

Open
2 tasks done
bananensplit opened this issue Sep 26, 2024 · 1 comment
Open
2 tasks done

[Bug] Guidelines not rendering in correct positions #4695

bananensplit opened this issue Sep 26, 2024 · 1 comment

Comments

@bananensplit
Copy link

bananensplit commented Sep 26, 2024 •
edited
Loading

Reproducible in vscode.dev or in VS Code Desktop?

  • Not reproducible in vscode.dev or VS Code Desktop

Reproducible in the monaco editor playground?

Monaco Editor Playground Link

No response

Monaco Editor Playground Code

No response

Reproduction Steps

  1. Get the latest source from the repository. The follwing will download the package as a .tgz file into your working directory and extract it:
npm pack monaco-editor
tar xvf monaco-editor-0.52.0.tgz
  1. Paste the code below into an index.html file in the same directory where you downloaded the code to:
<!DOCTYPE html>
<html>
<head>
    <title>Monaco Test</title>
    <link rel="stylesheet" type="text/css" data-name="vs/editor/editor.main" href="package/min/vs/editor/editor.main.css">
    
    <style>
        /* In our codebase this is set globally and cannot be changed */
        * {
            font-family: arial, serif;
            font-size: 14px;
        }

        /* I used this to reset all styles that might colide with editor.main.css. This worked beautifully. */
        .monaco-editor, .monaco-editor *, .monaco-diff-editor, .monaco-diff-editor * {
            all: revert;
        }
    </style>
</head>
<body>
    <div id="container" style="width: 800px; height: 600px; border: 1px solid grey"></div>

    <script> var require = {"paths": {"vs": window.location.origin + "/monaco-editor-0.52.0/dev/vs"}};</script>
    <script src="package/min/vs/loader.js" language="javascript" type="text/javascript"></script>
    <script src="package/min/vs/editor/editor.main.js" language="javascript" type="text/javascript"></script>

    <script>
        var editor = monaco.editor.create(document.getElementById('container'), {
            value: ['function x() {', '\tconsole.log("Hello world!");', '\t{', '\t\tconsole.log("Indentedline");', '\t}', '}'].join('\n'),
            language: 'javascript',
        });
    </script>
</body>
</html>
  1. Open the index.html file using VSCode LiveServer.
  2. Then the problem should already be appearent.

Actual (Problematic) Behavior

The guideline is drawn in the wrong spot:
image

Expected Behavior

The guideline should be drawn like this:
image

Additional Context

No response
@bananensplit
Copy link
Author

I have already looked into this and I think the problem is the way the character widths in charWidthReader.ts are calculated.

The DomCharWidthReader uses the _createDomElements Method to create some test elements. It creates three div-elements (one for each font-style: bold, italic and normal), which then are filled with a bunch of span-elements that each contain a different character of which the width is to be measured. The configured font-style (fontFamily, fontSize, etc.) is applied to the three div-elements, which are then all wrapped into another div and appended to the body.

The created test element (stored in this._container) looks something like this:

<div style="position: absolute; top: -50000px; width: 50000px;">
    <div
        style="font-family: Consolas, &quot;Courier New&quot;, monospace; font-weight: normal; font-size: 12px; font-feature-settings: &quot;liga&quot; 0, &quot;calt&quot; 0; font-variation-settings: normal; line-height: 16px; letter-spacing: 0px;">
        <br>
        <span>iiiiiiiiiiiiiiiiiiiiii</span>
        <!-- a bunch more <br><span>...</span> -->
    </div>
    <div
        style="font-family: Consolas, &quot;Courier New&quot;, monospace; font-weight: bold; font-size: 12px; font-feature-settings: &quot;liga&quot; 0, &quot;calt&quot; 0; font-variation-settings: normal; line-height: 16px; letter-spacing: 0px;">
        <br>
        <span>|||||||||||||||||||||||<span>
        <!-- a bunch more <br><span>...</span> -->
    </div>
    <div
        style="font-family: Consolas, &quot;Courier New&quot;, monospace; font-weight: normal; font-size: 12px; font-feature-settings: &quot;liga&quot; 0, &quot;calt&quot; 0; font-variation-settings: normal; line-height: 16px; letter-spacing: 0px; font-style: italic;">
        <br>
        <span>|||||||||||||||||||</span>
        <!-- a bunch more <br><span>...</span> -->
    </div>
</div>

You will notice that the three div-elements have the styles applied, which the span-elements in them should inherit. And here is the problem: When somebody uses the * CSS-Selector to apply global styles it takes precedence to the inherited style of the parent. This means that even though the div-elements have the correct styles applied, the span-elements, which are actually used to measure the characters, don't inherit them.

This is also visible in the DevTools of the browser when you select one of the span-elements:
image.

Potential Solutions

  • The first one would be to just apply the styles to the span elements (this would mean calling applyFontInfo for each span-element created.)
  • The second possibility would be to set the all font properties to inherit: testElement.style.font = 'inherit'. This would mean that the span-elements would explicitly inherit their styles directly from their parents which would override the global *-style.

I am very open to a discussion and am also very motivated to implement the change.
Thanks for reading :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@bananensplit