Creating a single line / single stroke Font using SVG's from Inkscape

[jkmeap]

I am trying to create a "non outline handwritten font" for my xy-pen plotter / CNC-machine. I already created all the glyphs in Inkscape using my scanned handwriting. For example, this is what the paths of my "a" looked like before I saved each glyph: https://imgur.com/a/aS0sY.
After using the typography tool on inkscape and saving it I openend it with FontForge. Every glyph suddenly looked like this "a": https://imgur.com/a/BZ8TL
I guess it is because I am not creating an outline font, which is why it creates a path to connect every end.
How can I fix this? My goal is to have a font which I can use similar to this: https://imgur.com/a/r9fnX

How can I get there? I have example true type fonts like CamBam which totally work. The ends are not all connected and it instantly is a one stroke path in Inkscape.

I have searched this community but could not find anything. It would be awesome if you could help me!

Thank you :)

[brigazvi]

@jkmeap,
I think that stroke path is a feature that should be in the fontforge. For now you can use the 'path> stroke to path' feature in Inkscape.

[JoesCat]

Also can be partially related/assisted by #3302, #3303

[asdf23]

I am trying to create a "non outline handwritten font" for my xy-pen plotter / CNC-machine. I already created all the glyphs in Inkscape using my scanned handwriting. For example, this is what the paths of my "a" looked like before I saved each glyph: https://imgur.com/a/aS0sY.
After using the typography tool on inkscape and saving it I openend it with FontForge. Every glyph suddenly looked like this "a": https://imgur.com/a/BZ8TL
I guess it is because I am not creating an outline font, which is why it creates a path to connect every end.
How can I fix this? My goal is to have a font which I can use similar to this: https://imgur.com/a/r9fnX

How can I get there? I have example true type fonts like CamBam which totally work. The ends are not all connected and it instantly is a one stroke path in Inkscape.

I have searched this community but could not find anything. It would be awesome if you could help me!

Thank you :)

Thanks for this post, it helped me out. Okay so in FontForge you can do this, In the "Font Info..." there is a stroke type, also a width you can set (not sure why). If you have any other hints/tips I'd like to hear them. My specific situation is a little different. I'm going from Handwriting > Scanner > SVG > Cameo 3 (cutter / pen drawing).

[brigazvi]

@asdf23
You can convert the stroke to path. choose the path in Inkscape and click path>stroke to path. Now you can take it to Fontforge.

[skef]

I'm not sure how this issue wound up documented in this way, but FontForge has a (somewhat flawed, but still extant) "Expand Stroke..." feature in the Element menu. The equivalent of Inkscape's "Stroke to path" is to bring up that dialog and select a smallish circular "nib".

[WolfLink]

I don't think this is what jkmeap was looking for (its certainly not what I am looking for with a similar CNC machine use case).

We a single line / open path font, where the glyph is an open path that follows the path you would take to draw the character with a pen.

The "stroke to path" feature draws a closed path that surrounds the stroke. We want to preserve the raw stroke in the output font.

Yes, it won't render well. But it will produce the correct path in the CNC machine.

[asdf23]

