xterm.js icon indicating copy to clipboard operation
xterm.js copied to clipboard

DOM Renderer: Render background separately

Open mofux opened this issue 1 year ago • 3 comments

This PR attempts to resolve clipping issues with the DOM renderer when a cell has a background color set and the rendered character is wider than its cell.

It does so by creating separate spans for backgrounds. These background spans are positioned absolute and are added to the row div before any of the text spans (so the text spans will always be drawn above).

Text spans can now be merged even if the background color differs, so in many scenarios we won't even produce more spans than before.

As a little bonus, the text spans are now display: inline which should provide a little performance boost and might be beneficial when dealing with ligatures.

TODO

  • [ ] Do not create background span if there is no background
  • [x] Remove selection layer and draw it as part of the background
  • [ ] Make sure to handle cursor and decorations properly
  • [ ] Adjust tests
  • [ ] Analyze how performance differs to old DOM renderer

mofux avatar Sep 20 '23 12:09 mofux

beneficial when dealing with ligatures.

And BIDI. :smile_cat:

jerch avatar Sep 20 '23 13:09 jerch

This PR attempts to resolve some rendering issues with the DOM renderer when a cell has a background color set.

Can you elaborate on the issues this will fix?

Tyriar avatar Sep 21 '23 12:09 Tyriar

Perhaps this will fix the issues with rendering double-width chars (#4813)? Linking for reference

bmeares avatar Nov 04 '23 04:11 bmeares