Terminal webgl renderer oh-my-posh prompt issues

[eamodio]

Below are 3 screenshots from vscode and windows terminal. You can see with the webgl renderer there are strange vertical lines that break the flow. And in both the webgl and canvas, the text isn't vertically aligned properly either. Whereas, Windows Terminal looks the best (only very minor vertical line artifacts).

VS Code webgl renderer

VS Code canvas renderer

Windows Terminal

[Tyriar]

What I suspect is happening here is that the more clever glyph boundary detection in the webgl renderer where we render the character with a margin and then find its bounding box is biting us because the darker lines are not exactly the same color as the actual background. I wonder if we should hardcode for these particular powerlines characters to explicitly drop that line.

[Mellbourn]

I also experience problems with vertical lines that break the flow. This is on macOS Big Sur using a powerlevel10k prompt and Delugia Nerd Font Book (a variant of Cascadia Code with Nerd Fonts added)

VS Code GPU renderer

VS Code canvas renderer

iTerm2 terminal (which is also GPU based)

I don't know if it is relevant but the issues adam7/delugia-code#53 and adam7/delugia-code#55 go into a lot of detail concerning vertical alignment.

[Tyriar]

In xterm.js demo

Dom:

Canvas:

Webgl:

[Tyriar]

Upstream issue: xtermjs/xterm.js#3278

[Tyriar]

Fix looking good, should be in tomorrow's insiders xtermjs/xterm.js#3279, it also includes a vertical alignment improvement too

[Mellbourn]

It now looks perfect with GPU in Insiders!

This is better than it ever was, even better than how canvas looked previously.

[Tyriar]

@Mellbourn good to hear 😃 the alignment is even fixed on canvas too so it should be just as good there as well if the user falls back to it (you can no longer set to use it explicitly).

[Mellbourn]

In Insiders, renderType is removed, so, as you say, you can't force it explicitly. If I set terminal.integrated.gpuAcceleration to off, I get this:

Here there is still a vertical line. Also, the double-width Nerd Fonts glyphs look cut off to single character width.

[Tyriar]

The DOM renderer works a little differently, to get cells to align perfectly they are laid our using inline-block and regular rely on the regular flow of the page as opposed to absolute positioning for performance reasons. I wonder if we could take the nerd font glyph ranges and the powerlines glyph ranges, and handle them specially. Positioning absolute won't work but I wonder if we could do some something using :before { content: '' } so that it could be positioned absolutely on top of the cell 🤔

Surprisingly I didn't see the line on my tests, maybe it's only on certain font sizes or something.

[Tyriar]

Created xtermjs/xterm.js#3287, I probably won't have time to check it out this release though.

[karesztrk]

Finally, its solved in Stable version as well ❤️ Thanks team

[floh96]

@Tyriar I'm on vscode insider commit 6bee0f2 and it looks broken again

it worked on an older version (unfortunately I don't know the commit but it was a version witch was published shortly after this issue was fixed.

[Tyriar]

@floh96 do you have a particular large window.zoomLevel/*.fontFamily and what's terminal.integrated.gpuAcceleration set to?

[floh96]

@Tyriar window.zoomLevel is 0, font family is 'CaskaydiaCove NF', Consolas, 'Courier New', monospace, font size is 16.
I only zoomed for the screenshot it looks the same with window.zoomLevel 0.
terminal.integrated.gpuAcceleration is set to auto.

[Tyriar]

@floh96 does the problem seem isolated to that font maybe?

[floh96]

@Tyriar i chanced the font to FiraMono NF same problem

[floh96]

@Tyriar friendly ping 😄

[Tyriar]

@floh96 not sure what else we could do here unfortunately, without doing something drastic like not actually rendering the glyph but doing it ourselves like in xtermjs/xterm.js#2409

[floh96]

@Tyriar okay sad to hear.
it worked initially for me after the issue was closed so something musst have changed on vscode side.
is there a workaround (using a different renderer for example)?

[Tyriar]

@floh96 you could try switching up the gpuAcceleration setting as that drives which renderer is used, it's was fixed at least on my machine in all the renderers

[floh96]

@Tyriar thanks for your suggestion unfortunately changing the setting did not fix the issue.
I'm going to subscribe to xtermjs/xterm.js#2409