jvolker/single-line-font-renderer

A browser-based tool to render single-line fonts and export text as SVG files to be used with CNC machines like pen plotters.

Single-Line Font Renderer

Text renderer for CNC machines

This web based tool renders and exports text (currently from SVG format) intended for CNC machines like pen plotters or laser engravers.

These machines require a different single-line font type than the more commonly used outline fonts (eg. TTF/OTF) which are mainly intended for screens and printing. More on this topic in this article.

This tool is an attempt to create a browser based alternative to the excellent Hershey Text Extension for Inkscape by Evil Mad Scientist. It has a simplified interface and doesn't require installation. On the downside, this tools feature set is currently more limited.

>> CHECK IT OUT HERE <<

Features:

• latest fonts from the SVG fonts repository are loaded by default
• loads local SVG font files optionally
• adjust font scale and stroke width
• smoothing/simplification (this is experimental: the results from Inkscape are better in some cases)
• export as SVG file

Ideas for furture features:

• line breaks
• Use meaningful units: eg. font size and stroke width in mm
• support for otf/ttf files (eg. using https://github.com/opentypejs/opentype.js): some single-line fonts are set in these types and hard to use in other software
• DXF export (eg. using microsoft/maker.js#480 or https://github.com/jscad/io/tree/master/packages/svg-deserializer and https://github.com/jscad/io/tree/master/packages/dxf-serializer)
• move svg font renderer into separate repo with Node.js support and NPM release
• text area: words wrap to new line when longer than a certain length
• alignment: right and center

Export and usage

There are many different tools and ways to use this with CNC machines depending on the machine and use-case. Single-line font renderer was built with the following workflow in mind:

1. This tool exports SVGs to be used and rearranged in a vector/graphic design software like Affinity Designer, Adobe Illustrator or others.
2. The results can then, for example, be used on an Axidraw pen plotter using saxi, a web based control software for Axidraw plotters.

Fonts

This tool makes use of SVG fonts. This format has advantages over the original Hershey font format as explained in this article. The fonts are sourced from a repositiory with SVG fonts maintained by Evil Mad Scientist. It contains updated Hershey and other fonts converted and shared by a variety of people. Lots of them include more glyphs and therefore better language support than the original fonts.

This tool uses the latest fonts straight from that repository. Please contribute to that repository to improve the variety of fonts and their language support.

Font licenses: Before using any of the fonts, please make sure to check their license contained in that repository.

Acknowledgement

The rendering core is heavily borrowed from: https://github.com/techninja/hersheytextjs
Thanks to Evil Mad Scientist for their pioneering work in this field.

Alternatives to this tool

• Hershey Text Extension for Inkscape by Evil Mad Scientist
• CNC Text Tool
• True single-stroke-font text creator

Development

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.

single-line-font-renderer's Issues

Plans for programattic control?

Hey, this looks really neat!

I enjoy using JS to create generative SVG art work, and it would be great if I could use something like this to programatically insert text.

The Vue GUI looks nice but I'm curious if you have any plans to add a JS API? It would be awesome if I could import this from npm and then use it in my apps.

If not, any tips for where to look in the source code if I wanted to fork this?

Thanks!

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

• Replace dependency babel-eslint with @babel/eslint-parser 7.11.0
• Update vue-cli monorepo to v4.5.19 (@vue/cli-plugin-babel, @vue/cli-plugin-eslint, @vue/cli-service)
• Update dependency eslint to v7.32.0
• Update dependency eslint to v9
• Update dependency eslint-plugin-vue to v9
• Update dependency sass-loader to v14
• Update dependency vue to v3
• Update vue-cli monorepo to v5 (major) (@vue/cli-plugin-babel, @vue/cli-plugin-eslint, @vue/cli-service)
• 🔐 Create all rate-limited PRs at once 🔐

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• Update dependency axios to v0.28.0 [SECURITY]
• Update dependency vuetify to v2.6.10 [SECURITY]
• Update dependency cheerio to v1.0.0-rc.12
• Update dependency paper to v0.12.17
• Update dependency axios-cache-adapter to v2.7.3
• Update dependency core-js to v3.37.0
• Update dependency eslint-plugin-vue to v7.20.0
• Update dependency sass to v1.77.1
• Update dependency sass-loader to v10.5.2
• Update dependency vue-cli-plugin-vuetify to v2.5.8
• Update dependency vuetify-loader to v1.9.2
• Update vue monorepo to v2.7.16 (vue, vue-template-compiler)
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

npm

package.json

• axios 0.21.1
• axios-cache-adapter 2.5.0
• cheerio 1.0.0-rc.5
• core-js 3.8.3
• paper 0.12.11
• vue 2.6.12
• vuetify 2.4.3
• @vue/cli-plugin-babel 4.5.11
• @vue/cli-plugin-eslint 4.5.11
• @vue/cli-service 4.5.11
• babel-eslint 10.1.0
• eslint 7.18.0
• eslint-plugin-vue 7.5.0
• sass 1.32.5
• sass-loader 10.1.1
• vue-cli-plugin-vuetify 2.0.9
• vue-template-compiler 2.6.12
• vuetify-loader 1.6.0

travis

.travis.yml

---

• Check this box to trigger a request for Renovate to run again on this repository