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

構文:

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は次のとおりです:

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

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

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