Skip to content

pixel perfect canvas rendering of box and block characters#3416

Merged
Tyriar merged 41 commits intoxtermjs:masterfrom
meganrogge:merogge/pixelPerfect
Aug 19, 2021
Merged

pixel perfect canvas rendering of box and block characters#3416
Tyriar merged 41 commits intoxtermjs:masterfrom
meganrogge:merogge/pixelPerfect

Conversation

@meganrogge
Copy link
Copy Markdown
Member

@meganrogge meganrogge commented Aug 16, 2021

Fixes #2409

Comment thread demo/client.ts Outdated
@meganrogge meganrogge requested a review from Tyriar August 16, 2021 16:55
@Tyriar
Copy link
Copy Markdown
Member

Tyriar commented Aug 18, 2021

Progress (canvas):

image

Old webgl rendering:

image

@Tyriar
Copy link
Copy Markdown
Member

Tyriar commented Aug 18, 2021

w3 alignment tests in canvas:

image

Looks like these are aligned wrong above: ▁▂▃▄▅▆▇█

old in webgl:

image

@Tyriar
Copy link
Copy Markdown
Member

Tyriar commented Aug 18, 2021

Webgl line height, letter spacing works. Plus the shade characters work 🎉

image

@Tyriar
Copy link
Copy Markdown
Member

Tyriar commented Aug 19, 2021

Had a think about testing and can't really think of a nice way to do it across all browsers unless we managed to get it drawing exactly across all browsers. But FF and Chrome seem to differ in how they draw corners of paths so not sure. Going to go ahead on this without tests for now, there is a button at the bottom of the demo that writes the alignment tests to the terminal though.

@Tyriar Tyriar added this to the 4.14.0 milestone Aug 19, 2021
@Tyriar
Copy link
Copy Markdown
Member

Tyriar commented Aug 19, 2021

Moving ahead with this, here's canvas (1.1 line height, 1 letter spacing):

image

Webgl:

image

@Tyriar Tyriar enabled auto-merge August 19, 2021 12:44
@Tyriar Tyriar disabled auto-merge August 19, 2021 12:48
@Tyriar Tyriar merged commit 5697086 into xtermjs:master Aug 19, 2021
@Tyriar Tyriar deleted the merogge/pixelPerfect branch August 19, 2021 13:01
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Manually draw pixel-perfect glyphs for Box Drawing and Block Elements characters

2 participants