search

microsoft / terminal

The new Windows Terminal and the original Windows console host, all in the same place!
MIT License
95.1k stars 8.25k forks source link

Configuration for undercurl vertical offset #17482

Closed smprather closed 3 months ago

smprather commented 3 months ago

image

Undercurl is colliding with the bottom of the font. Requesting a configuration to apply a y-offset from the default vertical placement.

Here are some other-term links that may prevent having to think it through from scratch. https://github.com/kovidgoyal/kitty/issues/853 https://github.com/microsoft/cascadia-code/issues/395 https://wezfurlong.org/wezterm/config/lua/config/underline_position.html

smprather commented 3 months ago

WezTerm w/ default settings.

image

smprather commented 3 months ago

Mate-Terminal image

lhecker commented 3 months ago

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?

smprather commented 3 months ago

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

{
    "$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 3 months ago

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

smprather commented 3 months ago

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

smprather commented 3 months ago

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 3 months ago

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...

lhecker commented 3 months ago

I think there are two problems:

In other words:

lhecker commented 3 months ago

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);
o-sdn-o commented 3 months ago

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: 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 "Courier New\n" "Cascadia Mono\n" "Fira Code\n" "NSimSun\n" "Noto Sans Devanagari\n" ``` Use the `--gui` cli option to force it to run in GUI mode.
smprather commented 3 months ago

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

8pt image

9pt image

20pt image

10pt, TextZoom=200% image

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

smprather commented 3 months ago

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 3 months ago

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

WinTerm nearly obliterates the underscore. image

Bump-up font size. image

smprather commented 3 months ago

Top is WezTerm, bottom is WinTerm. I don't have WezTerm underlineposition changed from default. I assume I could use it to move the curl down though WezTerm appears to render the text on top of the curl. This makes it easy to discern chars, esp when coloring is working (I can get it to work in test prints, but not nvim; topic for different issue). WinTerm is rendering curl on top to text. I believe curl should go under text. image

lhecker commented 3 months ago

Hack 10pt, 100% scale: image

Hack 10pt, 150% scale: image