Hello,
I've long since forgotten about this post. I have this completely automated at this point. It's a bit complicated but I'll try to explain. I've abandoned fontforge for this purpose except that it was very extremely helpful in understanding how fonts work and tweaking the output.
I can write to CNC machines in real time, create my own single stroke font. I'll try to explain, if your still interested....
What I do now is to write on a tablet while running some custom software I wrote. The software captures the strokes in a database. Later or in realtime I play back the strokes and re-capture them on a website that I wrote. The website provides a gui allowing the user to define what/where the letters are. (Squiggle 1 + squiggle 2 = lower case letter "t", the bottom-left of the "t" is here, the top-right is there, it requires this much spacing around it... ). Once all the letters are captured this is saved and transformed by another program I wrote. The next program converts the file into two different fonts like files. #1 is a standard open font format that indeed uses the trick of having a line doubles back on top of itself. This can be imported by some standard program like MS Word.. just so long as you set set the font properties so that the stroke of the font is displayed and the body of the font is clear; if the tool can't do this then you'll see empty space or hair thin lines. Meanwhile #2 is a file containing vector information. This is read by yet another program I wrote, which allows you to type text then converts that text to an SVG file. This SVG file can be opened in Inkscape or whatever. It has paths grouped into lines (lets call them sentences). The space between the letters is accounted for. I even played with a randomizing attribute to make the badly hand-written text look bad. There's more.... Using yet another program (didn't write this one) you can convert that SVG to gcode. I have a plotter and I can write in my own hand-writing this way. However what I found is that I rarely have the entire file exactly the way I want it.. SVG to GCode and print... it's a major pain. Sometimes I need to move the pen around or change the text, paper, or pen. Having it all done in one shot from begin to end is painfull.. So enter in yet another program I wrote into the mix (sorry I'm a programmer and a nerd, just being honest) What this last program does is to parse that outputted gcode instead of sending the entire blob I send snippets of the file (just sentence #3 or just sentence #4) I send them over a serial connection in real time. This allows you to pause, adjust the paper,, re-write the text, change the color of the pen, skip ahead a few sentences...
I hope that made since.. I can dig up a video of the process if anyone wants it.

[WolfLink]

This is really interesting! Its fascinating to hear about other people with this problem, and its strange to me there seem to be so few "supported" solutions to it.

My current solution (which I arrived at after making that comment) is to create the single-line fonts in FontForge, let FontForge close the loop when it exports, use the font in Inkscape, and use this plug-in to open the closed paths. Then I can export to SVG from Inkscape, and my CNC machine's software can take an SVG as input.

I would be interested in hearing more about your solution (I am a programmer nerd as well, and have been thinking about writing code to make this whole process easier or more automated), but GitHub comments are not the forum for it. If you want to talk more about this, send me an email (my email is on my GitHub profile).

Thanks for your comment! I hope the breadcrumbs we've left here help the next poor fool who wants to make their own fonts for their CNC machine.

[daymxn]

