search

xtermjs / xterm.js

A terminal for the web
https://xtermjs.org/
MIT License
17.51k stars 1.62k forks source link

font issues in DOM renderer #5164

Open jerch opened 1 week ago

jerch commented 1 week ago

Moved from #4881

image

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

image

Originally posted by @socketpair in https://github.com/xtermjs/xterm.js/issues/4881#issuecomment-2357512396

jerch commented 1 week ago

@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 https://github.com/xtermjs/xterm.js/issues/4881#issuecomment-2357835623

jerch commented 1 week ago

@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 https://github.com/xtermjs/xterm.js/issues/4881#issuecomment-2357994990

jerch commented 1 week ago

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 https://github.com/xtermjs/xterm.js/issues/5156 for some context).

Originally posted by @jerch in https://github.com/xtermjs/xterm.js/issues/4881#issuecomment-2358998409

jerch commented 1 week ago

@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: image

Originally posted by @ithrforu in https://github.com/xtermjs/xterm.js/issues/4881#issuecomment-2361818228

jerch commented 1 week ago

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

Edit: Looks correct to me here with Roboto Mono image

Originally posted by @jerch in https://github.com/xtermjs/xterm.js/issues/4881#issuecomment-2361851763

socketpair commented 1 week ago

@ithrforu please take a look on this issue

ithrforu commented 1 week ago

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

jerch commented 1 week ago

@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 commented 6 days ago

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

jerch commented 6 days ago

@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 commented 3 days ago

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

:+1: 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.

jerch commented 2 days ago

@ithrforu I tried running your example with the vite tasks - it is as I expected, you run into a race condition between font loading and terminal bootstrapping. The vite css magic does not place a waiting condition on the css loads, thus the terminal initialization runs too early. Idk if that is fixable within vite config itself, all I can say - nope it never gonna work that way, as the assumptions, vite does with the css loading shims, does not meet the needs for xtermjs here.