Kerning issues

[jvolker]

First of all, thanks a lot for creating this great library and tool.

The example currently has some kerning issues.

For example the result of "efghijlmnop" looks like the following.

There is:

• too much space between: f and g, i and j, and a few others
• not enough space between: m and n

In comparison the results from Inkscape Hershey Text extension:

and p5-hershey-js rendering on canvas:

Both of the other tools don't have this issue.

What is causing this? Can it be fixed?

Thanks a lot in advance.

[jvolker]

I've tried the Node.js test example using 'hershey_sans_1' as a font (the one from above). It doesn't have that kerning issue. Although, it seems to be loading an svg font instead of a hershey (JSON) font.

[jvolker]

I've investigated a bit more and found that p5-hershey-js has implemented left and right boundaries using a font source file which seems a bit closer to the original Hershey file format.

The o property of the Hershey JSON file of this project contains only what seems to be the right boundary of the original file.

I might be missing something here, but could the JSON file and browser renderer be lacking the left boundary of each glyph? Is the original conversion script available somewhere? Otherwise, it should be possible to use the data and parser from p5-hershey-js.

On the other hand, this article by Evil Mad Scientist explains the advantages of SVG fonts over the original Hershey format. EMS also maintain this repository with SVG fonts with growing language support and font styles. Therefore, I would suggest adding browser support for SVG fonts for this library and drop JSON file support.

[jvolker]

As mentioned in #6 and #2 this is a browser-based SVG font renderer developed by me: https://github.com/jvolker/svg-font-renderer

It's based on this package and doesn't have the above mentioned kerning issues.