Text on paths #6543

asturur · 2020-08-24T18:47:52Z

@melchiar This PR contains the progress of text on a path, that i started right now.
i ll push up every time i do a small progress.

closes #729
closes #5900
closes #2544

asturur · 2020-08-24T18:48:29Z

step 1, we are here:

that is not bad, if you look at the commit changes.

melchiar · 2020-08-25T00:13:14Z

looking good so far 👍

In having path be a property of text, will the path itself to be styleable (ie. strokes, fills), or will it just be used for text coordinates? (similar to how clipPaths aren't styleable)

asturur · 2020-08-25T05:53:59Z

step 2!

asturur · 2020-08-25T05:55:04Z

@melchiar let's see where we get, is all yet to be decided. having the path renderable makes things easier for devs, rather than aligning objects.

emielmolenaar · 2020-08-25T07:52:54Z

Awesome work! My math skills are a bit meh, but when I see chance to collaborate on this one I will.

asturur · 2020-08-25T21:26:09Z

Another small improvement.

Next thing i would look at is the bounding box.

asturur · 2020-08-26T05:54:32Z

andrewzolotukhin · 2020-08-28T07:32:49Z

Looks great!

stale · 2020-09-11T08:23:21Z

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

asturur · 2020-09-18T19:14:56Z

Yeah i have to get back to this, i m really under a train of work lately

thobn24h · 2020-09-28T17:48:27Z

Impressive !
@asturur, Have you had any draft document or guideline about this new feature, yet?

asturur · 2020-09-28T17:57:43Z

Isn't working properly yet. the idea is to get underline/striketrough/overline working and the release for text only, meaning that for Itext and textbox will work badly and is on the dev to not update it.

thereisn't match to say about it, you take a fabric.Path, and you do Text.set('path', myPath) that's it.
No options for now about being over or under the path.

asturur · 2020-10-03T16:13:49Z

Ok after long time, here i am back.
I changed the implementation to be a measure time more than at render time.
Added support for text decoration.
Now i will write tests and merge as it is, then improve.
Next step is correct bounding box.
Then multi line.

Editing will come later or maybe not come at all, since is really edgy.

asturur · 2020-10-03T16:22:52Z

This is with underline and overline applied

asturur · 2021-02-19T14:01:45Z

no not yet

vijaygurjar · 2021-02-24T13:49:08Z

Hello
I want to scale path not textbox. After scale how i will get updated path co-ordinates or (path string) and also i want to align text like right,center,left.
Sample fiddle:
https://jsfiddle.net/vijaygurjar/9mtcuzv4/18/

Require output like below:

billensley · 2021-02-24T19:15:07Z

Hello, PathText is considered experimental at this time and does not yet support what you are looking for. The devs are always looking for more helpers if you want to dig in. -Bill Ensley On 2/24/2021 5:49 AM, DevD wrote: Hello I want to scale path not textbox. After scale how i get updated path co-ordinates or (path string) and also i want to align text like right,center,left. Sample fiddle: https://jsfiddle.net/vijaygurjar/9mtcuzv4/18/ Require output like below: — You are receiving this because you commented. Reply to this email directly, view it on GitHub, or unsubscribe.

asturur · 2021-02-24T19:46:07Z

@vijaygurjar transforming a fabric path to a scaled path is entirely possible with fabric tools is not something i can explain in a message or an email.
You have to look for transformPoint util and transform each point of the path ( including controls point ).

fran1990Web · 2021-03-04T12:28:37Z

Thanks you @asturur for the work.
This solution. Could be apply on Textbox?
Thanks you very much!

asturur · 2021-03-04T12:36:27Z

Editing still does not work properly.

fran1990Web · 2021-03-04T12:53:16Z

Thanks you @asturur. Do you think this could be a new feature to add? Meanwhile I can use it in text :)

asturur · 2021-03-04T13:02:27Z

yes it will. My priority is RTL support and fixing something in selections interactions

fran1990Web · 2021-03-04T13:06:53Z

Thanks! :)

melchiar · 2021-06-17T21:20:04Z

I've just opened a discussion thread for textAlign and startOffset support if anyone cares to provide feedback.
#7128

edit - side has now been added as well

You're welcome to experiment with my work in progress integration of these features:
https://jsfiddle.net/melchiar/vhgtesoy/

billensley · 2021-06-17T22:13:56Z

Brilliant! Nice work! -Bill Ensley Founder BearPrinting.com On 6/17/2021 2:20 PM, Steve Eberhardt wrote: I've just opened a discussion thread for textAlign and startOffset support if anyone cares to provide feedback. #7128 You're welcome to experiment with my work in progress integration of these features: https://jsfiddle.net/melchiar/vhgtesoy/ <https://jsfiddle.net/melchiar/vhgtesoy/> — You are receiving this because you commented. Reply to this email directly, view it on GitHub, or unsubscribe.

