font issues in DOM renderer

[jerch]

Moved from #4881

Also this kind of things. Just why? I use Roboto Mono, which is a mono-width font. Just why we need any corrections ?

Originally posted by @socketpair in #4881 (comment)

[jerch]

@socketpair:

Which browser and which xtermjs version is that? There were some corrections applied to the width measuring in the newer xtermjs versions.

Can you retry with these global patches applied:

// width measure container
document.querySelector('.xterm-width-cache-measure-container').style.fontVariantLigatures='none';
// terminal output
document.querySelector('.xterm-rows').style.fontVariantLigatures='none';

Just why we need any corrections ?

Because, other than in the canvas/webgl renderer, we have no control in the DOM renderer how the browser's font renderer gonna output a certain glyph on the screen. It may pick the glyph from a different font or apply different widths for bold/italics. Furthermore some monospace fonts are not perfectly monospaced for all their glyphs. Btw - in your mc output it looks like the bold glyphs cause the misalignment.

Originally posted by @jerch in #4881 (comment)

[jerch]

@jerch are there any tunable to turn off these corrections ? If a font is not perfect we will not use it!

It would also be nice to get your recommendations on which font is the most trouble-free. And possibly well-known bad monospace fonts (like Roboto Mono).

My colleague will write answer to your questions above in few minutes.

Originally posted by @socketpair in #4881 (comment)

[jerch]

are there any tunable to turn off these corrections ? If a font is not perfect we will not use it!

Nope, thats not configurable from outside, as half of the renderer logic relies on the measurement results.

I just tried to repro it under ubuntu 22 with chrome and firefox and Roboto Mono. Its all fine here with the repo demo, even if I switch to russian locale in mc. So my guess - its either a version issue (which xtermjs version you are using?) or some CSS font settings on the terminal container in your integration not being compatible.

It would also be nice to get your recommendations on which font is the most trouble-free. And possibly well-known bad monospace fonts (like Roboto Mono).

Roboto Mono behaves correctly for me. Also I dont have any list of bad or good fonts. The letter-spacing trick should level out single glyph metrics issues (thats why even Arial will work there), but it cannot address higher level font features like certain ligatures out of the box. So in general try to avoid monospace fonts using ligature trickery, that are not grid stable (see #5156 for some context).

Originally posted by @jerch in #4881 (comment)

[jerch]

@jerch, hello! We use @xterm/xterm 5.5.0, @xterm/addon-attach 0.11.0 and @xterm/addon-fit 0.10.0.
I reproduced the bug with Roboto Mono on Google Chrome 126.0.6478.182 and Firefox 128.0 on Linux Mint, @socketpair use Fedora.

One more example with Юж letters:

Originally posted by @ithrforu in #4881 (comment)

[jerch]

@ithrforu Can you repro it with the demo of the repo?

Edit: Looks correct to me here with Roboto Mono

Originally posted by @jerch in #4881 (comment)

[socketpair]

@ithrforu please take a look on this issue

[ithrforu]

@jerch can you help with the sandbox for reproduction?
Roboto Mono won't load in the codesandbox :(

[jerch]

@jerch can you help with the sandbox for reproduction? Roboto Mono won't load in the codesandbox :(

Nope, I have never done anything with codesandbox, no clue about it.

[ithrforu]

@jerch, hello. I reproduced the bug with Юж letters here: https://github.com/ithrforu/xterm-sandbox.

[jerch]

@ithrforu Thats not valid javascript. Whats import 'some.css'; supposed to mean? Is this some sort of vite magic? Also you put webfonts there. This most likely creates a race condition between the terminal initialization and the fonts being loaded. For the char measuring to work it is important, that the font is fully available at the time terminal.open is called.

[Tyriar]

This most likely creates a race condition between the terminal initialization and the fonts being loaded.

👍 good catch, there definitely are sync problems when using webfonts. This is why https://www.npmjs.com/package/xterm-webfont was created by a community member.