ホームページ  >  記事  >  ウェブフロントエンド  >  cssのdirection属性とwriting-mode属性の違い

cssのdirection属性とwriting-mode属性の違い

黄舟
黄舟オリジナル
2017-06-20 10:05:081650ブラウズ

CSS では、writing-modedirection は両方ともテキストの表示方向を制御するために使用されますが、それらの間には違いがあります。

書き込みモードのパラメータには、lr-tb (左と右 - 上と下) tb-rl (上と下 - 右と左) が含まれます。西洋諸国では通常、書き込み方法は左と右 - 上と下です。 , しかし、たとえばアジア諸国では、古代中国の詩は右から左に書かれており、writing-mode 属性が反映されています。

例:

<div class="mode">  
  <h3>登鹳雀楼</h3>  
<p>白日依山尽,<br>黄河入海流.<br>欲穷千里目,<br>更上一层楼。</p>  
</div>
.mode{  
            writing-mode: tb-rl;      
        }  
        p{  
            font-size: 24px;  
        }

表示される効果:

cssのdirection属性とwriting-mode属性の違い

方向パラメータ ltr (左から右) および rtl (右から左)。

方向を使用して、テキストの書き込み方向が左から右か右から左かを制御します。

まず第一に、layout-flow: オブジェクトのテキストコンテンツのフローも制御します (ただし、この属性はwriting-mode属性で置き換えることができます)

CSSでは、writing-modeとdirectionは両方とも設定に使用されますテキストの表示方法にはいくつかの共通点がありますが、本質的な違いもあります。まずは 2 つの使い方を紹介しましょう:

writing-mode

文法:

writing-mode : lr-tb | tb-rl

パラメータ:
lr-tb: left-right、up-down
tb-rl: up-down、right-left

説明:
オブジェクトのコンテンツブロックの固有の書き込み方向を設定または取得します。西洋言語では、左から右、上から下の書き方が使用されます。しかし、アジアの言語には、上から下、右から左への書き方があることがよくあります。
この属性の値が変更されると、text-align属性とvertical-align属性の機能も変更されます。
対応するスクリプト機能はwritingModeです。私が書いた他の本もご覧ください。

direction

構文:

direction: ltr | rtl

パラメータ:

ltr : left-right
rtl : right-left

説明:

direction 属性は、テキストの書き込み方向が左から右かどうかを設定します。右から左へ行います。

上記の比較を通じて、左から右または右から左など、テキストの表示方法だけであれば、方向を使用することが多く、さまざまな書き方の習慣に対処するために、方向を使用することが多いと結論付けることができます。テキスト、特にからのテキスト 古代中国の文字を書く方法のように、縦書きで書くときは、書き込みモードを使用する必要があります。

以上がcssのdirection属性とwriting-mode属性の違いの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。