microsoft / microsoft/maker.js

Path directions for text are unpredictable

Open
#512 8 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug
Dominant language
TypeScript
Stars
2k
Forks
302
Avg merge
21h 28m
Merged PRs (30d)
5

Description

I'm using maker.js to generate designs for laser cutting. I've noticed an issue with way text gets rendered to SVG, and it appears to me to be a bug, though I'm hoping there's a workaround, and it might be that there is something that I'm doing wrong.

I'm loading fonts using opentype.js and rendering the text as curves, and exporting to SVG. I'm finding that the directions of paths are not preserved from the glyphs and are unpredictable, resulting in inner paths that are not always the correct direction for the non-zero fill mode, regardless of which fillRule option is used when exporting to SVG. This is a problem because some laser software (Glowforge) doesn't honor fill rules, and always treats curves as non-zero while engraving (though it honors the fill rule when previewing in the interface, so the issue is not seen until the engrave goes wrong).

When opentype parses the font, the directionality of each curve is preserved. But after creating a makerjs.model.Text model from the font, the path directions are inconsistent. This can even be seen in the examples in the playground that use text.

image

I believe this is why directions are unpredictable when the models get exported to SVG paths. So I have two questions:

  1. How difficult would it be to fix this in the text model so path directions are maintained when the model is created?
  2. Is there a document best workaround with the current version to fix path directions? I started writing my own fixChains function using makerjs.model.findChains(model, { contain: { alternateDirection: true } }), but it's not functional yet, and it seems like this is something that should already be somewhere in the code base already.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with makerjs.model.Text and compare the path directions produced from opentype.js glyphs with the directions seen during SVG export. Review the existing makerjs.model.findChains workaround mentioned in the issue, then verify that generated text paths preserve the intended inner and outer directions for non-zero filling and laser engraving.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
computer-graphics
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.