search

xtermjs / xterm.js

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

Overlapping glyphs m+@ #5100

Open Tyriar opened 3 months ago

Tyriar commented 3 months ago

Not ideal rendering here with the @ overlapping the m:

image

font size = 12 font family = Hack

jerch commented 3 months ago

@Tyriar When I rewrote the DOM renderer I figured, that the canvas/webgl renderer always applied a smaller width to the glyphs than what the DOM measuring gave me. Maybe there is missing some "sanity pace" between glyphs? Might also be a good idea to get the width perfectly aligned between webgl and DOM renderer.

Tyriar commented 3 months ago

I'm planning on perfectly aligning the monaco renderer when I start on that, to do it we need to render each glyph at varying starting x positions (eg. 0, 0.25, 0.5, 0.75). So I'll probably eventually pull some of that into xterm.js.

That wouldn't actually help this problem though as overlapping like this will still happen, for this we need to be able to more gracefully merge the glyphs. In this case we want the m's pixel to take precedence as it's closer to the foreground color.