ホームページ > 記事 > ウェブフロントエンド > 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 サイトの他の関連記事を参照してください。