14

基本的に私が達成しようとしているのは、アラビア語の文字が蛍光ペンを誤用することです!

理解しやすいように、同様の機能を英語で説明します。

大文字と小文字が間違っている文字列を想像してください。正しく書き直す必要があるため、ユーザーは入力ボックスで文字列を書き直して送信します。js は、修正されていない文字があるかどうかを確認し、それらの文字で文字列全体を表示します。修正され、赤で強調表示されました。

すなわち [テスト] は[テスト]になります

そうするために、私はそれらの文字をチェックしていました. 不良文字が検出された場合は、スパンで囲まれて赤く着色されます.

これまでのところ、これをアラビア語で複製しようとすると、欠陥のある文字が単語から分離されて読めなくなります。

デモ：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>

アラビア語の単語をテストすると、スパンされた文字 [最初のプレビュー] が単語の残りの部分から分離され、非スパンの文字 [2 番目のプレビュー] が正常に表示されることに注意してください。

編集: 問題のプレビュー [Chrome UA]

ここに画像の説明を入力

4

6 に答える 6

3

これは、WebKit ブラウザー (Chrome、Safari) の長年のバグです: HTML マークアップが結合動作を壊します。以前は ZWJ (ゼロ幅結合子) の明示的な使用が役に立ちました ( HTML 内の部分的に色付けされたアラビア語の単語 の質問を参照) が、バグが悪化しているようです。

不器用な (しかしおそらく唯一の) 回避策として、アラビア文字に文脈上の形式を使用することができます。これは、最初に静的な HTML マークアップと CSS だけを使用してテストできます。

بطﻠ&lt;span style="color:red">ﺔ&lt;/span>

ここでは、span要素内で、通常の U+0629 ARABIC LETTER TEH MARBUTA の代わりに ﺔ U+FE94 ARABIC LETTER TEH MARBUTA FINAL FORM を使用し、U+0644 ARABIC LETTER LAM の代わりに ﻠ U+FEE0 ARABIC LETTER LAM MEDIAL FORM を使用しています。

これを JavaScript で実装するには、単語のアラビア文字にマークアップを挿入するときに、区切りの前後 (マークアップが原因) の文字を、単語内の位置に応じて頭文字、中間文字、または末尾文字に変更する必要があります。

于 2012-10-15T05:36:47.940 に答える
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>
于 2012-10-14T21:52:40.787 に答える
1

Jukka K. Korpelaが指摘したように、これはほとんどのWebKit ベースのブラウザー(chrome、safari など) のバグです。

TAMDEED char 以外の単純なハックまたはアラビア文字のコンテキスト形式の取得は、単一のアラビア語合字として扱いたい文字の前後にゼロ幅ジョイナー(&zwj;または) を配置することです。2 つの文字が別の文字を構成します。例えば &#x200d;

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

demo: jsfiddle Webkitバグレポート
も参照してください。

于 2012-12-01T09:43:21.600 に答える
1

Beginning 、 Middle 、 End 、および Isolated の文字を処理する必要があります。完全なリストはこちらから入手できます

ufe94の代わりに使用u0629

arabicWord.value.replace(/\u0647/,'<span style="color:red">'+ unescape("%ufe94")+'</span>')+
于 2012-10-14T22:04:33.207 に答える
0

span の代わりに、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/

于 2012-10-14T22:31:19.017 に答える
0

文字の前後に合字/タウィールを追加してみます。実際に問題が解決するわけではありませんが、ラメが強制的に内側の形になり、ター マルブタが最終的な形になるため、気づきにくくなります。それが機能する場合、実際に文字を中間または最終的な形式に変換するよりもはるかに脆弱ではありません.

しかし、あなたは他の問題を抱えているようです。私はあなたのウェブサイトに行き、hadhaのつづりを間違えて入れました. それがどうなるかを確認するためだけに. (私は Mac で Firefox を使用しています。)

ここに画像の説明を入力

幸運を！

于 2012-10-16T18:43:56.707 に答える