letter-spacing bug with multiple text

[devilka4321]

Hello! Firstly: thank you for ur job, u're awesome!

And secondly I have problem:

First element - has normal letter spacing, but second and third elements has other spacing.
I'm trying to use letter-spacing parameter in css, trying to use in js (elem.style.letterSpacing), but all of it works just on first element. What I need to do?

Part of code (I'm using svelte):

for (let i = 0; i < text.length; i++) {
    let circleType = new CircleType(text[i]);
    circleType.radius(360).dir(tabs[i].dir);
 }

  <p class="text" bind:this={text[i]} style="transform: rotate({tabs[i].rotate}deg) translate(0, {tabs[i].translate}px) scale({tabs[i].dir})">{tab.title}</p>

[devilka4321]

Okay, I found reason: I'm using css transform property "rotate", and it's broken.

Now I apply this property (rotate) after generating curved text (at js). And it's works

for (let i = 0; i < text.length; i++) {
    let circleType = new CircleType(text[i]);
    circleType.radius(360).dir(tabs[i].dir);
    text[i].style.transform = 'rotate(' + tabs[i].rotate + 'deg) translate(0, ' + tabs[i].translate + 'px) scale(' + tabs[i].dir + ')'
 }

<p class="text" bind:this={text[i]}>{tab.title}</p>