テキストの書字方向を指定するプロパティです。横書き、縦書き、文字の向きを制御できます。日本語、中国語、アラビア語などの多言語対応や、デザイン上の縦書き表現に使用されます。
writing-mode: horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr任意値: [writing-mode:vertical-rl]
専用ユーティリティは無く任意値で書く。縦書きは論理プロパティ（ms-*/ps-*等）との併用が前提。
.vertical-text {
writing-mode: vertical-rl;
height: 200px;
width: 100px;
}縦書き（右から左）- 日本語の伝統的な書字方向
.vertical-left {
writing-mode: vertical-lr;
height: 200px;
width: 100px;
}縦書き（左から右）- モンゴル語などで使用
.horizontal {
writing-mode: horizontal-tb;
}横書き（上から下）- デフォルトの書字方向
.sidebar-title {
writing-mode: vertical-rl;
text-orientation: mixed;
padding: 1rem;
background: #f3f4f6;
}サイドバーに縦書きのタイトルを配置したレイアウト例です。 Webデザインでのアクセントとして効果的に使用できます。
サイドバーの縦書きタイトル
.book-spine {
writing-mode: vertical-rl;
text-orientation: sideways;
height: 300px;
width: 40px;
background: #1f2937;
color: white;
display: flex;
align-items: center;
justify-content: center;
}本の背表紙のような縦書きデザイン
縦書き時は要素の幅と高さの概念が入れ替わる。text-orientationと組み合わせて文字の向きも制御できる。日本語の縦書きレイアウトやデザイン上のアクセントとして活用。
縦書き時にpaddingやmarginの方向が変わることを忘れがち。flexboxやgridとの組み合わせ時は軸の方向に注意。
縦書き（vertical-rl）にすると、幅と高さ・上下左右の意味が入れ替わるため、物理プロパティ（width, margin-left等）で書かれたスタイルは破綻します。縦書き対応は論理プロパティ（inline/block系）とセットが原則です。数字や英字を正立させるtext-orientationやtext-combine-upright（縦中横）の存在もAIは出し忘れがちです。
この見出しを縦書きにして。数字は縦中横で正立させ、レイアウトは論理プロパティで崩れないように
そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。