tran-ngoc-phuong-dang · 2021-08-25T13:37:24Z

Has there been any new progress on this? When will this have support for SVG export?

melchiar · 2021-08-25T14:10:35Z

The next release will include additional property support for textAlign, pathStartOffset, and pathSide, along with a util for transforming path data. They're in the current master branch if you want to grab them early, otherwise the next release should be here soon.

No work done yet on svg export though as it hasn't been a priority.

tran-ngoc-phuong-dang · 2021-10-26T12:37:12Z

hi. Any news on the svg export for this feature? What's the next update for the textpath?

melchiar · 2021-10-30T23:54:23Z

No news on svg yet.

emielmolenaar · 2021-11-02T10:24:12Z

We have been experimenting with text on paths and we use this to properly export text on paths to SVG:

fabric.Text.prototype._wrapSVGTextAndBg = function (textAndBg) {
    var noShadow = true, textDecoration = this.getSvgTextDecoration(this);

    const elements = [
        textAndBg.textBgRects.join(''),
        '\t\t<text xml:space="preserve" ',
        (this.fontFamily ? 'font-family="' + this.fontFamily.replace(/"/g, '\'') + '" ' : ''),
        (this.fontSize ? 'font-size="' + this.fontSize + '" ' : ''),
        (this.fontStyle ? 'font-style="' + this.fontStyle + '" ' : ''),
        (this.fontWeight ? 'font-weight="' + this.fontWeight + '" ' : ''),
        (textDecoration ? 'text-decoration="' + textDecoration + '" ' : ''),
        'style="', this.getSvgStyles(noShadow), '"', this.addPaintOrder(), ' >',
    ];

    if (!this.path) {
        elements.push(textAndBg.textSpans.join(''));
    } else {
        /**
         * There is a path, make sure that:
         *
         * 1. A <textpath> surrounds the tspans containing a link to the <path>
         * 2. Every X and Y of every <tspan> is 0
         * 3. The <path> is added
         */
        const id = Date.now() + '-' + Math.random().toString(36).substr(2, 9);

        elements.push('<textPath xlink:href="#path-' + id + '">');
        elements.push(textAndBg.textSpans.join('').replace(/x="[^"]+"/, 'x="0"').replace(/y="[^"]+"/, 'y="0"'));
        elements.push('</textPath>');

        const path = this.path.path
            .map(function (path) {
                return path.join(' ');
            })
            .join(' ');

        elements.push('<path id="path-' + id + '" d="' + path + '" fill="none"></path>');
    }

    elements.push('</text>\n');

    return elements;
}

Although it is a bit hacky (especially the coordinate replacing with regexes), this works for us. Maybe this might be helpful for others.

mafna-air · 2021-11-08T15:13:05Z

thank you. Hope there will be official support for svg export soon.

tran-ngoc-phuong-dang · 2022-05-20T18:56:14Z

has there been any more progress on this feature? With the SVG export function?

egemenerd · 2023-06-17T12:45:34Z

This looks interesting;

https://stackblitz.com/edit/web-platform-n8kzvg?file=script.js

av01d · 2023-06-19T09:02:22Z

This looks interesting;

https://stackblitz.com/edit/web-platform-n8kzvg?file=script.js

This does indeed look promising. But it isn't finished yet, you can't move/resize the curved text and the toSVG function doesn't yield results (yet). Hopefully the creator of this code will keep working on it...

umashankar-pardhi-amla · 2023-10-16T12:31:26Z

Any update on SVG export? Text on path

ShaMan123 · 2023-10-16T13:35:31Z

If you are using node I can point out a solution

umashankar-pardhi-amla · 2023-10-16T13:39:35Z

@ShaMan123 : Yes please

ShaMan123 · 2023-10-16T13:47:32Z

#9185 is what you need, look at the repro in the description for POC

ShaMan123 · 2023-10-16T13:48:37Z

I am not sure about rendering to text though (paths work), you will need to investigate if that is important for you

umashankar-pardhi-amla · 2023-12-12T06:16:13Z

@emielmolenaar emielmolenaar : The SVG is rendering, but it's not positioned correctly. Could you explain how you've configured the object, including user selection, scaling, and all? I'd appreciate your help with this.

We have been experimenting with text on paths and we use this to properly export text on paths to SVG:

fabric.Text.prototype._wrapSVGTextAndBg = function (textAndBg) {
    var noShadow = true, textDecoration = this.getSvgTextDecoration(this);

    const elements = [
        textAndBg.textBgRects.join(''),
        '\t\t<text xml:space="preserve" ',
        (this.fontFamily ? 'font-family="' + this.fontFamily.replace(/"/g, '\'') + '" ' : ''),
        (this.fontSize ? 'font-size="' + this.fontSize + '" ' : ''),
        (this.fontStyle ? 'font-style="' + this.fontStyle + '" ' : ''),
        (this.fontWeight ? 'font-weight="' + this.fontWeight + '" ' : ''),
        (textDecoration ? 'text-decoration="' + textDecoration + '" ' : ''),
        'style="', this.getSvgStyles(noShadow), '"', this.addPaintOrder(), ' >',
    ];

    if (!this.path) {
        elements.push(textAndBg.textSpans.join(''));
    } else {
        /**
         * There is a path, make sure that:
         *
         * 1. A <textpath> surrounds the tspans containing a link to the <path>
         * 2. Every X and Y of every <tspan> is 0
         * 3. The <path> is added
         */
        const id = Date.now() + '-' + Math.random().toString(36).substr(2, 9);

        elements.push('<textPath xlink:href="#path-' + id + '">');
        elements.push(textAndBg.textSpans.join('').replace(/x="[^"]+"/, 'x="0"').replace(/y="[^"]+"/, 'y="0"'));
        elements.push('</textPath>');

        const path = this.path.path
            .map(function (path) {
                return path.join(' ');
            })
            .join(' ');

        elements.push('<path id="path-' + id + '" d="' + path + '" fill="none"></path>');
    }

    elements.push('</text>\n');

    return elements;
}

Although it is a bit hacky (especially the coordinate replacing with regexes), this works for us. Maybe this might be helpful for others.

aswanth6000 · 2024-04-18T02:44:00Z

How can i add control points like this, like in the middle of the text.

00cyberghost · 2024-04-19T07:47:31Z

How can i add control points like this, like in the middle of the text.

i am also interested in this

step 1, cmon do something

c3a4ab7

This was referenced Aug 24, 2020

SVG text on path is not working #2544

Closed

Curve Text Feature [$200] #729

Closed

How to Generate Curved Text ? #5900

Closed

turn a char

e0fd171

not much achieved

1a120b0

bounding box

5682d7d

stale bot added the stale Issue marked as stale by the stale bot label Sep 11, 2020

stale bot closed this Sep 18, 2020

melchiar reopened this Sep 18, 2020

stale bot removed the stale Issue marked as stale by the stale bot label Sep 18, 2020

asturur added the feature label Sep 18, 2020

asturur added 3 commits October 3, 2020 14:22

Merge branch 'master' into text-on-a-path-attempts

47e3b58

ok different implementation

ed82172

ok done text decoration

1036583

ok

99d9536

fran1990Web mentioned this pull request Mar 4, 2021

Text curved - last version. #6904

Closed

melchiar mentioned this pull request Jan 20, 2022

feat(text.class.js) add path rendering to textpaths #7328

Merged

Text on paths #6543

Text on paths #6543

Conversation

asturur commented Aug 24, 2020 • edited Loading

asturur commented Aug 24, 2020

melchiar commented Aug 25, 2020

asturur commented Aug 25, 2020

asturur commented Aug 25, 2020

emielmolenaar commented Aug 25, 2020

asturur commented Aug 25, 2020

asturur commented Aug 26, 2020

andrewzolotukhin commented Aug 28, 2020

stale bot commented Sep 11, 2020

asturur commented Sep 18, 2020

thobn24h commented Sep 28, 2020

asturur commented Sep 28, 2020

asturur commented Oct 3, 2020

asturur commented Oct 3, 2020

asturur commented Feb 19, 2021

vijaygurjar commented Feb 24, 2021 • edited Loading

billensley commented Feb 24, 2021 via email

asturur commented Feb 24, 2021

fran1990Web commented Mar 4, 2021

asturur commented Mar 4, 2021

fran1990Web commented Mar 4, 2021

asturur commented Mar 4, 2021

fran1990Web commented Mar 4, 2021

melchiar commented Jun 17, 2021 • edited Loading

billensley commented Jun 17, 2021 via email

tran-ngoc-phuong-dang commented Aug 25, 2021

melchiar commented Aug 25, 2021

tran-ngoc-phuong-dang commented Oct 26, 2021

melchiar commented Oct 30, 2021

emielmolenaar commented Nov 2, 2021 • edited Loading

mafna-air commented Nov 8, 2021

tran-ngoc-phuong-dang commented May 20, 2022

egemenerd commented Jun 17, 2023

av01d commented Jun 19, 2023

umashankar-pardhi-amla commented Oct 16, 2023

ShaMan123 commented Oct 16, 2023

umashankar-pardhi-amla commented Oct 16, 2023

ShaMan123 commented Oct 16, 2023

ShaMan123 commented Oct 16, 2023

umashankar-pardhi-amla commented Dec 12, 2023

aswanth6000 commented Apr 18, 2024

00cyberghost commented Apr 19, 2024

asturur commented Aug 24, 2020 •

edited

Loading

vijaygurjar commented Feb 24, 2021 •

edited

Loading

melchiar commented Jun 17, 2021 •

edited

Loading

emielmolenaar commented Nov 2, 2021 •

edited

Loading