├── .gitignore
├── .travis.yml
├── LICENSE
├── README.md
├── babel.config.js
├── package-lock.json
├── package.json
├── public
    ├── favicon.ico
    └── index.html
├── renovate.json
├── src
    ├── App.vue
    ├── lib
    │   └── svgFontRenderer.js
    ├── main.js
    └── plugins
    │   └── vuetify.js
└── vue.config.js


/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | 
 6 | # local env files
 7 | .env.local
 8 | .env.*.local
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | pnpm-debug.log*
15 | 
16 | # Editor directories and files
17 | .idea
18 | .vscode
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?
24 | 


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
 1 | language: node_js
 2 | node_js:
 3 |  - "node"
 4 | 
 5 | cache: npm
 6 | 
 7 | script: npm run build
 8 | 
 9 | deploy:
10 |  provider: pages
11 |  skip_cleanup: true
12 |  github_token: $GITHUB_TOKEN
13 |  local_dir: dist
14 |  on:
15 |    branch: master


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2021 Jeremias Volker
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Single-Line Font Renderer
 2 | 
 3 | ## Text renderer for CNC machines
 4 | 
 5 | This web based tool renders and exports text (currently from SVG format) intended for CNC machines like pen plotters or laser engravers.
 6 | 
 7 | 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](https://www.evilmadscientist.com/2011/hershey-text-an-inkscape-extension-for-engraving-fonts/).
 8 | 
 9 | This tool is an attempt to create a browser based alternative to the excellent [Hershey Text Extension for Inkscape](https://wiki.evilmadscientist.com/Hershey_Text) 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.
10 | 
11 | [**>> CHECK IT OUT HERE <<**](https://jvolker.github.io/single-line-font-renderer/)
12 | 
13 | <img width="1136" alt="Screenshot of the software" src="https://user-images.githubusercontent.com/546852/105638363-85436000-5e72-11eb-801a-60d2b2ce9a65.png">
14 | 
15 | **Features:**
16 | - latest fonts from the [SVG fonts repository](https://gitlab.com/oskay/svg-fonts) are loaded by default
17 | - loads local SVG font files optionally
18 | - adjust font scale and stroke width 
19 | - smoothing/simplification (this is experimental: the results from Inkscape are better in some cases)
20 | - export as SVG file
21 | 
22 | **Ideas for furture features:**
23 | - [ ] line breaks
24 | - [ ] Use meaningful units: eg. font size and stroke width in mm
25 | - [ ] 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
26 | - [ ] DXF export (eg. using https://github.com/microsoft/maker.js/issues/480 or https://github.com/jscad/io/tree/master/packages/svg-deserializer and https://github.com/jscad/io/tree/master/packages/dxf-serializer)
27 | - [ ] move svg font renderer into separate repo with Node.js support and NPM release 
28 | - [ ] text area: words wrap to new line when longer than a certain length
29 | - [ ] alignment: right and center
30 | 
31 | ## Export and usage
32 | 
33 | 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:
34 | 
35 | 1. This tool exports SVGs to be used and rearranged in a vector/graphic design software like [Affinity Designer](https://affinity.serif.com/en-gb/designer/), Adobe Illustrator or others.
36 | 2. The results can then, for example, be used on an [Axidraw pen plotter](https://axidraw.com/) using [saxi](https://github.com/nornagon/saxi/), a web based control software for Axidraw plotters.
37 | 
38 | 
39 | ## Fonts
40 | 
41 | This tool makes use of SVG fonts. This format has advantages over the original Hershey font format as explained in this [article](https://www.evilmadscientist.com/2019/hershey-text-v30/). The fonts are sourced from a [repositiory with SVG fonts](https://gitlab.com/oskay/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.
42 | 
43 | 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.
44 | 
45 | **Font licenses:** Before using any of the fonts, please make sure to check their license contained in that repository.
46 | 
47 | ## Acknowledgement
48 | 
49 | The rendering core is heavily borrowed from: https://github.com/techninja/hersheytextjs  
50 | Thanks to [Evil Mad Scientist](https://www.evilmadscientist.com/) for their pioneering work in this field.
51 | 
52 | ## Alternatives to this tool
53 | - [Hershey Text Extension for Inkscape](https://wiki.evilmadscientist.com/Hershey_Text) by Evil Mad Scientist
54 | - [CNC Text Tool](https://msurguy.github.io/cnc-text-tool/)
55 | - [True single-stroke-font text creator](https://www.templatemaker.nl/singlelinetext/)
56 | 
57 | ## Development
58 | 
59 | ### Project setup
60 | ```
61 | npm install
62 | ```
63 | 
64 | ### Compiles and hot-reloads for development
65 | ```
66 | npm run serve
67 | ```
68 | 
69 | ### Compiles and minifies for production
70 | ```
71 | npm run build
72 | ```
73 | 
74 | ### Lints and fixes files
75 | ```
76 | npm run lint
77 | ```
78 | 
79 | ### Customize configuration
80 | See [Configuration Reference](https://cli.vuejs.org/config/).
81 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "single-line-font-renderer",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "start": "npm run serve",
 7 |     "serve": "vue-cli-service serve",
 8 |     "build": "vue-cli-service build",
 9 |     "lint": "vue-cli-service lint"
10 |   },
11 |   "dependencies": {
12 |     "axios": "0.21.1",
13 |     "axios-cache-adapter": "2.5.0",
14 |     "cheerio": "1.0.0-rc.5",
15 |     "core-js": "3.8.3",
16 |     "paper": "0.12.11",
17 |     "vue": "2.6.12",
18 |     "vuetify": "2.4.3"
19 |   },
20 |   "devDependencies": {
21 |     "@vue/cli-plugin-babel": "4.5.11",
22 |     "@vue/cli-plugin-eslint": "4.5.11",
23 |     "@vue/cli-service": "4.5.11",
24 |     "babel-eslint": "10.1.0",
25 |     "eslint": "7.18.0",
26 |     "eslint-plugin-vue": "7.5.0",
27 |     "sass": "1.32.5",
28 |     "sass-loader": "10.1.1",
29 |     "vue-cli-plugin-vuetify": "2.0.9",
30 |     "vue-template-compiler": "2.6.12",
31 |     "vuetify-loader": "1.6.0"
32 |   },
33 |   "eslintConfig": {
34 |     "root": true,
35 |     "env": {
36 |       "node": true
37 |     },
38 |     "extends": [
39 |       "plugin:vue/essential",
40 |       "eslint:recommended"
41 |     ],
42 |     "parserOptions": {
43 |       "parser": "babel-eslint"
44 |     },
45 |     "rules": {
46 |       "no-unused-vars": "warn"
47 |     }
48 |   },
49 |   "browserslist": [
50 |     "> 1%",
51 |     "last 2 versions",
52 |     "not dead"
53 |   ]
54 | }
55 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jvolker/single-line-font-renderer/26a206672dd19dfc4ae2b1b0259183c1eda37700/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title>Single-Line Font Renderer</title>
 9 |     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
10 |     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
11 |   </head>
12 |   <body>
13 |     <noscript>
14 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
15 |     </noscript>
16 |     <div id="app"></div>
17 |     <!-- built files will be auto injected -->
18 |   </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/renovate.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": [
3 |     "config:base"
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <v-app>
  3 |     <v-navigation-drawer permanent absolute app :width="280">
  4 |       <v-list-item>
  5 |         <v-list-item-content>
  6 |           <v-list-item-title class="title">
  7 |             Single-Line Font Renderer
  8 |           </v-list-item-title>
  9 |           <!-- <v-list-item-subtitle> subtext </v-list-item-subtitle> -->
 10 |         </v-list-item-content>
 11 |       </v-list-item>
 12 | 
 13 |       <v-divider></v-divider>
 14 | 
 15 |       <v-list>
 16 |         <v-list-item>
 17 |           <v-list-item-content>
 18 |             <v-textarea
 19 |               label="Text input"
 20 |               v-model="text"
 21 |               @input="render"
 22 |               outlined
 23 |             ></v-textarea>
 24 | 
 25 |             <v-container class="font pa-0 mb-4">
 26 |               <v-subheader class="mb-2">Font</v-subheader>
 27 | 
 28 |               <v-row class="mx-0 mt-2 mb-6">
 29 |                {{ selectedFontName }}
 30 |               </v-row>
 31 |               
 32 |               <template v-if="!useCustomFont">
 33 |                 <v-subheader class="mb-1">Default fonts</v-subheader>
 34 |                 <v-select
 35 |                   class="mt-1"
 36 |                   :items="fonts"
 37 |                   item-text="displayName"
 38 |                   dense
 39 |                   v-model="selectedFontName"
 40 |                   @input="selectFont"
 41 |                 ></v-select>
 42 |                 <v-btn
 43 |                   class="pl-0"
 44 |                   x-small
 45 |                   plain
 46 |                   href="https://gitlab.com/oskay/svg-fonts"
 47 |                   target="_blank"
 48 |                   >Improve these fonts<v-icon class="ml-0" x-small right> mdi-pencil </v-icon></v-btn
 49 |                 >
 50 | 
 51 |               </template>
 52 |               <template v-else>
 53 |                 <v-subheader class="mb-2">Load custom SVG font file</v-subheader>
 54 |                 <v-file-input
 55 |                   class="mt-1 pt-0"
 56 |                   accept=".svg"
 57 |                   dense
 58 |                   single-line
 59 |                   v-model="customFontInput"
 60 |                   label="Select file …"
 61 |                   @change="loadLocalFont"
 62 |                 ></v-file-input>
 63 |               </template>
 64 | 
 65 |               <v-row class="mx-0 mt-2 mb-1" justify="center">
 66 |                 <v-btn-toggle
 67 |                   mandatory
 68 |                   small
 69 |                 >
 70 |                   <v-btn small @click="useCustomFont = false">
 71 |                     <v-icon small >mdi-format-list-bulleted</v-icon> 
 72 |                   </v-btn>
 73 |                   <v-btn small @click="useCustomFont = true">
 74 |                     <v-icon small >mdi-paperclip</v-icon>
 75 |                   </v-btn>
 76 |                 </v-btn-toggle>
 77 |               </v-row>
 78 |             </v-container>
 79 | 
 80 |             <v-btn v-if="!showFontSmoothing" class="mb-2" small block text @click="showFontSmoothing = true">smoothing (experimental)</v-btn>
 81 |             <template v-else>
 82 |               <div class="mt-2 mb-0">
 83 |                 <v-subheader class="mb-2">Smoothing (experimental)</v-subheader>
 84 | 
 85 |                 <v-checkbox
 86 |                   @change="applyFontSettings(true)"
 87 |                   v-model="enableFontSimplification"
 88 |                   label="Simplify"
 89 |                   dense
 90 |                   class="ma-0"
 91 |                 ></v-checkbox>
 92 |                 <div v-if="enableFontSimplification">
 93 |                   <v-subheader>Simplify Deviation</v-subheader>
 94 |                   <v-slider
 95 |                     @input="applyFontSettings(true)"
 96 |                     v-model="simplifyFactor"
 97 |                     step="1"
 98 |                     max="30"
 99 |                     min="0"
100 |                   >
101 |                     <template v-slot:append>
102 |                       <v-text-field
103 |                         v-model="simplifyFactor"
104 |                         class="mt-0 pt-0"
105 |                         type="number"
106 |                         style="width: 45px"
107 |                         dense
108 |                       ></v-text-field>
109 |                     </template>
110 |                   </v-slider>
111 |                 </div>
112 |               </div>
113 |               <div class="mt-0">
114 |                 <v-checkbox
115 |                   @change="applyFontSettings(true)"
116 |                   v-model="enableFontSmoothing"
117 |                   label="Smooth"
118 |                   dense
119 |                   class="ma-0"
120 |                 ></v-checkbox>
121 | 
122 |                 <v-select
123 |                   v-if="enableFontSmoothing"
124 |                   @input="applyFontSettings(true)"
125 |                   :items="smoothingTypes"
126 |                   label="Smooth Type"
127 |                   v-model="smoothingType"
128 |                 ></v-select>
129 | 
130 |                 <div v-if="enableFontSmoothing && smoothingType == 'catmull-rom'">
131 |                   <v-subheader>Smooth amount</v-subheader>
132 |                   <v-slider
133 |                     @input="applyFontSettings(true)"
134 |                     v-model="smoothingFactor"
135 |                     step="0.01"
136 |                     max="1"
137 |                     min="0.01"
138 |                   >
139 |                     <template v-slot:append>
140 |                       <v-text-field
141 |                         v-model="smoothingFactor"
142 |                         class="mt-0 pt-0"
143 |                         type="number"
144 |                         style="width: 45px"
145 |                         dense
146 |                       ></v-text-field>
147 |                     </template>
148 |                   </v-slider>
149 |                 </div>
150 |               </div>
151 |             </template>
152 | 
153 |             <v-divider class="mt-1 mb-6"></v-divider>
154 | 
155 |             <div>
156 |               <v-subheader>Scale</v-subheader>
157 |               <v-slider
158 |                 @input="applyFontScale"
159 |                 v-model="fontScale"
160 |                 step="0.01"
161 |                 max="10"
162 |                 min="0.1"
163 |                 block
164 |               >
165 |                 <template v-slot:append>
166 |                   <v-text-field
167 |                     v-model="fontScale"
168 |                     class="mt-0 pt-0"
169 |                     type="number"
170 |                     step="0.01"
171 |                     style="width: 45px"
172 |                     dense
173 |                   ></v-text-field>
174 |                 </template>
175 |               </v-slider>
176 |             </div>
177 |             <div>
178 |               <v-subheader>Stroke width</v-subheader>
179 |               <v-slider
180 |                 @input="applyStrokeWeight"
181 |                 v-model="strokeWeight"
182 |                 step="0.01"
183 |                 max="20"
184 |                 min="0.1"
185 |               >
186 |                 <template v-slot:append>
187 |                   <v-text-field
188 |                     v-model="strokeWeight"
189 |                     class="mt-0 pt-0"
190 |                     type="number"
191 |                     style="width: 45px"
192 |                     dense
193 |                   ></v-text-field>
194 |                 </template>
195 |               </v-slider>
196 |             </div>
197 | 
198 |             <!-- <v-divider class="mt-0 mb-6"></v-divider> -->
199 | 
200 |             <v-btn color="primary" block elevation="2" @click="exportSVG"
201 |               >Download SVG</v-btn
202 |             >
203 |           </v-list-item-content>
204 |         </v-list-item>
205 |       </v-list>
206 |       <template v-slot:append>
207 |         <v-divider></v-divider>
208 |         <v-btn
209 |           large
210 |           plain
211 |           href="https://github.com/jvolker/single-line-font-renderer"
212 |           target="_blank"
213 |           >Improve this tool<v-icon right> mdi-pencil </v-icon></v-btn
214 |         >
215 |       </template>
216 |     </v-navigation-drawer>
217 |     <v-main>
218 |       <v-container id="alerts">
219 |         <v-row class="mt-2" align="center" justify="center">
220 |           <v-alert
221 |             v-model="error"
222 |             dismissible
223 |             type="error"
224 |           >Couldn't load local font file.</v-alert>
225 |         </v-row>
226 |       </v-container>
227 |       <v-container fill-height fluid id="svgWrapper">
228 |         <v-row align="center" justify="center">
229 |           <v-col>
230 |             <svg
231 |               ref="svg"
232 |               xmlns="http://www.w3.org/2000/svg"
233 |               xmlns:xlink="http://www.w3.org/1999/xlink"
234 |               version="1.1"
235 |               v-html="displayedSvgContent"
236 |               :width="svgWidth"
237 |               :height="svgHeight"
238 |             ></svg>
239 |           </v-col> 
240 |         </v-row>
241 |       </v-container>
242 |     </v-main>
243 |   </v-app>
244 | </template>
245 | 
246 | <script>
247 | import _axios from "axios";
248 | import { setupCache } from "axios-cache-adapter";
249 | import svgFontRenderer from "./lib/svgFontRenderer";
250 | import paper from "paper";
251 | 
252 | // Create `axios-cache-adapter` instance
253 | const cache = setupCache({
254 |   maxAge: 24 * 60 * 60 * 1000, // cache for 24h
255 | });
256 | 
257 | // Create `axios` instance passing the newly created `cache.adapter`
258 | const axios = _axios.create({
259 |   adapter: cache.adapter,
260 | });
261 | 
262 | function truncate(str, n) {
263 |   return str.length > n ? str.substr(0, n - 1) : str;
264 | }
265 | 
266 | const defaults = {
267 |   selectedFontName : "Hershey Sans1"
268 | }
269 | 
270 | export default {
271 |   name: "App",
272 | 
273 |   data() {
274 |     return {
275 |       fonts: [],
276 |       selectedFontName: null,
277 |       useCustomFont: false,
278 |       customFontInput: null,
279 |       customFont: null,
280 |       strokeWeight: 1,
281 |       fontScale: 1,
282 |       showFontSmoothing: false,
283 |       enableFontSimplification: false,
284 |       simplifyFactor: 0,
285 |       enableFontSmoothing: false,
286 |       smoothingTypes: ["catmull-rom", "geometric", "continuous", "asymmetric"],
287 |       smoothingType: "catmull-rom",
288 |       smoothingFactor: 0.5,
289 |       right: null,
290 |       rawSvgContent: null,
291 |       displayedSvgContent: null,
292 |       svgWidth: null,
293 |       svgHeight: null,
294 |       rawSVGWidth: null,
295 |       rawSVGHeight: null,
296 |       text:
297 |         "The Woodman set to work at once, and so sharp was his axe that the tree was soon chopped nearly through.",
298 |       renderedSVG: null,
299 |       error: null
300 |     };
301 |   },
302 |   mounted: async function () {
303 |     await this.getFonts();
304 |     this.reset();
305 |   },
306 |   computed: {
307 |     selectedFont: function () {
308 |       return this.fonts.find(
309 |         (font) => font.displayName === this.selectedFontName
310 |       );
311 |     },
312 |   },
313 |   methods: {
314 |     async getFonts() {
315 |       const component = this;
316 | 
317 |       await getFontList("fonts/EMS");
318 |       await getFontList("fonts/Hershey");
319 | 
320 |       async function getFontList(basePath) {
321 |         const url = `https://gitlab.com/api/v4/projects/12941474/repository/tree?path=${basePath}&per_page=100`;
322 |         await axios.get(url).then((response) => {
323 |           const receivedFonts = response.data
324 |             .map((file) => {
325 |               return {
326 |                 fileName: file.name,
327 |                 displayName: file.name.replace(".svg", "").replace(/([a-z])([A-Z])/g, '$1 $2').replace(/([A-Z])([A-Z][a-z])/g, '$1 $2'), // Need to use file name instead of font-family as we don't want to load and parse all files at once. Might me something for the future. 
328 |                 basePath: basePath,
329 |               };
330 |             })
331 |             .filter((font) => font.fileName.endsWith(".svg"));
332 |           component.fonts = [...component.fonts, ...receivedFonts];
333 |         });
334 |       }
335 |     },
336 |     async selectFont() {
337 |       const path = `${this.selectedFont.basePath}/${this.selectedFont.fileName}`;
338 |       const url = `https://gitlab.com/api/v4/projects/12941474/repository/files/${encodeURIComponent(
339 |         path
340 |       )}/raw?ref=master`;
341 |       await axios
342 |         .get(url)
343 |         .then((response) => {
344 |           const fontName = svgFontRenderer.addSVGFontFromData(response.data);
345 |           this.$set(this.selectedFont, "fontName", fontName);
346 |         })
347 |         .then(this.render);
348 |     },
349 |     async loadLocalFont(file) {
350 |       if (!file) { 
351 |         // reset to default font after ejecting local font
352 |         this.customFont = null;
353 |         this.reset();
354 |         return;
355 |       } 
356 | 
357 |       const reader = new FileReader();
358 |       reader.readAsText(file);
359 | 
360 |       reader.onload = () => {
361 |         this.customFont = null;
362 |         const fontName = svgFontRenderer.addSVGFontFromData(reader.result);
363 |         if (fontName){
364 |           this.error = false;
365 |           const font = {
366 |             // fileName: file.name,
367 |             displayName: svgFontRenderer.getFontData(fontName).info['font-family'],
368 |             // basePath: basePath
369 |             fontName : fontName
370 |           }
371 |           // this.fonts.push(font);
372 |           this.selectedFontName = font.displayName;
373 |           this.customFont = font;
374 |           this.render();
375 |         } else {
376 |           this.error = true;
377 |           this.customFontInput = null;
378 |           this.reset();
379 |         }
380 | 
381 |       };
382 |     },
383 |     render() {
384 |       this.displayedSvgContent = this.rawSvgContent = svgFontRenderer.renderTextSVG(
385 |         this.text,
386 |         {
387 |           font: this.useCustomFont && this.customFont?.fontName? this.customFont.fontName : this.selectedFont.fontName,
388 |           scale: 0.1,
389 |         }
390 |       );
391 | 
392 |       // wait for next tick when svg has rendered
393 |       this.$nextTick(() => {
394 |         this.getSVGSize(true);
395 |         this.applyFontSettings();
396 |       });
397 |     },
398 |     applyFontSettings(triggerSmoothing = true) {
399 |       const applyDomSettings = () => {
400 |         this.applyStrokeWeight();
401 |         this.applyFontScale();
402 |       };
403 |       if (triggerSmoothing) this.smoothFont(applyDomSettings);
404 |       else applyDomSettings();
405 |     },
406 |     applyFontScale() {
407 |       if (!this.$refs.svg) return;
408 | 
409 |       const fontWrapper = this.$refs.svg.firstChild;
410 |       fontWrapper.setAttribute("transform", `scale(${this.fontScale})`);
411 | 
412 |       this.getSVGSize();
413 |     },
414 |     applyStrokeWeight() {
415 |       if (!this.$refs.svg) return;
416 |       const fontWrapper = this.$refs.svg.firstChild;
417 |       fontWrapper.setAttribute("stroke-width", this.strokeWeight);
418 |     },
419 |     getSVGSize(raw = false) {
420 |       const bbox = this.$refs.svg.getBBox();
421 | 
422 |       // Update the width and height using the size of the contents
423 |       this.svgWidth = Math.ceil(bbox.x + bbox.width + bbox.x);
424 |       this.svgHeight = Math.ceil(bbox.y + bbox.height + bbox.y);
425 |       if (raw) {
426 |         this.rawSVGWidth = this.svgWidth;
427 |         this.rawSVGHeight = this.svgHeight;
428 |       }
429 |     },
430 |     smoothFont(callback) {
431 |       if (
432 |         !this.rawSVGWidth ||
433 |         !this.rawSVGHeight ||
434 |         this.rawSVGWidth == 0 ||
435 |         this.rawSVGHeight == 0
436 |       )
437 |         return;
438 | 
439 |       // feeding the svg into another engine might be slow especially with large text ??
440 |       paper.setup([this.rawSVGWidth, this.rawSVGHeight]);
441 | 
442 |       const header = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" >`;
443 |       const footer = "</svg>";
444 | 
445 |       paper.project.importSVG(
446 |         `${header}\n${this.rawSvgContent}\n${footer}`,
447 |         (item) => {
448 |           if (!this.enableFontSimplification && !this.enableFontSmoothing)
449 |             return;
450 | 
451 |           const letterPaths = item.children[0].children[0].children;
452 | 
453 |           letterPaths.forEach((path) => {
454 |             if (this.enableFontSimplification)
455 |               path.simplify(this.simplifyFactor);
456 |             if (this.enableFontSmoothing)
457 |               path.smooth({
458 |                 type: this.smoothingType,
459 |                 factor: this.smoothingFactor,
460 |               });
461 |           });
462 |         }
463 |       );
464 | 
465 |       this.displayedSvgContent = paper.project.exportSVG().innerHTML;
466 | 
467 |       this.$nextTick(() => {
468 |         if (callback) callback();
469 |       });
470 |     },
471 |     exportSVG() {
472 |       console.log("export svg");
473 |       const string = this.$refs.svg.outerHTML; // raw svg
474 |       if (!string) return;
475 |       const blob = new Blob([string], { type: "image/svg+xml;charset=utf-8" });
476 |       const url = window.URL.createObjectURL(blob);
477 |       const a = document.createElement("a");
478 |       a.href = url;
479 |       a.download =
480 |         truncate(this.text.replace(/[^a-z0-9]/gi, "-").toLowerCase(), 60) +
481 |         ".svg"; // download file name
482 |       a.click();
483 |       window.URL.revokeObjectURL(url);
484 |     },
485 |     async reset() {    
486 |       this.selectedFontName = defaults.selectedFontName;
487 |       await this.selectFont();
488 |       this.render();
489 |     },
490 |   },
491 | };
492 | </script>
493 | 
494 | 
495 | <style>
496 | div.v-subheader {
497 |   padding: 0;
498 |   height: 8px;
499 |   font-size: 12px;
500 | }
501 | 
502 | div.v-slider--horizontal {
503 |   margin-left: 0;
504 | }
505 | 
506 | #svgWrapper {
507 |   overflow: scroll;
508 | }
509 | 
510 | #alerts {
511 |   position: absolute;
512 | }
513 | 
514 | .font .v-text-field__details {
515 |   display: none;
516 | }
517 | </style>


--------------------------------------------------------------------------------
/src/lib/svgFontRenderer.js:
--------------------------------------------------------------------------------
  1 | // This is taken and quickly adapted from: https://github.com/techninja/hersheytextjs/blob/master/lib/hersheytext.js
  2 | 
  3 | 
  4 | 
  5 | 
  6 | /**
  7 |  * @file HersheyText node module for easily including the letter data or rendering text.
  8 |  */
  9 | const cheerio = require('cheerio');
 10 | // const fs = require('fs');
 11 | // const path = require('path');
 12 | 
 13 | // exports.fonts = require('../hersheytext.min.json');
 14 | // exports.svgFonts = require('../svg_fonts/index.json');
 15 | 
 16 | exports.svgFonts = []
 17 | 
 18 | // Rewrite internal reference filename for SVG fonts to the absolute path.
 19 | // Object.entries(exports.svgFonts).forEach(([key, item]) => {
 20 | //   item.file = path.join(__dirname, '..', 'svg_fonts', item.file);
 21 | // });
 22 | 
 23 | /**
 24 |  * Helper to load font data from SVG fonts or original Hershey JSON data.
 25 |  *
 26 |  * @param {string} fontName
 27 |  *   The machine name/id of the font, either from the Hershey JSON key, or the
 28 |  *   SVG font index JSON key.
 29 |  *
 30 |  * @returns {object}
 31 |  *   Object containing all chars supported by the font
 32 |  */
 33 | function getFontData(fontName) {
 34 |   const font = {
 35 |     info: 'Invalid Font',
 36 |     getChar: () => null,
 37 |   };
 38 | 
 39 | //   if (exports.fonts[fontName]) {
 40 | //     font.type = 'hershey';
 41 | //     font.info = {
 42 | //       'font-family': exports.fonts[fontName].name, // Font title.
 43 | //       'units-per-em': 10, // Height.
 44 | //       'horiz-adv-x': 10, // Space/Default width.
 45 | //     };
 46 | //     font.chars = exports.fonts[fontName].chars;
 47 | 
 48 | //     // Get font characters via ascii index offset.
 49 | //     font.getChar = (char) => {
 50 | //       const data = font.chars[char.charCodeAt(0) - 33];
 51 | //       if (data) {
 52 | //         return { type: char, name: char, width: parseInt(data.o, 10), d: data.d };
 53 | //       }
 54 | //       return null;
 55 | //     };
 56 | 
 57 | //   } else if (exports.svgFonts[fontName]) {
 58 |     // const data = fs.readFileSync(exports.svgFonts[fontName].file);
 59 |     const data = exports.svgFonts[fontName].data;
 60 |     const $ = cheerio.load(data, { xmlMode: true });
 61 | 
 62 |     font.type = 'svg';
 63 |     font.info = { ...$('font-face').attr(), ...$('font').attr() };
 64 |     font.chars = {};
 65 | 
 66 |     $('glyph').each((index) => {
 67 |       const item = $('glyph')[index];
 68 |       // Add all glyphs including space (which only contains the space width!).
 69 |       font.chars[item.attribs.unicode] = {
 70 |         type: item.attribs.unicode,
 71 |         name: item.attribs['glyph-name'],
 72 |         width: parseFloat(item.attribs['horiz-adv-x']) || parseFloat(font.info['horiz-adv-x']),
 73 |         d: item.attribs.d || null,
 74 |       }
 75 |     });
 76 | 
 77 |     // Get font characters directly via unicode object keys.
 78 |     font.getChar = char => font.chars[char];
 79 | //   }
 80 | 
 81 |   return font;
 82 | }
 83 | 
 84 | // Export the get data function.
 85 | exports.getFontData = getFontData;
 86 | 
 87 | /**
 88 |  * Add a new SVG Font via file location.
 89 |  *
 90 |  * @returns {boolean}
 91 |  *   True if it worked, false if not.
 92 |  */
 93 | // exports.addSVGFont = (file) => {
 94 | //   try {
 95 | //     const data = fs.readFileSync(file);
 96 | //     const $ = cheerio.load(data, { xmlMode: true });
 97 | //     const name = $('font-face').attr('font-family');
 98 | //     const cleanName = name.toLowerCase().replace(/\s/g, '_');
 99 | //     exports.svgFonts[cleanName] = { name, file };
100 | //   } catch (error) {
101 | //     console.error(error);
102 | //     return false;
103 | //   }
104 | // };
105 | 
106 | exports.addSVGFontFromData = (data) => {
107 |     try {
108 |       const $ = cheerio.load(data, { xmlMode: true });
109 |       const name = $('font-face').attr('font-family');
110 |       const cleanName = name.toLowerCase().replace(/\s/g, '_');
111 |       exports.svgFonts[cleanName] = { name, data };
112 |       return cleanName;
113 |     } catch (error) {
114 |       console.error(error);
115 |       return false;
116 |     }
117 | };
118 | 
119 | /**
120 |  * Get a flat array list of machine name valid fonts.
121 |  *
122 |  * @returns {array}
123 |  *   Flat array of font name/id strings.
124 |  */
125 | // exports.getFonts = () => [...Object.keys(exports.fonts), ...Object.keys(exports.svgFonts)];
126 | 
127 | /**
128 |  * Render a string of text in a Hershey engraving font to SVG XML.
129 |  *
130 |  * @param {string} text
131 |  *   Text string to be rendered
132 |  * @param {object} rawOptions
133 |  *   Object of named options:
134 |  *    font {string}: Name of font face from main font object
135 |  *    id {string}: ID to give the final g(roup) SVG DOM object
136 |  *    pos {object}: {x, y} object of where to position the object
137 |  *    charSpacingAdjust {int}: Amount to add or remove from between char spacing.
138 |  *    charHeightAdjust {int}: Amount to add or remove from line height.
139 |  *    scale {int}: Scale to multiply size of everything by
140 |  *
141 |  * @returns {string|boolean}
142 |  *   Internal SVG content to be rendered as you see fit.
143 |  *   Returns === false if error.
144 |  */
145 | exports.renderTextSVG = function(text, rawOptions = {}) {
146 |   const options = {
147 |     id: 'text',
148 |     font: 'futural',
149 |     charSpacingAdjust: 0,
150 |     charHeightAdjust: 0,
151 |     scale: 2,
152 |     pos: { x: 0, y: 0 },
153 |     ...rawOptions,
154 |   };
155 | 
156 |   // Prep SVG export.
157 |   const $ = cheerio.load('<g>', { xmlMode: true }); // Initial DOM
158 | 
159 |   try {
160 |     const font = getFontData(options.font);
161 |     // console.log(font.type)
162 |     const multiplyer = font.type === 'svg' ? 1 : 1.68;
163 |     const offset = { left: 0, top: 0 };
164 | 
165 |     // Create central group
166 |     const $textGroup = $('g');
167 |     $textGroup.attr({
168 |       id: options.id,
169 |       stroke: 'black',
170 |       fill: 'none',
171 |       transform:
172 |         `scale(${options.scale}) translate(${options.pos.x}, ${options.pos.y})`
173 |     });
174 | 
175 |     // Initial Line container
176 |     const lineCount = 0;
177 |     const $groupLine = $('<g>').attr('id', options.id + '-line-' + lineCount);
178 |     $textGroup.prepend($groupLine);
179 | 
180 |     // Move through each word
181 |     const words = text.split(' ');
182 |     for(let w in words) {
183 |       const word = words[w];
184 | 
185 |       // Move through each letter
186 |       for(let i in word) {
187 |     
188 |         const rawChar = word[i];
189 |         const char = font.getChar(rawChar);
190 | 
191 |         // Only print in range chars
192 |         if (char) {
193 |           const $path = $('<path>').attr({
194 |             d: char.d,
195 |             stroke: 'black',
196 |             'stroke-width': 1,
197 |             fill: 'none',
198 |             transform: `translate(${offset.left}, ${offset.top})`,
199 |             letter: word[i]
200 |           });
201 | 
202 |           if (font.type === 'svg') {
203 |             $path.attr('transform', `translate(${offset.left}, ${font.info['units-per-em']}) scale(1, -1)`);
204 |           }
205 | 
206 |           // Add the char to the DOM group.
207 |           $groupLine.append($path).append($('</path>'));
208 | 
209 |           // Position next character.
210 |           offset.left += (char.width * multiplyer) + options.charSpacingAdjust;
211 |         }
212 |       }
213 | 
214 |       // Word boundary: Add a space.
215 |       offset.left+= parseInt(font.info['horiz-adv-x'], 10) + options.charSpacingAdjust;
216 |     }
217 | 
218 |   } catch(e) {
219 |     console.error(e);
220 |     return false; // Error!
221 |   }
222 | 
223 |   return $.html(); // We should be all good!
224 | }
225 | 
226 | /**
227 |  * Render a string of text in a Hershey engraving font to an array of paths.
228 |  *
229 |  * @param {string} text
230 |  *   Text string to be rendered
231 |  * @param {object} options
232 |  *   Object of named options:
233 |  *    font {string}: [Optional] Name of font face from main font object
234 |  *
235 |  * @returns {string|boolean}
236 |  *   Array of font matches for letters in order, returns === false if error.
237 |  */
238 | // exports.renderTextArray = function(text, rawOptions = {}) {
239 | //   const out = [];
240 | //   const options = { font: 'futural', ...rawOptions };
241 | 
242 | //   // Change CRLF with just LF.
243 | //   text = text.replace(/\r\n/g, "\n");
244 | //   try {
245 | //     const font = getFontData(options.font);
246 | 
247 | //     // Move through each letter.
248 | //     for(let i in text) {
249 | //       const char = font.getChar(text[i]);
250 | 
251 | //       // Only print in range chars.
252 | //       if (char){
253 | //         out.push(char);
254 | //       } else if (text[i] === "\n") {
255 | //         out.push({ name: 'newline', width: 0 });
256 | //       } else {
257 | //         // Add a space if char not found.
258 | //         // TODO: Add support for "missing-glyph".
259 | //         // TODO: This might break for hershey font. Please use SVG font, thank you!
260 | //         out.push(font.getChar(' '));
261 | //       }
262 | //     }
263 | //   } catch(e) {
264 | //     console.error(e);
265 | //     return false; // Error!
266 | //   }
267 | 
268 | //   return out;
269 | // }
270 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App.vue'
 3 | import vuetify from './plugins/vuetify';
 4 | 
 5 | Vue.config.productionTip = false
 6 | 
 7 | new Vue({
 8 |   vuetify,
 9 |   render: h => h(App)
10 | }).$mount('#app')
11 | 


--------------------------------------------------------------------------------
/src/plugins/vuetify.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue';
2 | import Vuetify from 'vuetify/lib/framework';
3 | 
4 | Vue.use(Vuetify);
5 | 
6 | export default new Vuetify({
7 | });
8 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   "transpileDependencies": [
3 |     "vuetify"
4 |   ],
5 |   "publicPath" : process.env.NODE_ENV === 'production'
6 |     ? '/single-line-font-renderer/'
7 |     : '/'
8 | }


--------------------------------------------------------------------------------