Multiple text Line Support

[kpomservices]

Is there is any option or way to generate svg path for multiple text lines? Please suggest.

[danmarshall]

This may also mean that there would need to be a line-height parameter.

[kpomservices]

Yes exactly.

They used opentype-layout https://maker.js.org/playground/?script=makerjs-wrap-text

Below is the code i used

   App.prototype.wrapText = function(font, text, fontSize, width, align, lineHeight) {
        //sample from https://github.com/Jam3/opentype-layout
        var scale = 1 / font.unitsPerEm * fontSize;
        var layoutOptions = {
            align,
            lineHeight: lineHeight * font.unitsPerEm,
            width: width / scale
        };

        var layout = computeLayout(font, text, layoutOptions);

        layout.glyphs.forEach((glyph, i) => {
            var character = makerjs.models.Text.glyphToModel(glyph.data, fontSize);
            character.origin = makerjs.point.scale(glyph.position, scale);
            makerjs.model.addModel(this, character, i);
        });

        //for seperate paths
        for (var i in this.models) {
            this.models[i].layer = i;
        }

        var svg = makerjs.exporter.toSVG(this);

        this.renderDiv.innerHTML = svg;
        this.outputTextarea.value = svg;
    }; 

[danmarshall]

Oh, right, there also is a width parameter. But I wonder if it would be easier to have a mutli-line textbox as input, then use line breaks for newlines?

[kpomservices]

Width will be main input needed for opentype-layout, if we are providing line break then we need to calculate the width of the text entered (width of longer line in the multi-line) and send that width as input to opentype-layout.

[drone1]

Would also love this feature FWIW. Thanks.

[JxxIT]

Hi, Are there any updates on this?