Почему арабские персонажи ведут себя как отдельные персонажи при стилизации одного арабского персонажа?

В основном то, что я пытаюсь выполнить, - арабские символы злоупотребляют маркером!

Чтобы было проще понять, я попытаюсь объяснить аналогичную функциональность, но для английского.

Представьте себе строку с неправильной заглавной буквой, и ее необходимо переписать правильно, поэтому пользователь перезаписывает строку в поле ввода и отправляет, js проверяет, не был ли исправлен какой-либо char, тогда он отображает целая строка с буквой, скорректированной и выделенной красным цветом;

то есть. [test] становится [ T est]

Чтобы сделать это, я проверял эти символы, и если был обнаружен дефект char, он окружен цветом, чтобы он был окрашен в красный цвет.

До сих пор так хорошо, теперь, когда я пытаюсь воспроизвести это для арабского языка, дефектный char получает отделенный от слова, делающий его нечитаемым.

Демо: 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>

Ответ 1

Это давняя ошибка в браузерах WebKit (Chrome, Safari): разметка HTML разрывает соединение. Явное использование ZWJ (стопорщик нулевой ширины), используемый для помощи (см. Вопрос Частично цветное арабское слово в HTML), но кажется, что ошибка стала хуже.

Как неуклюжий (но, вероятно, единственный) обходной путь, вы можете использовать контекстные формы для арабских букв. Сначала это можно протестировать, используя только статическую разметку HTML и CSS, например.

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

Здесь я использую внутри элемента span ة U + FE94 ARABIC LETTER TEH MARBUTA FINAL FORM вместо обычного U + 0629 ARABIC LETTER TEH MARBUTA и ل U + FEE0 ARABIC LETTER LAM MEDIAL FORM вместо U + 0644 ARABIC LETTER LAM.

Чтобы реализовать это в JavaScript, вам понадобится при введении разметки в слово арабские буквы, изменить символы до и после разрыва (вызванные разметкой) на начальную, медиальную или конечную форму представления в соответствии с ее положением в слове.

Ответ 2

Я знаю, что это решение, которое я вам даю, не очень изящно, но это работает, так скажите мне, что вы думаете:

<script>
    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("%u0640%u0629")+'</span>')+
    '<br>'+arabicWord.value.replace(/\u0647/,unescape('%u0629'));
}
</script>

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

Ответ 3

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

Используйте ufe94 вместо u0629

arabicWord.value.replace(/\u0647/,'<span style="color:red">'+ unescape("%ufe94")+'</span>')+

Ответ 4

Как отметил Jukka K. Korpela, это в основном ошибка в большинстве браузеров WebKit (хром, сафари и т.д.).

Простой взлом, отличный от TAMDEED char или получение контекстных форм для арабских букв, заключался бы в том, чтобы поставить нулевой ширины-столяр (&zwj; или ‍) до/после письмо, которое вы хотите рассматривать как единый арабский ligature - два символа, составляющих еще один. например

<p>عرب&#x200d;<span style="color: Red;">&#x200d;ي</span></p>

demo: jsfiddle
см. также отчет webkit bug.

Ответ 5

вместо использования диапазона используйте элемент HTML5 ruby и добавьте символ арабского татуировки "" (U + 0640), вы знайте символ, который расширяет буквы (shift + j).

поэтому ваш код будет выглядеть следующим образом:

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

и вот обновленная скрипка: http://jsfiddle.net/fjz5C/28/

Ответ 6

Я бы постарался добавить лигатуру /taweel персонажу до и после. На самом деле это не решит проблему, но это будет трудно заметить, так как она заставит лам в медиальной форме и таа-марбуту в окончательную форму. Если это сработает, это будет намного менее хрупким, чем фактически преобразование букв в их медиальные или окончательные формы.

У вас, похоже, есть и другие проблемы. Я отправился на ваш сайт и записал опечатку хадхи, просто посмотрел, что с ним делать, и это заставило га отключиться в обоих словах, что не имеет смысла, если единственной проблемой являются теги форматирования. (Я использую Firefox на Mac.)

Удачи!