CSSでの書き込みモードの使い方を詳しく解説

Webページを作成するときにp{writing-mode:tb-rl;}を使用すると、風のページに表示される漢字がベタで正常に表示されますが、学校のネットワークを作成するときに、落書きボードに追加掲示板が安定することを願って *textrea{writing-mode:tb-rl;} というコードを書きましたが、その結果、文字はしっかりと配置されているのに、よく見ると文字が横になっているのです。漢字が時計回りに 90 度回転します。なぜこのようなことが起こるのか、またその対処方法を教えてください。

writing-mode 属性には、lr-tb と tb-rl の 2 つの値があります。前者はデフォルトの左-右、上-下であり、後者は上-下、右-左です。

例:

p{
writing-mode: tb-rl;
}

は方向植字と組み合わせることができます。

コード ボックスを実行します

<style>
p{
writing-mode: tb-rl;
}
</style>
<p>

CSS の箇条書き記号には、ディスク (実線のドット)、円 (白丸)、正方形 (実線の正方形)、10 進数 (アラビア数字)、小文字ローマ数字 (小文字のローマ数字)、大文字roman (大文字のローマ数字)、lower-alpha (小文字の英字)、upper-alpha (大文字の英字)、none (なし)。たとえば、リストの箇条書き (ul または ol) を次のように正方形に設定します。

li{
list-style: square;
}

さらに、list-style にはいくつかの値も含まれます。 list-style の直下に URL を記述します (「画像アドレス」)。項目リストの左外側パッチ (margin-left) がゼロに設定されている場合、list-style-position: 外側 (デフォルトは外側) の箇条書きは表示されないことに注意してください。残念ながら、上記の箇条書きはサイズを設定できないようで、点と四角は常に同じです。また、垂直方向の配置は設定できません

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 サイトの他の関連記事を参照してください。