6

HTML5<bdi>タグの目的は、双方向テキストをそのコンテキストから分離することです。そしてそれがまさに私が探しているものです。

左から右へのユーザー名は次のように表示されます。

Welcome, Generic User. [Logout]

右から左へのユーザー名を使用すると、次のようなひどいことになります。

Welcome, [tougoL] .resU cireneG

または、コンテキストによってはさらに悪いことに、(ユーザーの名前だけでなく)周囲のすべてを逆方向に表示します。

問題は、まだタグをサポートしているブラウザがない<bdi>ことです。それで、私はさまよっていました。それをシミュレートする方法はありますか?どのHTMLタグがそれを分離することもできますか?私は知っ<span>ていますが、知り<div>ません。

すべてのBIDI文字を削除したくはありませんが、私の見方では、サイトを適切に表示することの重要性>双方向言語のユーザーが参加する権利。

4

2 に答える 2

4

右から左へのユーザー名では、このひどいものになります

すべきではありません。(例)アラビア語のユーザー名のテキストは右から左にレンダリングされますが、その周りのラテン語のテキストの流れには影響しません。

あなたが考えているかもしれない問題は、ユーザー名にUnicode BDO(双方向オーバーライド)制御文字が含まれている場合です。これは、それに続くすべてのインラインテキストに影響します。これは、テキストをHTMLにテンプレート化するWebサイトにとっては悪いことです。

おそらく、この問題の最も簡単な解決策は、通常のASCII文字(0x00–0x1F)とUnicode文字の両方の制御文字を削除するための入力フィルタリングです。このノートでは、マークアップでの使用に適さないものとしてUnicodeおよびW3で指定された文字のグループがあり、これらのWebアプリケーションは一般的にデータから削除する必要があります。これには、BDO文字や、独自のテキストの範囲外に奇妙な効果が漏れる可能性のある他のいくつかの文字が含まれています。

于 2011-11-04T17:00:45.700 に答える
4

質問の文字列は、ユーザー名文字列に制御文字が含まれていない限り、間違った表示順序をトリガーしませんが、たとえば、フォームのメッセージ

User (N badges) wrote:

Userがアラビア文字の名前、たとえばأحمدに置き換えられ、Nが数字、たとえば3に置き換えられた場合、レンダリングは次のようになります。

أحمد(3つのバッジ)は言った:

技術的には、これはバグではありません。これは、Unicodeの双方向性ルールに従います。アラビア文字の強い右から左(RTL)の方向性は、括弧のように弱い方向性を持つ文字に影響します。もちろん、実際にはすべて間違っています。一般的に左から右のコンテキストでRTL文字を含む可能性のある文字列は、保護して分離する必要があります。HTMLドキュメントでは、これを行うための3つの方法があります。

  • 文字レベル:文字列の前に制御文字U + 202B(右から左への埋め込み、RLE)を使用し、文字列の後にU + 202C(ポップ方向フォーマット、PDF)を使用します。&#x202b;HTMLでは、とを使用できます&#x202c;。これはIE9でサポートされていますが、他のほとんどのブラウザーではサポートされていません。
  • マークアップレベル:<bdi>マークアップを使用します。前述のように、ブラウザではまだサポートされていません。
  • スタイルシート:を使用しますunicode-bidi: embed。これは通常、最新のブラウザでサポートされています。

スタイルシートアプローチとマークアップアプローチを組み合わせることができます。そうすることは論理的であり、将来のブラウザでは、この二重のアプローチは、スタイルシートが無効になっている場合でも機能します。

<script>
document.createElement('bdi');
</script>
<style>
bdi { unicode-bidi: bidi-override; }
</style>
...
<bdi>أحمد</bdi> (3 badges) wrote:

スクリプトコードは、古いバージョンのIEに<bdi>要素を認識させ、スタイルが要素に影響を与えるようにするためのものです。もちろん、これはスクリプトが無効になっている場合は失敗するため<span>、クラスで使用する方が少し安全ですが、それでも内部でラップすることができます<bdi>。したがって、代替案は

<style>
.bdi { unicode-bidi: bidi-override; }
</style>
...
<bdi><span class=bdi>أحمد</span></bdi> (3 badges) wrote:
于 2011-12-17T17:29:41.843 に答える