TextPath bbox width varies

[miloxeon]

Posting here because stack overflow is silent about everything related to svg.js.

I got the code adding the textpath (it's not clean, sorry):

let something = this.text(function (add) {
    add.tspan(...).dy(-5)
}).path(path.array()).textPath();

And then I need to compute the startOffset value for attaching my text to either start or end of the line, but I don't need the relative value in %, I need the exactly value. I also need to add some padding and it's done just like that:

let padding = 10;
let offset_start = padding;   // start of the line
let offset_end = path.length() - something.bbox().w - padding;   // end of the line

I also change the path function, but the path.length() is behaving absolutely correct. The problem is text bbox().w:

33.0625
33.09375
33.21875
33.25
18.953125
19.046875

So the text bbox is changing so much, but the text are the same, the path length may be the same, everything is the same but bbox. What I supposed to do?

[miloxeon]

It varies the same either I set text-anchor or not and don't matter whai anchor is set: start, middle or end

[miloxeon]

and the rbox().w varies too

[miloxeon]

The problem may be solved by computing the tspan's bbox().w at the very beginning while adding it to the text path and then passing it to the offset computing function. But the problem remains, because if we leave everything as is and then get the tspan's bbox().w instead of text bbox().w, it will be varying too

[RmiTtro]

Hey @uyouthe I may have a solution for you, I don't know if it will work with what you are trying to do but hear me out. What you could do is to get the reverse of the path you use for the text path. You can get it using a software like Inkscape or something else. With that, you could put your text at the end using something like this:

this.text.plot(reversePath).attr('startOffset', padding)

And if you want to put it at the start, then you would do something like this:

this.text.plot(path).attr('startOffset', padding)

I think it is the easiest way to accomplish what you want. Trying to calculate the offset so that the text is at the end of the path seem to me as it would be difficult (I seriously have no idea how to do it). The only real issue with my solution is getting the reverse of the path. Unfortunately, svg.js does not have this functionality although I think it could be something interesting to add.

I hope this help you out, I'm definitely not the expert on textpath of the team. Maybe @Fuzzyma will give you a better solution.

[RmiTtro]

Forget my previous post, what I'm proposing won't work as it will also reverse the text. I will need to think more on this!

[RmiTtro]

Wow... turn out this is actually pretty easy to do. You just need to set the text-anchor attribute to end on the textPath. See this fiddle: https://jsfiddle.net/fwf6ga9b/. I really need to play more with textpath!

[Fuzzyma]

@uyouthe I get a notification mail whenever the svg.js tag is mentioned on stackoverflow. I searched for anything like this. Couldnt find a question from you.

Of course the bbox varies when you move the text at the path. When the path is a circle, the text is drawn along this circle which means the bbox is a square. The text itself is always "longer" than text you draw along a path. Depending on what your path looks like, the text has another bbox.

I think @RmiTtro has a good solution here

[miloxeon]

There's no problem to calculate the offset, it was the easiest part. Reverse path will not work because I'm building a uml tool and my path (line between two diagram blocks) is cubic-bezier and it's being drawn dynamically. Of course when the text bends, bbox width may vary slightly, but the problem remains: for specific path the same text looking the same way and doesn't bend at all because the path is straight, but text bbox width value jumps around for about 15 units or more

[Fuzzyma]

Can you please put that in a fiddle so we can see it and play with it?

[miloxeon]

It may be the text path glitch that needs some research but for now I have found the workaround. This bug is so hard to spot but if sometimes someone will try to fix it, feel free to contact me
Thank you all! 👍

[miloxeon]

I tried to fiddle it before replying here today, but it doesn't show up. It seems to happen just in my specific situation, with svg.draggy.js and path redraw on drag. And it's also strange that text bbox().x is always 0. Maybe I'm using something wrong, because the bug happens only with the one single path, reverse it vertically or horizontally and bug doesn't show itself. Anyway, thank you!

[Fuzzyma]

Closing this for now