在阿拉伯语单词中间插入HTML标记会中断单词连接（草书）

Question

来自维基百科：

  

Cursive（来自拉丁语curro，currere，cucurri，cursum，to run，hasten）是任何手写风格，专为手写快速书写笔记和字母而设计。在阿拉伯语，拉丁语和西里尔语书写系统中，单词中的字母是相互关联的，使单词成为一个复杂的笔画。

在我们想要用例如单个单词格式化时，在上述语言中<span>标签应用自定义css样式会破坏单词连接，所以有没有解决方法。

示例这是例如普通的阿拉伯语单词：

كتب

但是当我们想使用span标签为其他颜色的最后一个字母着色时得到：

因为前两个字母在一个标签中，而最后一个在另一个标签上。

我能做些什么来避免断字。

以下是完整的HTML：

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

Answer 1

我不确定是否有任何HTML方法可以执行此操作，但您可以通过在开始范围标记之前添加zero-width joiner Unicode character来解决此问题：

<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-我们可能还需要在关键字后添加‍才能将其连接到下一个字符。

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

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

3-有些字符在前面但不在后面接受尾。因此，我们必须将它们排除在接受尾巴之后。这是下一个字符的非连接字符的列表：اآدذرززو

4-最后，为了尊重搜索引擎和抓取工具，我建议在DOM准备就绪后使用JavaScript（jquery）替换关键字，以保持页面源代码的整洁。

这是我关于上述所有详细信息的最终代码：

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