[CSSシリーズ] 書き込みモード - テキストの方向（水平/垂直、左/右/右-左）

---

• ドキュメント:書き込みモード - CSS: カスケード スタイル シート | MDN

---

1. はじめに

directionプロジェクトでテキストを縦に配置する必要があるという要件があり、CSS でこの属性をすぐに思いつきましたが、この属性ではテキストを「左から右」または右から左にしか設定できません。検索した結果、 「珍しい属性」があることを――writing-mode

これは次のようにして実現できます。

writing-mode: vertical-lr;

二、writing-mode

writing-modeプロパティは、テキストの水平または垂直レイアウトと、ブロックレベル要素内でテキストが移動する方向を定義します。

1. 文法

/* 关键字值 */
writing-mode: horizontal-tb;
writing-mode: vertical-rl;
writing-mode: vertical-lr;

/* 全局值 */
writing-mode: inherit;
writing-mode: initial;
writing-mode: revert;
writing-mode: revert-layer;
writing-mode: unset;

horizo​​ntal-tb (デフォルト: 水平方向、テキストは左から右、行は上から下)

左揃え (ltr) テキストの場合、コンテンツは左から右に水平方向に流れます。右揃え (rtl) テキストの場合、コンテンツは右から左に水平方向に流れます。次の水平行は前の行の下にあります。

vertical-rl (垂直方向、テキストは上から下、行は右から左)

左揃え (ltr) テキストの場合、コンテンツは上から下に垂直に流れ、次の垂直線が前の行の左側に配置されます。右揃え (rtl) テキストの場合、コンテンツは下から上に垂直に流れ、次の垂直線が前の行の右側に配置されます。

vertical-lr (垂直方向、テキストは上から下、行は左から右)

左揃え (ltr) テキストの場合、コンテンツは上から下に垂直に流れ、次の垂直線が前の行の右側に配置されます。右揃え (rtl) テキストの場合、コンテンツは下から上に垂直に流れ、次の垂直線が前の行の左側に配置されます。

横向き-rl（実験値）

左揃え (ltr) テキストの場合、コンテンツは下から上に垂直に流れます。右揃え (rtl) テキストの場合、コンテンツは上から下に垂直に流れます。すべてのグリフは、縦書きテキストであっても右向きに配置されます。

横向き-lr (実験的)

左揃え (ltr) テキストの場合、コンテンツは上から下に垂直に流れます。右揃え (rtl) テキストの場合、コンテンツは下から上に垂直に流れます。すべてのグリフは、縦書きテキストであっても左向きに配置されます。

2. 属性の一致

writing-modeテキストのレイアウト方向を変更できます。また、いくつかのテキスト関連の属性には、さらに素晴らしい用途があります。

(1) ボックスは垂直方向の中央に配置されます—margin: auto 0;

<div class="container">
     <div class="content"></div>
 </div>

.container {
    
    
    width: 100%;
    height: 100%;
    background-color: #f00;
    writing-mode: vertical-lr;
}
.container .content {
    
    
    height: 100px;
    width: 200px;
    margin: auto 0;
    background-color: #0f0;
}

注: 固定幅と固定高さ

(2) テキスト画像を縦方向中央に配置します——text-align: center;

<div class="container">
    我是一行文字<br>程序边界<br>
    <img src="https://profile-avatar.csdnimg.cn/ea275d892df44c5fb722c5756f8ba98b_qq_32682301.jpg">
</div>

.container {
    
    
    width: 100%;
    height: 100%;
    background-color: #0fF;
    writing-mode: vertical-lr;
    text-align: center;
}

プログラム境界の元のアドレス: https://iseeu.blog.csdn.net/article/details/131709017

(3) 最初の行のインデントにより、テキストがシンクに変更されます—text-indent

<div class="container">
    我是一行文字<br>程序边界<br>
</div>

.container {
    
    
    width: 100%;
    height: 100%;
    background-color: #0fF;
    writing-mode: vertical-lr;
    text-indent: 2rem;
}

素晴らしいアプリケーション
https://www.zhangxinxu.com/study/201604/writing-mode-text-indent-vertical-down.html

プログラム境界の元のアドレス: https://iseeu.blog.csdn.net/article/details/131709017

(4) その他

さらに多くの遊び方がゆっくりと探求され、発見され、今後も継続されます。。。

3. 過去と現在の人生

writing-mode 属性は元々 IE のみの属性であり、IE のみでサポートされていましたが、CSS3 では Google と Firefox でもサポートされるようになりました。

したがって、これを使用するときは、IE のプライベート属性と CSS3 の正規属性という 2 つの異なる構文セットを覚えておく必要があります。

IE8 以降との互換性だけが必要な場合は、CSS3 の標準プロパティをそのまま使用できます。

3. 学習の幅を広げる

方向

ドキュメント:方向 - CSS: カスケード スタイル シート | MDN

CSS の方向プロパティは、テキスト、表の列、水平方向のオーバーフローの方向を設定するために使用されます。

---

• CSS ワールドの縦横のルールを変更する Writing-mode 属性 « Zhang Xinxu-Xin Space-Xin Life
• writing-mode 属性 CSS 古文法