CSS の方向と unicode-bidi の比較-CSSチュートリアル-php.cn

CSS の方向と unicode-bidi の比較

黄舟

リリース： 2017-06-20 10:39:19

オリジナル

2202 人が閲覧しました

多言語のページを作成する場合、アラビア語とヘブライ語に触れたことのある学生は、五四運動以前の執筆順序も右から左であったことを含め、執筆方向の重要性を理解する必要があります。 CSS では、unicode-bidi 属性と direction 属性により、HTML または XML テキストのレンダリング方向が決定されます。

direction

方向属性には 3 つの値があります。

親要素の設定を使用して継承します

ltr デフォルト値、左から右、左から右

rtl 右から左右から左へ

デフォルトの書き込み順序は左から右で、特別な設定はありませんが必須ですが、アラビア語の場合は右から左へ、この時正しく表示するには方向属性を設定する必要があります

ブラウザの書き換えを防止text-alignデフォルト設定にしましょう

<p style="direction:rtl;text-align: initial;">
    طهيس يس تآخت تهات يس وريتتآن فروم ريغت تو لآفت تهات يس وسآد    
</p>

ログイン後にコピー

もあります対応するhtml属性設定可能なdir

<p dir="rtl" dtyle="text-align: initial;">
    طهيس يس تآخت تهات يس وريتتآن فروم ريغت تو لآفت تهات يس وسآد    
</p>

ログイン後にコピー

direction属性 text-alignとは異なり、後者は方向であり、書き順は変わりません

<p style="direction: rtl;text-align: initial;">1 2 3 4 5 6。</p>
<p style="text-align:right;">1 2 3 4 5 6。</p>

ログイン後にコピー

unicode-bidi

。方向性、unicode の書き方の問題は、direction で対応できるようですが、bidi は何をするのでしょうか？

ブラウザは通常、lang 属性または特別なフォントファミリーに基づいて書き込み方向を決定しますが、文に両方向のコピーライティングが含まれる場合は、unicode-bidi 属性を使用する必要があります

unicode-bidi には 3 つの広範なサポートがあります。

normal のは元の順序で使用されます

embed はインライン要素に作用し、direction 属性の値は埋め込み層を指定し、暗黙的な並べ替えはオブジェクト内で実行されます

bidi-override は値に従って厳密に並べ替えます方向属性の。暗黙の双方向操作ルールを無視してください

正直、この説明は理解できません。例を見てみましょう

<p style="direction:rtl;text-align: initial;">this is a test</p>
<p style="direction:rtl;unicode-bidi:bidi-override;text-align: initial;">
    this is a test
</p>
<p style="direction:rtl;unicode-bidi:bidi-override;text-align: initial;">
    this <span style="unicode-bidi:embed;">is a</span> test
</p>

ログイン後にコピー

最初の行は単純な右揃えで、テキストは逆に書かれません。後ほど説明します)

2行目の2つの属性は、右から左に書くだけでなく、実際には右から左に書くという本格的な書き方です

3行目の素晴らしい効果です。行は 2 行目の基礎にありますスタイル unicode-bidi:embed が追加されました。逆方向に書かれることはなくなり、通常の書き順で書かれるようになります

方向を設定するだけでアラビア語の単語が正しく表示されるのはなぜですか、しかし、英語の単語は右から左に書くだけですか？ unicode-bidi:bidi-override; が設定されている場合にのみ機能します。これはアラビア語に自動的に機能します。ブラウザでは単一の数字と文字を使用できません。言語の決定には rtl のデフォルト設定が使用され、言語が unicode-bidi でのみ書き換えられます。宣言時にアラビア語を指定すると、ページは自動的に順序を書き込みます rtl