Letter Spacing on Curves SVG Makes Letters Tilted Using D3

Question

When I add letter-spacing style to my text on path in D3, it tilts the letters and they don't follow nicely the circle anymore (see highlighted letters on image 2)

You can see my D3 code in this notebook

I've tried to do it in InkScape and it looks like it handles the letter-spacing differently (see image 3)

The style in the inkscape for the text is

font-size:17.6389px;line-height:1.25;text-align:center;text-decoration-color:#000000;letter-spacing:5.29167px;writing-mode:vertical-lr;text-anchor:middle;white-space:pre;fill:#990000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:3.77953;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers;stop-color:#000000

and for textPath is

font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:17.6389px;font-family:Arial;-inkscape-font-specification:Arial

I've tried to use some of these attributes, but I cannot get the same result in D3. I would like the letters to be straight as in InkScape

Thanks for your help.

Answer 1

It might be impossible to center the letter with the letter-spacing attribute to be tilted symetrically.

I ended up creating a function that add non-breakable spaces between every character d.data.split("").join("\xa0".repeat(d.space)) where d.data is the text and d.space is the number of spaces inbetween every letter. This is just good for me now and give the following result.