Вставка HTML-тега в середине арабского слова прерывает соединение слов (курсив)

Из Википедии:

Курсив (от латинского curro, currere, cucurri, cursum, чтобы бегать, спешить) - это любой стиль почерка, который предназначен для написания заметок и писем быстро. В арабских, латинских и кириллических системах письма буквы в одном слове соединяются, делая слово одним единственным сложным штрихом.

В вышеперечисленных языках, когда мы хотим отформатировать одно единственное слово, например. <span>, чтобы применить пользовательский стиль CSS, он разбивает словосочетание, так что есть ли какое-либо решение для этого.

Например, это, например, нормальное арабское слово:

كتب

но когда мы хотим покрасить последнее письмо другим цветом с помощью тега span, получим следующее: enter image description here

потому что первые две буквы находятся в одном теге, а последний - в другом, чтобы покрасить его.

Есть ли что-то, что я могу сделать, чтобы избежать разрывов слов.

Вот полный html:

<p>كت<span style="color: Red;">ب</span></p>

Ответы

Ответ 1

Я не уверен, есть ли какой-либо HTML-способ для этого, но вы можете исправить это, добавив символ нулевой ширины Unicode перед тегом вскрытия:

<p>كت&#x200d;<span style="color: Red;">ب</span></p>

Разумеется, вы можете использовать фактический символ Юникода вместо символьного символа HTML, но это не будет видно здесь. Или вы можете использовать более красивый объект &zwj;.

Здесь он находится в действии (с использованием невидимого тега <b>, так как я не могу сделать цвет здесь), без столяра:

كت ب

и со столяром:

كت‍ب

Он должен работать без столяра, насколько я понимаю, хотя это и происходит в некоторых браузерах, но явно не все из них.

Ответ 2

После 7 лет принятого ответа я хотел бы добавить новый ответ с более практическими деталями, поскольку мой родной язык - фарси. Я предполагаю, что мы хотим заменить ключевое слово в длинном слове. Этот ответ учитывает следующие детали:

1- Иногда недостаточно добавить &zwj; только к предыдущему символу, поскольку следующий символ также должен иметь хвост для завершения соединения.

body{font-size:36pt;}
span{color:red}
Wrong: مک&zwj;<span>انیک</span>
<br>
Correct: مک&zwj;<span>&zwj;انیک</span>