Integrated terminal renders vertical gap between box characters

[l-c-g]

• VSCode Version: 1.50.1 (user setup)
• OS Version: Windows 10 20H2, x64

Steps to Reproduce:

1. Set up VS Code (both editor and integrated terminal) to use the same font as Windows Terminal (in my case 'RobotoMono NF')
2. Make sure that terminal.integrated.lineHeight is set to 1 (so it does not add extra spacing)
3. Open the integrated terminal
4. Look at something that draws box characters, such as Far Manager or a multiline cursor like the one below:

┌ user@host  🕙 20:19:20
└ ~ ❯

5. Notice the additional vertical space between lines in VS Code terminal:
   
6. Compare to the same characters rendering in Windows Terminal (version 1.3.2651.0 in my case):
   

Does this issue occur when all extensions are disabled?: Yes

Additional information:

My Windows is set to 150% display scaling, the issue also occurs at 100% scaling. Interestingly, my Windows Terminal is configured to a font size 10, whereas VS Code needs 14 to achieve a similar font size.

[rzhao271]

Cannot reproduce with the font Cascadia Mono. Does the same issue show up for you with that font?

[Tyriar]

Using the webgl renderer might help with this: "terminal.integrated.rendererType": "experimentalWebgl"

But I think what you're really after is to not draw the box characters from the font at all and draw the box characters pixel perfect which is captured in xtermjs/xterm.js#2409

[l-c-g]

Cannot reproduce with the font Cascadia Mono. Does the same issue show up for you with that font?

Interesting, I tried different fonts to rule out a problem with a particular font's metrics. Roboto Mono, DejaVu Mono, and Consolas all showed the same issue. However, Cascadia Mono does indeed render without the vertical gaps.

Using the webgl renderer might help with this: "terminal.integrated.rendererType": "experimentalWebgl"

It did not.

But I think what you're really after is to not draw the box characters from the font at all and draw the box characters pixel perfect which is captured in xtermjs/xterm.js#2409

It looks promising. But looking through the comments there, I remembered someting else that might be related. There seems to be some kind of weird clipping in VS Code's integrated terminal (in addition to a difference in font weight, even though I did not specify the weight in either program):

This also does not happen in Windows Terminal (set to a light color scheme to highlight the stroke on the clock symbol):

[Tyriar]

@l-c-g Windows Terminal may indeed do pixel perfect rendering. The clipping should be restricted to the canvas renderer (unless you're using an abnormally large glyph).

[l-c-g]

Windows Terminal may indeed do pixel perfect rendering.

Oh, I always thought that Windows Terminal and terminal in VS Code used the same renderer. That's why I kept comparing the two. I don't know why I started thinking that, though, and I never checked it.

The clipping should be restricted to the canvas renderer (unless you're using an abnormally large glyph).

Yes, I switched to the DOM renderer and the clock is no longer clipped at the top.

[Tyriar]

Oh, I always thought that Windows Terminal and terminal in VS Code used the same renderer

@l-c-g nope, WT is written in C++ from scratch and VS Code uses xterm.js. The only component they share is "conpty" that handles launching the shell.

Since we're doing issue grooming at the moment I'm going to close this in favor of xtermjs/xterm.js#2409. The clock being cut off should be restricted to the canvas renderer which we want to remove #106202