"Jagged" text?

[stikosek]

Hello everyone!
Today, after updating xterm and xterm-addon-fit a really weird problem occurred to which i couldn't find an already existing issue/discussion.
I have no idea whats causing it, since downgrading back didn't fix anything.
This is how it looks like:

This is my code, just like the example given by xterm-addon-fit.

	async function setup_terminal() {
		terminal = new xterm.Terminal({
			fontSize: 12,
			cursorBlink: false,
			disableStdin: true,
		});
		
		fitAddon = new FitAddon.FitAddon()
		terminal.loadAddon(fitAddon);
		terminal.open(terminalElement);
		fitAddon.fit();
		
		window.onresize = function () {
			fitAddon.fit();
		};
	}

This issue persists on a firefox and on a chromium-based browser, so i really don't know what happened (since it worked flawlessly before).
Any help/push to the right direction would be appreciated.

Note: I tried removing the fit addon all together, and that didn't help so the problem must be with xterm itself or my own stupidity

[jerch]

This looks like an issue with font kerning and the letterspace calculation, assuming youre using the DOM renderer. Can you post the CSS rules for the terminal? Which font is used here, is that a monospace font? Which xterm version is that?

[jerch]

You also have to apply the font family in the terminal options. This already may fix the issue. Furthermore - why is the !important needed at #terminal_resizer font family? Also consider using monospacethere as fallback instead of serif.

[stikosek]

It doesn't seem to have any effect on the actual terminal, trying it like this. I tried numerous different fonts just to verify that its not Red Hat Mono's problem, but it just dosen't have any effect.

               terminal = new xterm.Terminal({
			fontFamily: 'Red Hat Mono',
			fontSize: 12,
			cursorBlink: false,
			disableStdin: true
		});

The !important is mainly just a remnant from my fruitless attempts at fixing this.
(Switching serif to monospace also had no effect)

[jerch]

Can you setup a minimal repro project?

[stikosek]

I was in the process of setting it up when i noticed that it worked fine until i introduced my global CSS file. Turns out, the issue was my global selector giving all elements the font family for the rest of my website - but that made the terminal weird. After that i tried selecting everything but the terminal element & its children, which didn't work. Then i simply selected all text elements (h1, h2, p, etc.) and that actually fixed it.

Thank you for your help, if i didn't try reproducing the problem like you told me i would be still head banging 😄.