CSS テキストの方向_html/css_WEB-ITnose

× directory [1] text-align [2] writing-mode [3] dir [4] Direction [5] unicode-bidi

前の単語

一般的に、通常の Web ページのテキストの方向は、上から上、下、左から右へ。実際、テキストの方向を設定するための属性は以前に詳しく紹介しました。CSS スタイルの設定に特に使用される HTML のグローバル属性があります。テキストの方向には、方向と Unicode および書き込みモードが含まれます。この記事では、Webページのテキストの方向の設定方法を詳しく紹介します

text-align

水平方向の配置の実装は、要素内のテキストの水平方向の配置に影響します

値: left | center | right | 継承

初期値: left

適用対象: ブロックレベルの要素 (block および inline-block を含む)

//left: 1 23 456//right: 1 23 456

writing- mode

Writing-mode はもともと IE のプライベートプロパティで、元のプロパティは lr-tb (left-right、top-bottom) と tb-rl (top-bottom、right-left) でした。その中でも、haslayout をトリガーするために writing-mode:tb-rl がよく使用されます。ただし、W3C が writing-mode 属性を標準化した後、その属性値も変更されました

値：horizo​​ntal-tb |vertical-lr

適用対象：table 要素を除くすべての要素

継承: はい

[注] Safari とモバイル IOS と Android は、-webkit- プレフィックスを追加する必要があります。IE ブラウザーは独自のプライベート属性値のみをサポートします

[注] writing-mode を設定する場合、text-align 属性は無効

dir

dir は HTML のグローバル属性であり、特にテキストの方向を設定するために使用されます

値: auto

//ltr: 1 23 456//rtl: 456 23 1

direction

方向ですテキストの方向を設定するCSSスタイル

値: ltr | rtl | respect

初期値: ltr

適用対象: すべての要素

継承: Yes

[注] 方向スタイルをインラインで動作させたいelements には、unicode-bidi style の関連設定が必要です

【注意】方向スタイルを設定する場合、HTML 要素の global 属性 dir は無効になります

ltr: 从左到右(left to right)rtl: 从右到左(right to left)

//ltr: 1 23 456//rtl: 456 23 1

unicode-bidi

Unicode- bidi は、テキストの方向を処理するためのより堅牢な方法です

値: embed | isolate | isolate-override

適用対象: すべての要素

継承: なし

[注意] フレックスボックスモデルに適用される unicode-bidi 属性には問題があります。スケーラブルコンテナに匿名のスケーラブル項目が 1 つだけ含まれている場合を除き、それ以外の場合は無効です。 plaintext は実験的な属性値であり、ブラウザのサポートはほとんどありません

//display:inline-block/blocknormal/embed: 456 23 1bidi-override: 654 32 1//display:inlinenormal:1 23 456embed: 456 23 1bidi-override: 654 32 1

[注] unicode-bidi 属性は dir が rtl であるか、direction が rtl の場合にのみ機能します