Hello, I've long since forgotten about this post. I have this completely automated at this point. It's a bit complicated but I'll try to explain. I've abandoned fontforge for this purpose except that it was very extremely helpful in understanding how fonts work and tweaking the output. I can write to CNC machines in real time, create my own single stroke font. I'll try to explain, if your still interested.... What I do now is to write on a tablet while running some custom software I wrote. The software captures the strokes in a database. Later or in realtime I play back the strokes and re-capture them on a website that I wrote. The website provides a gui allowing the user to define what/where the letters are. (Squiggle 1 + squiggle 2 = lower case letter "t", the bottom-left of the "t" is here, the top-right is there, it requires this much spacing around it... ). Once all the letters are captured this is saved and transformed by another program I wrote. The next program converts the file into two different fonts like files. #1 is a standard open font format that indeed uses the trick of having a line doubles back on top of itself. This can be imported by some standard program like MS Word.. just so long as you set set the font properties so that the stroke of the font is displayed and the body of the font is clear; if the tool can't do this then you'll see empty space or hair thin lines. Meanwhile #2 is a file containing vector information. This is read by yet another program I wrote, which allows you to type text then converts that text to an SVG file. This SVG file can be opened in Inkscape or whatever. It has paths grouped into lines (lets call them sentences). The space between the letters is accounted for. I even played with a randomizing attribute to make the badly hand-written text look bad. There's more.... Using yet another program (didn't write this one) you can convert that SVG to gcode. I have a plotter and I can write in my own hand-writing this way. However what I found is that I rarely have the entire file exactly the way I want it.. SVG to GCode and print... it's a major pain. Sometimes I need to move the pen around or change the text, paper, or pen. Having it all done in one shot from begin to end is painfull.. So enter in yet another program I wrote into the mix (sorry I'm a programmer and a nerd, just being honest) What this last program does is to parse that outputted gcode instead of sending the entire blob I send snippets of the file (just sentence #3 or just sentence #4) I send them over a serial connection in real time. This allows you to pause, adjust the paper,, re-write the text, change the color of the pen, skip ahead a few sentences... I hope that made since.. I can dig up a video of the process if anyone wants it.

Haha I'm doing something damn near the same. This is my current process:

1. Write the alphabet on a sheet of paper, alongside other symbols like numbers and such
2. Scan the paper and use a bitmask to extract the SVGs
3. Scale the SVGs by 300%, and use the feature in inkscape to extract the midpath of each letter, then scale the SVG back
4. Run the whole SVG through a custom program that analyzes the conglomerate distance between paths and combines those within N% to create a single path for each letter
5. Run each SVG (letter) through a separate application to manually identify each letter. Basically the same thing as your web app, but I did it as a desktop app.
6. Import the SVGs in my main application that facilitates the creation of the target output, randomizing distances between letters, slopes along pages, distortion for letters, etc.,
7. Translate the data objects to a gcode file with a custom translator

I just found this post, as I'm looking to translate those SVGs to a font now- but I wasn't sure if the font would preserve the single line nature of my SVGs.

It's cool to see other engineers doing something similar :')

[asdf23]

You can go directly from android to points over adb. But probably an app would be better. I use a mobiscrbe which is an e-ink display works pretty well for this purpose. The scale is a constant pain. Where my pain point is.. I get a series of point that I want to turn into beizer curves. I can do this using simplify in inkscape. But there (was) a project called paper.js that looked suited to this. SVG to font isn't too difficult either. I'm wondering if we should formalize a project. My plotter is the so-vol1 3d I think that's the right name. The servo that moves the pen up and down is not reliable which sort of threw this project on the back burner for me.

…

On Thu, Aug 24, 2023 at 6:04 PM Daymon ***@***.***> wrote: Hello, I've long since forgotten about this post. I have this completely automated at this point. It's a bit complicated but I'll try to explain. I've abandoned fontforge for this purpose except that it was very extremely helpful in understanding how fonts work and tweaking the output. I can write to CNC machines in real time, create my own single stroke font. I'll try to explain, if your still interested.... What I do now is to write on a tablet while running some custom software I wrote. The software captures the strokes in a database. Later or in realtime I play back the strokes and re-capture them on a website that I wrote. The website provides a gui allowing the user to define what/where the letters are. (Squiggle 1 + squiggle 2 = lower case letter "t", the bottom-left of the "t" is here, the top-right is there, it requires this much spacing around it... ). Once all the letters are captured this is saved and transformed by another program I wrote. The next program converts the file into two different fonts like files. #1 <#1> is a standard open font format that indeed uses the trick of having a line doubles back on top of itself. This can be imported by some standard program like MS Word.. just so long as you set set the font properties so that the stroke of the font is displayed and the body of the font is clear; if the tool can't do this then you'll see empty space or hair thin lines. Meanwhile #2 <#2> is a file containing vector information. This is read by yet another program I wrote, which allows you to type text then converts that text to an SVG file. This SVG file can be opened in Inkscape or whatever. It has paths grouped into lines (lets call them sentences). The space between the letters is accounted for. I even played with a randomizing attribute to make the badly hand-written text look bad. There's more.... Using yet another program (didn't write this one) you can convert that SVG to gcode. I have a plotter and I can write in my own hand-writing this way. However what I found is that I rarely have the entire file exactly the way I want it.. SVG to GCode and print... it's a major pain. Sometimes I need to move the pen around or change the text, paper, or pen. Having it all done in one shot from begin to end is painfull.. So enter in yet another program I wrote into the mix (sorry I'm a programmer and a nerd, just being honest) What this last program does is to parse that outputted gcode instead of sending the entire blob I send snippets of the file (just sentence #3 <#3> or just sentence #4 <#4>) I send them over a serial connection in real time. This allows you to pause, adjust the paper,, re-write the text, change the color of the pen, skip ahead a few sentences... I hope that made since.. I can dig up a video of the process if anyone wants it. Haha I'm doing something damn near the same. This is my current process: 1. Write the alphabet on a sheet of paper, alongside other symbols like numbers and such 2. Scan the paper and use a bitmask to extract the SVGs 3. Scale the SVGs by 300%, and use the feature in inkscape to extract the midpath of each letter, then scale the SVG back 4. Run the whole SVG through a custom program that analyzes the conglomerate distance between paths and combines those within N% to create a single path for each letter 5. Run each SVG (letter) through a separate application to manually identify each letter. Basically the same thing as your web app, but I did it as a desktop app. 6. Import the SVGs in my main application that facilitates the creation of the target output, randomizing distances between letters, slopes along pages, distortion for letters, etc., 7. Translate the data objects to a gcode file with a custom translator I just found this post, as I'm looking to translate those SVGs to a font now- but I wasn't sure if the font would preserve the single line nature of my SVGs. It's cool to see other engineers doing something similar :') — Reply to this email directly, view it on GitHub <#3260 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AA7ZAZ7B7XZPJJNABTMVMPTXW7FW3ANCNFSM4ETGLX7A> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[MJT0]

Hello, I've long since forgotten about this post. I have this completely automated at this point. It's a bit complicated but I'll try to explain. I've abandoned fontforge for this purpose except that it was very extremely helpful in understanding how fonts work and tweaking the output. I can write to CNC machines in real time, create my own single stroke font. I'll try to explain, if your still interested.... What I do now is to write on a tablet while running some custom software I wrote. The software captures the strokes in a database. Later or in realtime I play back the strokes and re-capture them on a website that I wrote. The website provides a gui allowing the user to define what/where the letters are. (Squiggle 1 + squiggle 2 = lower case letter "t", the bottom-left of the "t" is here, the top-right is there, it requires this much spacing around it... ). Once all the letters are captured this is saved and transformed by another program I wrote. The next program converts the file into two different fonts like files. #1 is a standard open font format that indeed uses the trick of having a line doubles back on top of itself. This can be imported by some standard program like MS Word.. just so long as you set set the font properties so that the stroke of the font is displayed and the body of the font is clear; if the tool can't do this then you'll see empty space or hair thin lines. Meanwhile #2 is a file containing vector information. This is read by yet another program I wrote, which allows you to type text then converts that text to an SVG file. This SVG file can be opened in Inkscape or whatever. It has paths grouped into lines (lets call them sentences). The space between the letters is accounted for. I even played with a randomizing attribute to make the badly hand-written text look bad. There's more.... Using yet another program (didn't write this one) you can convert that SVG to gcode. I have a plotter and I can write in my own hand-writing this way. However what I found is that I rarely have the entire file exactly the way I want it.. SVG to GCode and print... it's a major pain. Sometimes I need to move the pen around or change the text, paper, or pen. Having it all done in one shot from begin to end is painfull.. So enter in yet another program I wrote into the mix (sorry I'm a programmer and a nerd, just being honest) What this last program does is to parse that outputted gcode instead of sending the entire blob I send snippets of the file (just sentence #3 or just sentence #4) I send them over a serial connection in real time. This allows you to pause, adjust the paper,, re-write the text, change the color of the pen, skip ahead a few sentences... I hope that made since.. I can dig up a video of the process if anyone wants it.

hey, id actually be interested in seeing this. is there anyway i can contact you?

[asdf23]

I'm in the process of rewriting this to a single application instead of the multi-step hack I currently have. I'll upload it here: https://github.com/asdf23/qtWrite
I'm experimenting with qml, I'm unfamiliar with it.. It has a gui that works out well but the JavaScript is some reduced set, which is a set back. It would be good to get input on it. As of now the repo is empty and the app doesn't work. I'll try to get it to some kind of usable state then upload it. Perhaps in a week I'll have something worth uploading.

[asdf23]

@MJT0 Greetings, you can email me at qtwrite.20.zdux0012@xoxy.net or through the issues of that project