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

Question

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

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

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

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

كتب

но когда мы хотим закрасить последнюю букву другим цветом, используя тег span, получим следующее:

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

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

Вот полный HTML-код:

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

Answer 1

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

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

Конечно, вы можете использовать реальный символ Unicode вместо сущности символа HTML, но здесь это не будет видно.Или вы можете использовать более симпатичную ‍ сущность.

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

كت ب

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

كت‍ ب

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

Answer 2

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

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

body{font-size:36pt;}
span{color:red}

Wrong: مک&zwj;<span>انیک</span>
<br>
Correct: مک&zwj;<span>&zwj;انیک</span>

2- Возможно, нам также понадобится добавить & zwj; после ключевого слова, чтобы подключить его к следующему символу.

body{font-size:36pt;}
span{color:red}

Wrong: مک&zwj;<span>&zwj;انیک</span>ی
<br>
Correct: مک&zwj;<span>&zwj;انیک&zwj;</span>&zwj;ی

3- Есть некоторые символы, которые принимают хвост до, но не после. Поэтому мы должны исключить их из принятия хвоста за ними. Это список несвязанных символов к следующим символам: ا آ د ذ ر ز ژ و

4- Наконец, чтобы уважать поисковые системы и скребки, я рекомендую использовать javascript (jquery) для замены ключевых слов после того, как DOM будет готов сохранить исходный код страницы чистым.

Это мой последний код в отношении всех деталей выше:

$(document).ready(function(){
		
  var tail="\u200D";
  var keyword="ستر";
  
  $(".searchableContent").each(function(){
    var htm=$(this).html();
   
    /*
    preserve keywords which have space both before and after 
    with a temp sign say #fullHolder#
    */
    htm=htm.split(' '+keyword+' ').join(' #fullHolder# ');
    
    /*
    preserve keywords which have only space after 
    with a temp sign say #preHolder#
    */
    htm=htm.split(keyword+' ').join('#preHolder#'+' ');
    
    /*
    preserve keywords which have only space before 
    with a temp sign say #nextHolder#
    */
    htm=htm.split(' '+keyword).join(' '+'#nextHolder#');
    
    /*
    replace remaining keywords with marked up span.
    Add tail to both side of span to make sure it is
    connected to both letters before and after
    */
    htm=htm.split(keyword).join(tail+'<span style="color:#ff0000">'+tail+keyword+tail+'</span>'+tail);
    
    //Deal #preHolder# by adding tail only before the keyword
    htm=htm.split('#preHolder#'+' ').join(tail+'<span style="color:#ff0000">'+tail+keyword+'</span>'+' ');
    
    //Deal #nextHolder# by adding tail only after the keyword   
    htm=htm.split(' '+'#nextHolder#').join(' '+'<span style="color:#ff0000">'+keyword+tail+'</span>'+tail);
    
    //Deal #fullHolder# by adding markup only without tail
    htm=htm.split(' '+'#fullHolder#'+' ').join(' '+'<span style="color:#ff0000">'+keyword+'</span>'+' ');
				
   //Remove all possible combination of added tails to non-connecting characters
   var nonConnectings=['ا','آ','د','ذ','ر','ز','ژ','و'];
   
   for (x = 0; x < nonConnectings.length; x++) {
    htm=htm.split(nonConnectings[x]+tail).join(nonConnectings[x]);
    htm=htm.split(nonConnectings[x]+'<span style="color:#ff0000">'+tail).join(nonConnectings[x]+'<span style="color:#ff0000">');
    htm=htm.split(nonConnectings[x]+'</span>'+tail).join(nonConnectings[x]+'</span>');
   }
   
   $(this).html(htm);
  })
})

div{font-size:26pt}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="searchableContent">
سترون - بستری - آستر - بستر - استراحت
</div>