为什么在为单个阿拉伯字符设置样式时，阿拉伯字符会表现为单独的字符?

本文介绍了为什么在为单个阿拉伯字符设置样式时，阿拉伯字符会表现为单独的字符?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

限时送ChatGPT账号..

基本上我想要完成的是阿拉伯字符误用荧光笔！

为了便于理解，我将尝试解释类似的功能，但使用英语.

想象一个大小写错误的字符串，需要正确重写，于是用户在输入框中重写字符串并提交，js检查是否有任何字符没有更正，然后显示整个字符串将这些字母更正并以红色突出显示；

即[test ] 变成 [Test ]

为此，我检查了这些字符，如果检测到错误的字符，它会被 span 包围并显示为红色.

到目前为止一切顺利，现在，当我尝试为阿拉伯语复制此代码时，错误的字符与单词分离，使其不可读.

<小时>

演示:)，但似乎错误变得更糟.

作为一种笨拙的(但可能是唯一的)解决方法，您可以对阿拉伯字母使用上下文形式.这可以首先使用静态 HTML 标记和 CSS 进行测试，例如

بطﻠﺔ</span>

这里我在 span 元素内使用 ﺔ U+FE94 ARABIC LETTER TEH MARBUTA FINAL FORM 而不是普通的 U+0629 ARABIC LETTER TEH MARBUTA 和 ﻠ U+FEE0 ARABIC LETTER LAM MEDIALFORM 而不是 U+0644 阿拉伯字母 LAM.

要在 JavaScript 中实现这一点，您需要在将标记插入单词阿拉伯字母时，根据其在单词中的位置将分隔符(由标记引起)前后的字符更改为初始、中间或最终表示形式.

Basically what I am trying to accomplish is Arabic characters misuse highlighter !

To make it easy for understand I will try to explain a similar functionality but for English.

Imagine a string with wrong capitalization, and it is required to rewrite it correctly, so the user rewrites the string in an input box and submits, the js checks to see if any char wasn't corrected then it displays the whole string with those letter corrected and highlighted in red;

i.e. [test ] becomes [Test ]

To do so, I was checking those chars, and if faulty char was detected it get surrounded with span to be colored in red.

So far so good, now when I try to replicate this for Arabic language the faulty char gets separated from the word making it unreadable.

---

Demo: jsfiddle

function check1() {
  englishanswer.innerHTML = englishWord.value.replace(/t/, '<span style="color:red">T</span>');
}

function check2() {
  arabicanswer.innerHTML =
    arabicWord.value.replace(/\u0647/, '<span style="color:red">' +
      unescape("%u0629") + '</span>') +
    '<br>' + arabicWord.value.replace(/\u0647/, unescape('%u0629'));
}

fieldset {
  border: 2px groove threedface;
  border-image: initial;
  width: 75%;
}
input {
  padding: 5px;
  margin: 5px;
  font-size: 1.25em;
}
p {
  padding: 5px;
  font-size: 2em;
}

<fieldset>
  <legend>English:</legend>
  <input id='englishWord' value='test' />
  <input type='submit' value='Check' onclick='check1()' />
  <p id='englishanswer'></p>
</fieldset>

<fieldset style="direction:rtl">
  <legend>عربي</legend>
  <input id='arabicWord' value='بطله' />
  <input type='submit' value='Check' onclick='check2()' />
  <p id='arabicanswer'></p>
</fieldset>

Notice when testing the Arabic word, the spanned char [first preview] is separated from the rest of the word, while the non-spanned char [second preview] appears normally.

---

Edit: Preview for the problem [Chrome UA]

解决方案

This is a longstanding bug in WebKit browsers (Chrome, Safari): HTML markup breaks joining behavior. Explicit use of ZWJ (zero-width joiner) used to help (see question Partially colored Arabic word in HTML), but it seems that the bug has become worse.

As a clumsy (but probably the only) workaround, you could use contextual forms for Arabic letters. This can be tested first using just static HTML markup and CSS, e.g.

بطﻠ<span style="color:red">ﺔ</span>

Here I am using, inside the span element, ﺔ U+FE94 ARABIC LETTER TEH MARBUTA FINAL FORM instead of the normal U+0629 ARABIC LETTER TEH MARBUTA and ﻠ U+FEE0 ARABIC LETTER LAM MEDIAL FORM instead of U+0644 ARABIC LETTER LAM.

To implement this in JavaScript, you would need, when inserting markup into a word Arabic letters, change characters before and after the break (caused by markup) to initial, medial, or final representation form according to its position in the word.

这篇关于为什么在为单个阿拉伯字符设置样式时，阿拉伯字符会表现为单独的字符?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！