書き込みモードのテキスト表示方向とCSSでの対応記述方法

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ブラウザー：

eie browsers：

writing-mode属性値は次のとおりです。 、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での対応記述方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。