Take column into account when rendering cells for perfect patterned underline rendering

[Tyriar]

Forking off from #4060

Thinking about this and the fact that I want xterm.js rendering to be as great as possible, I think we should support multiple glyphs depending on the x-axis when necessary. For the dotted line specifically, say we had a dot of size window.devicePixelRatio with the same sized gap in-between, so there would be at most 2 possible variants for every glyph:

Even:
|* * * * |

Odd:
|* * * * *|
| * * * * |

To store this as a unique glyph we need to make the glyph key different, this could be done by asking what underline variant it is and then store it as a number, maybe capped at 4 (2 bits) or 8 variants (3 bits)?

This would allow us make a non-repeated curvy line and not restrict us to a single cell for both the up and down parts of the wave, if that ends up looking better of course.

Current:

Desired:

[tisilent]

Maybe this effect will be better?

[tisilent]

hi @Tyriar ,

Is this the effect 😆

[tisilent]

Enlarge the image to view.
I haven't processed Zoom yet.

[Tyriar]

@tisilent yes the circles part is one of the problems this is calling out. Basically we want a perfectly repeating pattern for dotted and dashed. My thinking was to offset the underline based on the column, then make sure that the same underlines are shared between glyphs in the texture atlas.

One of the harder parts of this is to make sure it works across all font sizes and zoom levels.