search

hhk-png / shiki-renderer-svg-other

svg-code-block-renderer
MIT License
1 stars 0 forks source link

For font measurement you can try skia-canvas #1

Open Zxilly opened 2 months ago

Zxilly commented 2 months ago

skia-canvas is much more lightweight than a full chromium

hhk-png commented 2 months ago

Thanks your advice!

I will conduct more detailed testing between skia-canvas and playwright later. The width of 'a' measured by skia-canvas is 12.050000190734863 when font-family is "Lucida Console, Courier, monospace", font-size is 20px. And the playwright is 12.0625, which is equal to measured in browser.

In my other repository svg-ebook-reader, it need more accurate measurements. And I don't know how it behave after using skia-canvas. But in this, using skia-canvas is indeed a better choice.

Zxilly commented 2 months ago

In reality, such measurements are very inaccurate. Unless it's an equal-width font, almost every character has a slight difference in width, and when multiple letters are joined together, they may also be wider or thinner than their widths directly add up. You can try using opentype.js to calculate this.

hhk-png commented 2 months ago

What I am concerned about is the cumulative error in char width, but now I have find that the width difference between the measurements above is 0.0125px. Only when the accumulated chars reach around 100, there will be a 1px error. In most cases, the situation will not be encountered. And 0.1px difference will be ignored by the browser.

hhk-png commented 2 months ago

The background overlap when selecting text can be solved by changing the background color.

hhk-png commented 1 month ago

2024-9-18 If playwright replaced with skia-canvas. The renderer result will be the bottom: 4withcanvas

when selecting text, white gaps will appear between the texts.