在阿拉伯语单词中间插入 HTML 标记会断开单词连接(草书) [英] Inserting HTML tag in the middle of Arabic word breaks word connection (cursive)
问题描述
来自维基百科:
草书(来自拉丁文 curro、currrere、cucurri、cursum、to run、hasten)是任何一种手写体，专为快速手写笔记和信件而设计.在阿拉伯文、拉丁文和西里尔文书写系统中，单词中的字母是相连的，使一个单词成为一个复杂的笔画.
Cursive (from Latin curro, currere, cucurri, cursum, to run, hasten) is any style of handwriting that is designed for writing notes and letters quickly by hand. In the Arabic, Latin, and Cyrillic writing systems, the letters in a word are connected, making a word one single complex stroke.
在上述语言中，当我们想用例如格式化单个单词时<span> 标签应用自定义 css 样式会破坏单词连接，所以有什么解决方案.
In the above languages when we want to format one single word with e.g. <span> tag to apply custom css style it breaks word conection, so is there any solution for this.
例如这是正常的阿拉伯语单词:
كتب
但是当我们想使用 span 标签用其他颜色给最后一个字母上色时，得到这个:example this is for example normal arabic word:
كتب
but when we want to color last letter in other color using the span tag get this:因为前两个字母在一个标签中，最后一个字母在另一个标签中以对其进行着色.
because first two letter are in one tag and last is in other to color it.
我可以做些什么来避免断字.
Is there something I can do to avoid word breaks.
这里是完整的 html:
<p>كت<span style="color: Red;">ب</span></p>
推荐答案
我不确定是否有任何 HTML 方法可以解决此问题，但您可以通过添加 零宽度连接符 Unicode 字符 在开始 span 标记之前:
I'm not sure if there's any HTML way to do it, but you can fix it by adding a zero-width joiner Unicode character before the opening span tag:
<p>كت‍<span style="color: Red;">ب</span></p>
当然，您可以使用实际的 Unicode 字符而不是 HTML 字符实体，但这在这里不可见.或者您可以使用更漂亮的 ‍ 实体.
You can use the actual Unicode character instead of the HTML character entity, of course, but that wouldn't be visible here. Or you can use the prettier ‍ entity.
这里正在运行(使用一个不可见的 <b> 标签，因为我不能在这里做颜色)，没有加入者:
Here it is in action (using an invisible <b> tag, since I can't do color here), without the joiner:
和加入者:
据我所知，它应该在没有joiner的情况下工作，虽然在某些浏览器中可以，但显然不是所有浏览器.
It's supposed to work without the joiner as far as I understand it, though, and it does in some browsers, but clearly not all of them.
这篇关于在阿拉伯语单词中间插入 HTML 标记会断开单词连接(草书)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
