質問の文字列は、ユーザー名文字列に制御文字が含まれていない限り、間違った表示順序をトリガーしませんが、たとえば、フォームのメッセージ
User (N badges) wrote:
Userがアラビア文字の名前、たとえばأحمدに置き換えられ、Nが数字、たとえば3に置き換えられた場合、レンダリングは次のようになります。
أحمد(3つのバッジ)は言った:
技術的には、これはバグではありません。これは、Unicodeの双方向性ルールに従います。アラビア文字の強い右から左(RTL)の方向性は、括弧のように弱い方向性を持つ文字に影響します。もちろん、実際にはすべて間違っています。一般的に左から右のコンテキストでRTL文字を含む可能性のある文字列は、保護して分離する必要があります。HTMLドキュメントでは、これを行うための3つの方法があります。
- 文字レベル:文字列の前に制御文字U + 202B(右から左への埋め込み、RLE)を使用し、文字列の後にU + 202C(ポップ方向フォーマット、PDF)を使用します。
‫
HTMLでは、とを使用できます‬
。これは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: