Как я могу добавить преобразование в буквы Unicode

Question

Я работаю над текстовой анимацией на моем языке. Но разделение букв на отрезки с помощью js приводит к чему-то следующему:

<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>

Используемый мной скрипт:

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

, а в результате html выглядит следующим образом

Результат должен выглядеть следующим образом: ध्यो , поскольку эти пустые пространства объединяются в юникоде.

It разрывается только тогда, когда .letter применяется с display:inline-block, который требуется для применения преобразований.

Есть ли способ, которым я могу достичь результата ध्यो и все же применять преобразования к каждой букве?

Answer 1

Для этого языка вы должны разделить их словами, так как разделение буквами не будет работать. Следующий код должен работать.

        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>

Answer 2

Удалить пробел -

Обновление: я вижу, вы не можете сделать inline-block тогда

Перевод работает только на

уровне блока или атомах c элемент inline-level, или свойство которого display отображает значение 'table-row', 'table-row-group', 'table-header-group', 'table-footer-group', 'table-cell' или «заголовок таблицы» [CSS21]

document.getElementById("letterDiv").innerText = document.getElementById("spanDiv").innerText;

.letter {
  transform: translate(0.55em, 1.1em) scale(1.5);
  color: green;
}

div.letter {
  position: absolute;
  top: 120px;
  left: 100px;
}

With whitespace<br/>
<span class="letter">ध</span>
<span class="letter">्</span>
<span class="letter">य</span>
<span class="letter">ो</span>
<hr/> Without

<br/>
<div id="spanDiv">
  <span class="letter">ध</span><span class="letter">्</span><span class="letter">य</span><span class="letter">ो</span>
</div>
<br/>
<hr/> Block
:<br/>

<div class="letter" id="letterDiv"></div>