Configuration for undercurl vertical offset #21909

@smprather commented on GitHub (Jun 28, 2024):

WezTerm w/ default settings.

@smprather commented on GitHub (Jun 28, 2024): WezTerm w/ default settings. ![image](https://github.com/microsoft/terminal/assets/6503931/6117cae6-aa1a-4600-a081-f4e00a059ccb)

claunia commented

@smprather commented on GitHub (Jun 28, 2024):

Mate-Terminal

@smprather commented on GitHub (Jun 28, 2024): Mate-Terminal ![image](https://github.com/microsoft/terminal/assets/6503931/3b8e4821-0654-41d1-861d-60376f446c55)

claunia commented

@lhecker commented on GitHub (Jun 28, 2024):

I'd like to reproduce the issue first, before adding any settings. It could be a bug in our renderer after all. Can you please tell me the following?

Your font family
Font size
Line height, if you set it
Display scale (the one you set in the Windows Settings app)

@lhecker commented on GitHub (Jun 28, 2024): I'd like to reproduce the issue first, before adding any settings. It could be a bug in our renderer after all. Can you please tell me the following? * Your font family * Font size * Line height, if you set it * Display scale (the one you set in the Windows Settings app)

claunia commented

@smprather commented on GitHub (Jun 28, 2024):

I'm not sure how to check the font size once I change it. Opening a new session, I know that it's 10pt Hack Nerd Font Mono. Here's a look at that. Line height is default. Display scale is 100%. Grayscale and ClearType antialiasing look identical (literally identical; I tried a restart to make sure).

{
    "$help": "https://aka.ms/terminal-documentation",
    "$schema": "https://aka.ms/terminal-profiles-schema-preview",
    "actions": 
    [
        {
            "command": 
            {
                "action": "splitPane",
                "split": "auto",
                "splitMode": "duplicate"
            },
            "id": "User.splitPane.A6751878",
            "keys": "alt+shift+d"
        },
        {
            "command": "toggleFocusMode",
            "id": "User.toggleFocusMode",
            "keys": "ctrl+shift+f"
        },
        {
            "command": "unbound",
            "keys": "ctrl+v"
        }
    ],
    "confirmCloseAllTabs": false,
    "copyFormatting": "none",
    "copyOnSelect": true,
    "defaultProfile": "{e2a4882f-638c-41a2-86c2-2c88bfe51b07}",
    "experimental.detectURLs": false,
    "launchMode": "maximized",
    "newTabMenu": 
    [
        {
            "type": "remainingProfiles"
        }
    ],
    "profiles": 
    {
        "defaults": 
        {
            "adjustIndistinguishableColors": "always",
            "cursorShape": "underscore",
            "font": 
            {
                "face": "Hack Nerd Font Mono",
                "size": 10
            },
            "padding": "0",
            "scrollbarState": "hidden"
        },
        "list": 
        [
            {
                "commandline": "%SystemRoot%\\System32\\WindowsPowerShell\\v1.0\\powershell.exe",
                "elevate": false,
                "guid": "{61c54bbd-c2c6-5271-96e7-009a87ff44bf}",
                "hidden": false,
                "name": "Windows PowerShell"
            },
            {
                "adjustIndistinguishableColors": "indexed",
                "backgroundImage": "C:\\Users\\epramyl\\OneDrive - Ericsson\\Pictures\\pink_floyd_dsotm.jpg",
                "backgroundImageOpacity": 0.23,
                "bellStyle": "none",
                "closeOnExit": "graceful",
                "colorScheme": "Tango Dark",
                "commandline": "%SystemRoot%\\System32\\cmd.exe",
                "cursorShape": "filledBox",
                "experimental.rightClickContextMenu": true,
                "font": 
                {
                    "face": "Hack Nerd Font Mono",
                    "size": 10
                },
                "guid": "{0caa0dad-35be-5f56-a8ff-afceeeaa6101}",
                "hidden": false,
                "historySize": 0,
                "name": "Command Prompt",
                "snapOnInput": false,
                "suppressApplicationTitle": true,
                "useAcrylic": false
            },
            {
                "guid": "{2c4de342-38b7-51cf-b940-2309a097f518}",
                "hidden": true,
                "name": "Ubuntu",
                "source": "Windows.Terminal.Wsl"
            },
            {
                "guid": "{b453ae62-4e3d-5e58-b989-0a998ec441b8}",
                "hidden": false,
                "name": "Azure Cloud Shell",
                "source": "Windows.Terminal.Azure"
            },
            {
                "guid": "{51855cb2-8cce-5362-8f54-464b92b32386}",
                "hidden": false,
                "name": "Ubuntu",
                "source": "CanonicalGroupLimited.Ubuntu_79rhkp1fndgsc"
            },
            {
                "adjustIndistinguishableColors": "indexed",
                "altGrAliasing": true,
                "antialiasingMode": "cleartype",
                "bellStyle": "none",
                "closeOnExit": "automatic",
                "colorScheme": "Tango Dark",
                "commandline": "c:\\cygwin64\\bin\\bash.exe --login -i",
                "cursorShape": "filledBox",
                "experimental.retroTerminalEffect": false,
                "font": 
                {
                    "face": "Hack Nerd Font Mono",
                    "size": 11,
                    "weight": "normal"
                },
                "guid": "{95cbe99e-4035-4bc9-90a7-a7675ddb0d16}",
                "hidden": false,
                "historySize": 0,
                "icon": "C:\\cygwin64\\usr\\share\\icons\\hicolor\\256x256\\apps\\mintty.png",
                "name": "Cygwin Bash",
                "opacity": 100,
                "snapOnInput": false,
                "startingDirectory": "%USERPROFILE%",
                "tabTitle": "Cygwin Bash",
                "useAcrylic": false
            },
            {
                "adjustIndistinguishableColors": "indexed",
                "altGrAliasing": true,
                "antialiasingMode": "grayscale",
                "backgroundImage": "C:\\Users\\epramyl\\OneDrive - Ericsson\\Pictures\\pink_floyd_dsotm.jpg",
                "backgroundImageOpacity": 0.23,
                "bellStyle": "none",
                "closeOnExit": "graceful",
                "colorScheme": "Tango Dark",
                "commandline": "C:\\Windows\\System32\\OpenSSH\\ssh.exe -t 100.87.168.59",
                "cursorShape": "filledBox",
                "experimental.rightClickContextMenu": true,
                "font": 
                {
                    "face": "Hack Nerd Font Mono",
                    "size": 10
                },
                "guid": "{e2a4882f-638c-41a2-86c2-2c88bfe51b07}",
                "hidden": false,
                "historySize": 0,
                "icon": "ms-appx:///ProfileIcons/{0caa0dad-35be-5f56-a8ff-afceeeaa6101}.png",
                "name": "VDI",
                "snapOnInput": false,
                "startingDirectory": "%USERPROFILE%",
                "suppressApplicationTitle": true,
                "tabTitle": "VDI",
                "useAcrylic": false
            }
        ]
    },
    "rendering.graphicsAPI": "direct3d11",
    "schemes": [],
    "startOnUserLogin": true,
    "themes": [],
    "useAcrylicInTabRow": false,
    "wordDelimiters": " '\",=[]$*{}<>()^#!`;\t:\u2502"
}

@smprather commented on GitHub (Jun 28, 2024): I'm not sure how to check the font size once I change it. Opening a new session, I know that it's 10pt Hack Nerd Font Mono. Here's a look at that. Line height is default. Display scale is 100%. Grayscale and ClearType antialiasing look identical (literally identical; I tried a restart to make sure). ![image](https://github.com/microsoft/terminal/assets/6503931/e4193f6c-d8b8-464f-90d1-8628f96c2baa) ```json { "$help": "https://aka.ms/terminal-documentation", "$schema": "https://aka.ms/terminal-profiles-schema-preview", "actions": [ { "command": { "action": "splitPane", "split": "auto", "splitMode": "duplicate" }, "id": "User.splitPane.A6751878", "keys": "alt+shift+d" }, { "command": "toggleFocusMode", "id": "User.toggleFocusMode", "keys": "ctrl+shift+f" }, { "command": "unbound", "keys": "ctrl+v" } ], "confirmCloseAllTabs": false, "copyFormatting": "none", "copyOnSelect": true, "defaultProfile": "{e2a4882f-638c-41a2-86c2-2c88bfe51b07}", "experimental.detectURLs": false, "launchMode": "maximized", "newTabMenu": [ { "type": "remainingProfiles" } ], "profiles": { "defaults": { "adjustIndistinguishableColors": "always", "cursorShape": "underscore", "font": { "face": "Hack Nerd Font Mono", "size": 10 }, "padding": "0", "scrollbarState": "hidden" }, "list": [ { "commandline": "%SystemRoot%\\System32\\WindowsPowerShell\\v1.0\\powershell.exe", "elevate": false, "guid": "{61c54bbd-c2c6-5271-96e7-009a87ff44bf}", "hidden": false, "name": "Windows PowerShell" }, { "adjustIndistinguishableColors": "indexed", "backgroundImage": "C:\\Users\\epramyl\\OneDrive - Ericsson\\Pictures\\pink_floyd_dsotm.jpg", "backgroundImageOpacity": 0.23, "bellStyle": "none", "closeOnExit": "graceful", "colorScheme": "Tango Dark", "commandline": "%SystemRoot%\\System32\\cmd.exe", "cursorShape": "filledBox", "experimental.rightClickContextMenu": true, "font": { "face": "Hack Nerd Font Mono", "size": 10 }, "guid": "{0caa0dad-35be-5f56-a8ff-afceeeaa6101}", "hidden": false, "historySize": 0, "name": "Command Prompt", "snapOnInput": false, "suppressApplicationTitle": true, "useAcrylic": false }, { "guid": "{2c4de342-38b7-51cf-b940-2309a097f518}", "hidden": true, "name": "Ubuntu", "source": "Windows.Terminal.Wsl" }, { "guid": "{b453ae62-4e3d-5e58-b989-0a998ec441b8}", "hidden": false, "name": "Azure Cloud Shell", "source": "Windows.Terminal.Azure" }, { "guid": "{51855cb2-8cce-5362-8f54-464b92b32386}", "hidden": false, "name": "Ubuntu", "source": "CanonicalGroupLimited.Ubuntu_79rhkp1fndgsc" }, { "adjustIndistinguishableColors": "indexed", "altGrAliasing": true, "antialiasingMode": "cleartype", "bellStyle": "none", "closeOnExit": "automatic", "colorScheme": "Tango Dark", "commandline": "c:\\cygwin64\\bin\\bash.exe --login -i", "cursorShape": "filledBox", "experimental.retroTerminalEffect": false, "font": { "face": "Hack Nerd Font Mono", "size": 11, "weight": "normal" }, "guid": "{95cbe99e-4035-4bc9-90a7-a7675ddb0d16}", "hidden": false, "historySize": 0, "icon": "C:\\cygwin64\\usr\\share\\icons\\hicolor\\256x256\\apps\\mintty.png", "name": "Cygwin Bash", "opacity": 100, "snapOnInput": false, "startingDirectory": "%USERPROFILE%", "tabTitle": "Cygwin Bash", "useAcrylic": false }, { "adjustIndistinguishableColors": "indexed", "altGrAliasing": true, "antialiasingMode": "grayscale", "backgroundImage": "C:\\Users\\epramyl\\OneDrive - Ericsson\\Pictures\\pink_floyd_dsotm.jpg", "backgroundImageOpacity": 0.23, "bellStyle": "none", "closeOnExit": "graceful", "colorScheme": "Tango Dark", "commandline": "C:\\Windows\\System32\\OpenSSH\\ssh.exe -t 100.87.168.59", "cursorShape": "filledBox", "experimental.rightClickContextMenu": true, "font": { "face": "Hack Nerd Font Mono", "size": 10 }, "guid": "{e2a4882f-638c-41a2-86c2-2c88bfe51b07}", "hidden": false, "historySize": 0, "icon": "ms-appx:///ProfileIcons/{0caa0dad-35be-5f56-a8ff-afceeeaa6101}.png", "name": "VDI", "snapOnInput": false, "startingDirectory": "%USERPROFILE%", "suppressApplicationTitle": true, "tabTitle": "VDI", "useAcrylic": false } ] }, "rendering.graphicsAPI": "direct3d11", "schemes": [], "startOnUserLogin": true, "themes": [], "useAcrylicInTabRow": false, "wordDelimiters": " '\",=[]$*{}<>()^#!`;\t:\u2502" } ```

claunia commented

@smprather commented on GitHub (Jun 28, 2024):

The collision/legibility is definitely a function of font size. But the top of the curl is definitely abutting the bottom of the font. There needs to be at least some kind of small spacing.

@smprather commented on GitHub (Jun 28, 2024): The collision/legibility is definitely a function of font size. But the top of the curl is definitely abutting the bottom of the font. There needs to be at least some kind of small spacing. ![image](https://github.com/microsoft/terminal/assets/6503931/e4e177a5-8410-4c22-9980-cc76723d6009)

claunia commented

@smprather commented on GitHub (Jun 28, 2024):

If I super-size, I can a bit of separation.

@smprather commented on GitHub (Jun 28, 2024): If I super-size, I can a bit of separation. ![image](https://github.com/microsoft/terminal/assets/6503931/96aa7406-4b97-4935-9e85-80e7e4b792df)

claunia commented

@smprather commented on GitHub (Jun 28, 2024):

I think what I would like to see is a minimum integer number of pixels separation, no matter the font size. Even 1 pixel would be great. It would also be nice to be able to specify the pk-2-pk height of the curl, but that's just a nice to have.

@smprather commented on GitHub (Jun 28, 2024): I think what I would like to see is a minimum integer number of pixels separation, no matter the font size. Even 1 pixel would be great. It would also be nice to be able to specify the pk-2-pk height of the curl, but that's just a nice to have.

claunia commented

@smprather commented on GitHub (Jun 28, 2024):

Note that the collision is not as bad if I can set the undercurl color to be different than the font color. And I do have that set in nvim. But there is some kind of problem such that color works when not in tmux, but does not work in tmux (EXCEPT in MateTerminal it does work??? You can see that in the MateTerm grab above.). One day, I'll figure it out. But for now...

@smprather commented on GitHub (Jun 28, 2024): Note that the collision is not as bad if I can set the undercurl color to be different than the font color. And I do have that set in nvim. But there is some kind of problem such that color works when not in tmux, but does not work in tmux (EXCEPT in MateTerminal it does work??? You can see that in the MateTerm grab above.). One day, I'll figure it out. But for now...

claunia commented

@lhecker commented on GitHub (Jun 29, 2024):

I think there are two problems:

The curly underline is 1px too high up which causes it to overlap with the text. Mate, WezTerm, and Windows Terminal all draw a 3px tall wave, but we're the only one which positions it this high up.
We currently only do vertical anti-aliasing. This looks good on HiDPI displays and large font sizes, but at low DPIs and small font sizes it looks ugly because it's too "pixel-y". I didn't do this because I was too lazy to figure out the math for how to calculate an arbitrary point-sine-wave distance. 🙈

In other words:

Fix the vertical position of the curly underline
Add horizontal anti-aliasing

@lhecker commented on GitHub (Jun 29, 2024): I think there are two problems: * The curly underline is 1px too high up which causes it to overlap with the text. Mate, WezTerm, and Windows Terminal all draw a 3px tall wave, but we're the only one which positions it this high up. * We currently only do vertical anti-aliasing. This looks good on HiDPI displays and large font sizes, but at low DPIs and small font sizes it looks ugly because it's too "pixel-y". I didn't do this because I was too lazy to figure out the math for how to calculate an arbitrary point-sine-wave distance. 🙈 In other words: * Fix the vertical position of the curly underline * Add horizontal anti-aliasing

claunia commented

@lhecker commented on GitHub (Jun 29, 2024):

After spending way too much time in desmos's graphing calculator I realized that I can calculate the distance to the tangent of the sin curve quite easily while being a sufficient approximation. The tangent for sin(x) is cos(x), its angle is atan(cos(x)) and the height of a right triangle with such an angle is:

f(x,y) = \left|y-\sin\left(x\right)\right| \cdot \cos\left(\arctan\left(\cos\left(x\right)\right)\right)

That's such a fantastic coincidence because cos(atan(cos(x))) can be expressed not just using sin(x) which we already need anyway, but also using a reverse square root which is super cheap:

f(x,y) = \left|y-\sin\left(x\right)\right| \cdot {1 \over \sqrt{2-sin(x)^2}}

This is what we already have:

float s = sin(data.position.x * frequency);
float d = abs(curlyLineHalfHeight - data.texcoord.y - s * amplitude);

and all that was missing was a tiny rsqrt at the end lol:

float s = sin(data.position.x * frequency);
float d = abs(curlyLineHalfHeight - data.texcoord.y - s * amplitude) * rsqrt(2 - s * s);

@lhecker commented on GitHub (Jun 29, 2024): After spending way too much time in desmos's graphing calculator I realized that I can calculate the distance to the tangent of the sin curve quite easily while being a sufficient approximation. The tangent for `sin(x)` is `cos(x)`, its angle is `atan(cos(x))` and the height of a right triangle with such an angle is: ```math f(x,y) = \left|y-\sin\left(x\right)\right| \cdot \cos\left(\arctan\left(\cos\left(x\right)\right)\right) ``` That's such a fantastic coincidence because `cos(atan(cos(x)))` can be expressed not just using `sin(x)` which we already need anyway, but also using a reverse square root which is super cheap: ```math f(x,y) = \left|y-\sin\left(x\right)\right| \cdot {1 \over \sqrt{2-sin(x)^2}} ``` This is what we already have: ```hlsl float s = sin(data.position.x * frequency); float d = abs(curlyLineHalfHeight - data.texcoord.y - s * amplitude); ``` and all that was missing was a tiny `rsqrt` at the end lol: ```hlsl float s = sin(data.position.x * frequency); float d = abs(curlyLineHalfHeight - data.texcoord.y - s * amplitude) * rsqrt(2 - s * s); ```

claunia commented

https://github.com/microsoft/terminal/assets/11535558/538b4673-4fe9-4d3d-a4af-7640893c55ed

@o-sdn-o commented on GitHub (Jun 29, 2024):

We currently only do vertical anti-aliasing. This looks good on HiDPI displays and large font sizes, but at low DPIs and small font sizes it looks ugly because it's too "pixel-y".

IMO The sine wave does not need antialiasing even at a few pixels scale since it is quite symmetrical. Antialiasing only blurs it (this is just as ugly as using vertical AA for a single underline).

Here are examples

of aliased wavy underlines (first with aliased glyphs and the second with AA glyph rendering)

Aliased glyphs:

Antialiased glyphs:

https://github.com/microsoft/terminal/assets/11535558/36a23fe7-1519-4eb3-9881-0c700093f7f9

You can play with it using built artifacts https://github.com/directvt/vtm/actions/runs/9722846266 (or just build https://github.com/o-sdn-o/vtm/tree/gui-bridge) with the following config in ~/.config/vtm/settings.xml:

<config>
    <gui>
        <antialiasing = off />
        <cellheight = 20 />
        <gridsize = 0,0 />
        <wincoor = 0,0 />
        <winstate = normal />
        <blinkrate = 400ms />
        <fontlist> <!-- Font fallback list (LF-delimited (\n), ordered). The rest of the fonts available in the system will be loaded dynamically. -->
            "Courier New\n" <!-- Primary font. Its metrics define the cell geometry. -->
            "Cascadia Mono\n"
            "Fira Code\n"
            "NSimSun\n"
            "Noto Sans Devanagari\n"
        </fontlist>
    </gui>
    <menu>
        <item id="Test" type=dtvt param="$0 -r test"/>
    </menu>
</config>

Use the --gui cli option to force it to run in GUI mode.

@o-sdn-o commented on GitHub (Jun 29, 2024): > We currently only do vertical anti-aliasing. This looks good on HiDPI displays and large font sizes, but at low DPIs and small font sizes it looks ugly because it's too "pixel-y". IMO The sine wave does not need antialiasing even at a few pixels scale since it is quite symmetrical. Antialiasing only blurs it (this is just as ugly as using vertical AA for a single underline). <details><summary>Here are examples</summary> of aliased wavy underlines (first with aliased glyphs and the second with AA glyph rendering) Aliased glyphs: https://github.com/microsoft/terminal/assets/11535558/538b4673-4fe9-4d3d-a4af-7640893c55ed Antialiased glyphs: https://github.com/microsoft/terminal/assets/11535558/36a23fe7-1519-4eb3-9881-0c700093f7f9 You can play with it using built artifacts https://github.com/directvt/vtm/actions/runs/9722846266 (or just build https://github.com/o-sdn-o/vtm/tree/gui-bridge) with the following config in `~/.config/vtm/settings.xml`: ```xml <config> <gui> <antialiasing = off /> <cellheight = 20 /> <gridsize = 0,0 /> <wincoor = 0,0 /> <winstate = normal /> <blinkrate = 400ms /> <fontlist>  "Courier New\n"  "Cascadia Mono\n" "Fira Code\n" "NSimSun\n" "Noto Sans Devanagari\n" </fontlist> </gui> <menu> <item id="Test" type=dtvt param="$0 -r test"/> </menu> </config> ``` Use the `--gui` cli option to force it to run in GUI mode. </details>

claunia commented

@smprather commented on GitHub (Jul 1, 2024):

Wow. No wonder WinTerm is looking so good. You guys are incredible!

For comparison, here's some examples from whatever MS Office uses to render. You can see that they've just prerendered a simple squiggle and just roll with it. And what I'm seeing in Opera at the bottom.

Seems like you could come up with a good pre-render (or render on fly + cache) for a given integer # vertical pixels, and then apply the right one given the space available. I would like to see 1-pixel of separation, which is what Opera [or WebKit/whatever] is obviously doing, But even abutment looks decent, especially if the undercurl color is different than the font.

Consolas
6pt

8pt

9pt

20pt

10pt, TextZoom=200%

Here's the undercurl I see while typing this in Opera.

@smprather commented on GitHub (Jul 1, 2024): Wow. No wonder WinTerm is looking so good. You guys are incredible! For comparison, here's some examples from whatever MS Office uses to render. You can see that they've just prerendered a simple squiggle and just roll with it. And what I'm seeing in Opera at the bottom. Seems like you could come up with a good pre-render (or render on fly + cache) for a given integer # vertical pixels, and then apply the right one given the space available. I would like to see 1-pixel of separation, which is what Opera [or WebKit/whatever] is obviously doing, But even abutment looks decent, especially if the undercurl color is different than the font. Consolas 6pt ![image](https://github.com/microsoft/terminal/assets/6503931/840c96d6-433c-4930-aae1-8af80fc626d2) 8pt ![image](https://github.com/microsoft/terminal/assets/6503931/d850418f-0ce3-4f72-94eb-1a79e5b7fe21) 9pt ![image](https://github.com/microsoft/terminal/assets/6503931/67f604dd-b108-48ce-a9d5-a69d708597f7) 20pt ![image](https://github.com/microsoft/terminal/assets/6503931/47f408b0-066d-4a8e-a4b2-71e442790dd1) 10pt, TextZoom=200% ![image](https://github.com/microsoft/terminal/assets/6503931/e58a47c8-d566-430d-8c17-59c787032e3d) Here's the undercurl I see while typing this in Opera. ![image](https://github.com/microsoft/terminal/assets/6503931/ced1c700-7cf5-4fea-8a08-0c52b7431d68)

claunia commented

@smprather commented on GitHub (Jul 1, 2024):

BTW, you can see that at 6pt, the Office curl does move into the bottom line of pixels of the font. Bug, IMO.

@smprather commented on GitHub (Jul 1, 2024): BTW, you can see that at 6pt, the Office curl does move into the bottom line of pixels of the font. Bug, IMO.

claunia commented

@smprather commented on GitHub (Jul 1, 2024):

trying__underscore in Opera.
The 1-pixel separation helps prevent heavy collision with underscores.

WinTerm nearly obliterates the underscore.

Bump-up font size.

@smprather commented on GitHub (Jul 1, 2024): trying__underscore in Opera. The 1-pixel separation helps prevent heavy collision with underscores. ![image](https://github.com/microsoft/terminal/assets/6503931/401b2c07-6470-4c06-ae05-28e96b12caba) WinTerm nearly obliterates the underscore. ![image](https://github.com/microsoft/terminal/assets/6503931/abffe024-c34e-450d-b3c2-658f69963cca) Bump-up font size. ![image](https://github.com/microsoft/terminal/assets/6503931/a2a35ab3-90f5-468a-89ce-9fbe2273f775)

claunia commented