Avatar for Username

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

This thread was archived. Please ask a new question if you need help.

SVG text on curved path is not laid out as expected if letter-spacing / word-spacing given

Steve Lelievre
Steve Lelievre

I have some SVG text on an arc which I think should be centered symmetrically on the arc - I am using text-anchor='middle' and startOffset='50%'. However, in Firefox the text appears rotated slightly counterclockwise from where I expect it to appear.

I think this problem may be something to do with the text-spacing or the word-spacing setting that I am using (both spacings are expanded) - it seems okay if these are not specified.

How do I make it left-right symmetrical, and why does the same page seem okay in other browsers (is Firefox deliberately different, or is there, as I suspect, a bug?)

Sample web page showing problem

Any ideas?

I have some SVG text on an arc which I think should be centered symmetrically on the arc - I am using text-anchor='middle' and startOffset='50%'. However, in Firefox the text appears rotated slightly counterclockwise from where I expect it to appear. I think this problem may be something to do with the text-spacing or the word-spacing setting that I am using (both spacings are expanded) - it seems okay if these are not specified. How do I make it left-right symmetrical, and why does the same page seem okay in other browsers (is Firefox deliberately different, or is there, as I suspect, a bug?) [https://gnomoni.ca/demo/curvedTextBug.htm Sample web page showing problem] Any ideas?
Attached screenshots

Modified by Steve Lelievre

Chosen solution

It may be a buggy text-spacing in Firefox. You can file a bug here: https://bugzilla.mozilla.org/enter_bug.cgi

You can also try out 
<text textLength="500px">
instead of text-spacing. Read this answer in context 👍 1

All Replies (2)

TyDraniu
TyDraniu
  • Top 25 Contributor

Chosen Solution

It may be a buggy text-spacing in Firefox. You can file a bug here: https://bugzilla.mozilla.org/enter_bug.cgi

You can also try out 
<text textLength="500px">
instead of text-spacing.
Steve Lelievre
Steve Lelievre Question owner

I found that TyDraniu's suggestion of using <text textLength="NNNpx"> solves the problem, close enough. However, it turns out that Google Chrome wants the textLength to apply to the contained textPath element instead of the text element, so I have to give it in 2 places - each browser ignoring one or the other.

With that addition, the layouts are nearly identical but not perfectly so - but good enough for my purposes.