CSSのwriting-mode属性の書き込み方向と互換性のある書き込み方法を詳しく解説（図）

writing-modeの紹介

Cssのwriting-modeは中国語や日本語などの正方形のテキスト向けに設計されていると言われており、この属性によりテキストを右から配置することができます。左へ、または上から上へのレイアウト。

writing-modeは

.wrtmod{
    margin:15px;
    padding:15px;
    border:1px solid #bababa;
    background:#f1f1f1;
    font-size:15px;
    writing-mode:vertical-rl;
    writing-mode: tb-rl;
}

を使用します。効果は次のとおりです:

Chromeブラウザ:

IEブラウザ:

writing-modeの属性値は次のとおりです:horizo​​ntal-tb 、vertical-lr、vertical-rl、IE での対応する値は、lr-tb、tb-lr、tb-rl です。

horizo​​ntal-tb がデフォルト値です。 Writing-mode の属性値はダッシュで区切られ、xx-OO と記録できます。horizo​​ntal-tb はテキストが水平に配置されることを意味し、行が上下に配置されることを意味します。が上下に配置され、行が右から左に配置されます。 IEのlr-tbはテキストが左から上に、行が上から下に配置されることを意味し、tb-rlはテキストが上から下に、行が上から左に配置されることを意味します。 lrはleftとright、tbはtopとbottomの略です。 IE上ではbt-rl、lr-btなどの属性値も利用でき、配置方法がより豊富になります。ただし、互換性を確保するため、writing-mode 属性ではこれら 3 つの配置のみを使用できます。

上のスクリーンショットから、writing-mode はテキストの書き込み方向を変更するだけでなく、コンテナのレイアウトも変更することがわかります。 Chrome および FireFox ブラウザの div にはインライン機能があります

IE8 ブラウザでは、div 全体が水平から垂直に変更され、適応性の高い機能が備わっています。

ライティングモードの目的は、通常、一部の詩の縦表示やレトロ効果のページで使用されます。ただし、IE8 には他のブラウザとは異なり、インライン機能がないことに注意してください。 IE で効果を得るには、inline-block を表示する必要があります。

.wrtmod{
    margin:15px;
    padding:15px;
    border:1px solid #bababa;
    background:#f1f1f1;
    font-size:15px;
    writing-mode:vertical-rl;
    writing-mode:tb-rl;
    text-align:center;
    line-height:32px;
    letter-spacing: 12px;
    display: inline-block;
 
}
.wrtmod:first-line{
    font-weight:bold;
    color:#0C58A7;
    font-size:18px;
}
 
<div class="wrtmod">
    静夜思<br/>
    窗前明月光<br/>
    疑是地上霜<br/>
    举头望明月<br/>
    低头思故乡
</div>

writing-mode 書き込みモードを変更した後、text-align:center を使用して上下の中央揃えを実現します。上記の効果は、letter-spacing と ::first-line 擬似クラスを write-mode と組み合わせて使用​​し、古代の詩のような書き込み効果を実現します。

以上がCSSのwriting-mode属性の書き込み方向と互換性のある書き込み方法を詳しく解説（図）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。