在阿拉伯语单词中间插入HTML标记会中断单词连接(草书)
来自维基百科:
草书(来自拉丁语curro,currere,cucurri,cursum,to run,hasten)是任何手写风格,专为手工快速书写笔记和字母而设计.在阿拉伯语,拉丁语和西里尔语书写系统中,单词中的字母是相互关联的,使单词成为一个复杂的笔画.
在上面的语言中,当我们想要使用例如<span>标签来格式化单个单词以应用自定义css样式时,它会破坏单词连接,所以有任何解决方案.
例如,这是正常的阿拉伯语单词:
كتب
但是当我们想使用span标签为其他颜色的最后一个字母着色时得到:
因为前两个字母在一个标签中,而最后两个字母在另一个标签中.
我能做些什么来避免断字.
这是完整的HTML:
<p>??<span style="color: Red;">?</span></p>
mer*_*tor 28
我不确定是否有任何HTML方法可以执行此操作,但您可以通过在开始span标记之前添加零宽度joiner Unicode字符来修复它:
<p>??‍<span style="color: Red;">?</span></p>
当然,您可以使用实际的Unicode字符而不是HTML字符实体,但这在此处不可见.或者你可以使用更漂亮的‍实体.
在这里它是行动的(使用隐形<b>标签,因为我不能在这里做颜色),没有木匠:
كت ب
和木匠一起:
كت ب
据我所知,它应该在没有木工的情况下工作,并且它在某些浏览器中有效,但显然不是全部.
- 它主要是webkit浏览器(chrome,safari等)的问题,尝试在内跨区中的字母和外跨区中的单词之后添加**两个**`‍`现在它在chrome23中可以正常工作.例如[jsfiddle](http://jsfiddle.net/noonon/esz4S/2/) (3认同)
更新2020/5
\nGoogle Chrome（检查版本81.0.4044.138）和Firefox（76.0.1）已经解决了渲染阿拉伯语和波斯语单词时的这个问题，不再需要手动处理这种情况。只需将关键字包装起来即可，<span style="color:red">Keyword</span>对于连接字符和非连接字符都可以很好地工作。
因此，您可能看不出下面正确和错误示例之间的区别：
\n主帖：
\n在接受答案 7 年后，我想添加一个包含更多实用细节的新答案，因为我的母语是波斯语。我假设我们想要替换长单词中的关键字。这个答案考虑了以下细节：
\n1-有时仅添加到前一个字符是不够的，‍因为下一个字符还应该有一个尾部来完成连接。
body{font-size:36pt;}\nspan{color:red}Wrong: \xd9\x85\xda\xa9‍<span>\xd8\xa7\xd9\x86\xdb\x8c\xda\xa9</span>\n<br>\nCorrect: \xd9\x85\xda\xa9‍<span>‍\xd8\xa7\xd9\x86\xdb\x8c\xda\xa9</span>2-我们可能还需要在关键字后面添加 \xe2\x80\x8d 以将其连接到下一个字符。
\nbody{font-size:36pt;}\nspan{color:red}Wrong: \xd9\x85\xda\xa9‍<span>‍\xd8\xa7\xd9\x86\xdb\x8c\xda\xa9</span>\xdb\x8c\n<br>\nCorrect: \xd9\x85\xda\xa9‍<span>‍\xd8\xa7\xd9\x86\xdb\x8c\xda\xa9‍</span>‍\xdb\x8c3-有些字符在前面接受尾部，但在后面不接受尾部。所以我们必须排除它们接受尾部。这是与下一个字符的非连接字符的列表： \xd8\xa7 \xd8\xa2 \xd8\xaf \xd8\xb0 \xd8\xb1 \xd8\xb2 \xda\x98 \xd9\x88
\n4-最后，为了尊重搜索引擎和抓取工具，我建议在 DOM 准备好后使用 javascript (jquery) 替换关键字，以保持页面源代码干净。
\n这是我关于上述所有细节的最终代码：
\n$(document).ready(function(){\n \n var tail="\\u200D";\n var keyword="\xd8\xb3\xd8\xaa\xd8\xb1";\n \n $(".searchableContent").each(function(){\n var htm=$(this).html();\n \n /*\n preserve keywords which have space both before and after \n with a temp sign say #fullHolder#\n */\n htm=htm.split(\' \'+keyword+\' \').join(\' #fullHolder# \');\n \n /*\n preserve keywords which have only space after \n with a temp sign say #preHolder#\n */\n htm=htm.split(keyword+\' \').join(\'#preHolder#\'+\' \');\n \n /*\n preserve keywords which have only space before \n with a temp sign say #nextHolder#\n */\n htm=htm.split(\' \'+keyword).join(\' \'+\'#nextHolder#\');\n \n /*\n replace remaining keywords with marked up span.\n Add tail to both side of span to make sure it is\n connected to both letters before and after\n */\n htm=htm.split(keyword).join(tail+\'<span style="color:#ff0000">\'+tail+keyword+tail+\'</span>\'+tail);\n \n //Deal #preHolder# by adding tail only before the keyword\n htm=htm.split(\'#preHolder#\'+\' \').join(tail+\'<span style="color:#ff0000">\'+tail+keyword+\'</span>\'+\' \');\n \n //Deal #nextHolder# by adding tail only after the keyword \n htm=htm.split(\' \'+\'#nextHolder#\').join(\' \'+\'<span style="color:#ff0000">\'+keyword+tail+\'</span>\'+tail);\n \n //Deal #fullHolder# by adding markup only without tail\n htm=htm.split(\' \'+\'#fullHolder#\'+\' \').join(\' \'+\'<span style="color:#ff0000">\'+keyword+\'</span>\'+\' \');\n \n //Remove all possible combination of added tails to non-connecting characters\n var nonConnectings=[\'\xd8\xa7\',\'\xd8\xa2\',\'\xd8\xaf\',\'\xd8\xb0\',\'\xd8\xb1\',\'\xd8\xb2\',\'\xda\x98\',\'\xd9\x88\'];\n \n for (x = 0; x < nonConnectings.length; x++) {\n htm=htm.split(nonConnectings[x]+tail).join(nonConnectings[x]);\n htm=htm.split(nonConnectings[x]+\'<span style="color:#ff0000">\'+tail).join(nonConnectings[x]+\'<span style="color:#ff0000">\');\n htm=htm.split(nonConnectings[x]+\'</span>\'+tail).join(nonConnectings[x]+\'</span>\');\n }\n \n $(this).html(htm);\n })\n})div{font-size:26pt}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>\n<div class="searchableContent">\n\xd8\xb3\xd8\xaa\xd8\xb1\xd9\x88\xd9\x86 - \xd8\xa8\xd8\xb3\xd8\xaa\xd8\xb1\xdb\x8c - \xd8\xa2\xd8\xb3\xd8\xaa\xd8\xb1 - \xd8\xa8\xd8\xb3\xd8\xaa\xd8\xb1 - \xd8\xa7\xd8\xb3\xd8\xaa\xd8\xb1\xd8\xa7\xd8\xad\xd8\xaa\n</div>