opentypejs / opentype.js

Read and write OpenType fonts using JavaScript.
https://opentype.js.org/
MIT License
4.38k stars 468 forks source link

Help with line breaks in opentype #481

Closed maniac-0s closed 2 years ago

maniac-0s commented 3 years ago

I create text on the canvas using fabric.js and then render an SVG containing paths. Using fabric.js "iText" object I can have word wrapping, line break, centered text ect.

I use opentype.js to iterate over each iText-object, generate a path from it and feed the path back into fabric.Path(path.toPathData()) and then use fabric.js' SVG export to get the SVG file:

                    opentype.load(process.env.PUBLIC_URL+"/fonts/ttf/"+getFontByName(object.fontFamily)["url"])
                    .then(font => {
                        const path = font.getPath(object.text, 0, 0, object.fontSize);
                        const fabricPath = new fabric.Path(path.toPathData(20), {
                            //options... and insert

When I export the SVG directly from fabric, the line break works, but when I convert it into a path using opentype.js, the line break becomes a square and the whole text is in one line. Screenshot_2021-07-15_17-47-08

I found this old closed issue https://github.com/opentypejs/opentype.js/issues/352 and I wanted to ask what's with this now. opentype-layout was last committd 5 years ago and I am kinda hesitating to use such old code in production. What do you think?

yne commented 2 years ago

Not sure if OpentypeJS is the culprit here, I don't see how feeding a series of Path to fabric.js could generate a newline at any point. Is there some other metadata that could help fabric.js understand that this specific glyph is a special character (backspace, breakline ...) ?

yne commented 2 years ago

Closing as the issue seems stale. Do not hesitate to re-open of something new comes up

VaaAbt commented 1 year ago

Any update about this break line issue with opentype js and fabric js ? thx