How Can I Add Transform To Unicode Letters

I am working on some text animation on my language. But separating the letters to spans using a js, results in something like follows:

<span class="letter" style="transform: translate(0.55em, 1.1em) scale(1.5);">ध</span>
<span class="letter" style="transform: translate(0.55em, 1.1em);">्</span>
<span class="letter" style="transform: translate(0.55em, 1.1em);">य</span>
<span class="letter" style="transform: translate(0.55em, 1.1em);">ो</span>

The Script I use is

textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>"); 

and results in html is as follows

The result should look like: ध्यो because those empty spaces get combined in unicode.

It only breaks when .letter is applied with display:inline-block which is required to apply transforms.

Is there a way I can achieve result of ध्यो and still apply transforms to each letter?

For that language you must separate them by words as separating by letters won't work. The following code should work.

        let textEl = document.querySelector("p");
        if (textEl) {
            let words = textEl.textContent.split(" ");
            let finalStr = words.reduce((accumulator, currentValue, currentIndex) => {
                return currentIndex === 1 ?
                    `<span class='word'>${accumulator}</span> <span class='word'>${currentValue}</span>` :
                    `${accumulator} <span class='word'>${currentValue}</span>`
                    ;
            });
            textEl.innerHTML = finalStr;
        }
        console.log(textEl.innerHTML);
        

<p>some text for testing</p>