CSSのライティングモードテキストレイアウト属性の使い方を詳しく解説

Writing-mode は、ページ上のテキストを垂直方向に配置するためによく使用されます。ここでは、CSS の Writing-mode テキスト レイアウト属性を使用する方法を体系的に見ていきます。これには、垂直方向の使用を示す古代の詩の例も含まれます。書き込みモードのテキストの配置

構文:

writing-mode : lr-tb | tb-rl

/* 关键字值 */
writing-mode: horizontal-tb;    /* 默认值 */
writing-mode: vertical-rl;   
writing-mode: vertical-lr;

/* 全局值-关键字inherit IE8+，initial和unset IE13才支持 */
writing-mode: inherit;   
writing-mode: initial;   
writing-mode: unset;

lr-tb : デフォルト値。オブジェクトのコンテンツは左から右に水平に流れ、次の行が前の行の下になります。 すべてのグリフは垂直かつ上向きです。このレイアウトはローマ言語で使用されます

tb-rl: 上-下、右-左。オブジェクト内のコンテンツは、上から下、右から左に垂直に流れます。次の垂直行は、前の垂直行の左側にあります。全角文字は垂直上向きに、欧文やカタカナなどの半角文字は時計回りに90度回転します。このレイアウトは東アジアの言語で一般的に使用されます

説明:
オブジェクトのコンテンツ ブロックの固有の書き込み方向を設定または取得します。西洋言語では、左右、上下の表記が使用されます。しかし、アジアの言語には、上から下、右から左への書き方があることがよくあります。
この属性の値が変更されると、text-align 属性とvertical-align 属性の機能も変更されます。
次の要素では、スタイル シート属性は継承できません:
BUTTON CAPTION INPUT INPUT type=button INPUT type=file INPUT type=password INPUT type=reset INPUT type=submit INPUT type=text ISINDEX OPTION TEXTAREA

この属性には、効果が蓄積されていきます。たとえば、親オブジェクトのこのプロパティの値が tb-rl に設定されている場合、子オブジェクトのこのプロパティの値を tb-rl に設定しても、子オブジェクトは回転しません。
オブジェクトの書き込みモード プロパティ設定がその親オブジェクトの設定と異なる場合、独自のレイアウトが取得されます。このようなオブジェクトの幅は、最初にレイアウトされた親の高さを使用して決定されます。
異なる書き込みモードのプロパティ値を持つオブジェクトを使用する場合、各オブジェクトに特定のサイズを指定すると、レイアウト全体をより適切に制御できるようになります。
このプロパティは、currentStyle オブジェクトに対して読み取り専用です。他のオブジェクトについては、読み取りと書き込みが可能です。
対応するスクリプト機能はwritingModeです。

テキストの縦方向のレイアウトの例:

.verticle-mode {   
    writing-mode: tb-rl;   
    -webkit-writing-mode: vertical-rl;         
    writing-mode: vertical-rl;   
}   
/* IE7比较弱，需要做点额外的动作 */
.verticle-mode {   
    *width: 120px;   
}   
.verticle-mode h4,   
.verticle-mode p {   
    *display: inline;   
    *writing-mode: tb-rl;   
}   
.verticle-mode h4 {   
    *float:rightright;   
}

htmlは次のとおりです:

<p class="verticle-mode">
    <h4>咏柳</h4>
    <p>碧玉妆成一树高，<br>万条垂下绿丝绦。<br>不知细叶谁裁出，<br>二月春风似剪刀。</p>
</p>

古代の詩の縦方向のレイアウトがわかります!

以上がCSSのライティングモードテキストレイアウト属性の使い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。