日本語コンテンツを扱うWebサイトでは、縦書きレイアウトを求められる場面が少なからずあります。CSSでは writing-mode と text-orientation を使うことで縦書きを実現できますが、単に指定するだけでは「英数字の向きがおかしい」「ブラウザごとに見え方が違う」といった問題が起こりがちです。本記事では、縦書きを正しく制御するために必要なCSSプロパティの役割と、実務で破綻しない指定方法を整理します。
writing-modeとは何か
writing-mode は、テキストの流れる方向を定義するCSSプロパティです。横書きか縦書きか、また縦書きの場合にどの方向へ行を進めるかを指定します。日本語の縦書きでは、一般的に上から下へ文字が並び、行は右から左へ進みます。
.vertical {
writing-mode: vertical-rl;
}
vertical-rl は「縦書き・右から左」を意味し、日本語の書籍や新聞と同じ流れになります。vertical-lr を指定すると行方向が逆になるため、意図しないレイアウトになることがあります。
text-orientationの役割
text-orientation は、縦書き時に各文字をどの向きで表示するかを制御するプロパティです。writing-mode だけでは、英数字や記号の回転ルールが曖昧になり、ブラウザ依存の表示になってしまいます。
.vertical {
writing-mode: vertical-rl;
text-orientation: mixed;
}
mixed は、日本語文字は正立、英数字は横倒しで表示する指定です。これは日本語組版として最も一般的で、特別な理由がなければ基本指定として採用できます。
upright指定で英数字を縦に並べる
英数字やアルファベットも縦向きに1文字ずつ表示したい場合は、text-orientation: upright を使用します。この指定により、数字や英字が回転せず、縦方向に正立したまま配置されます。
.vertical-upright {
writing-mode: vertical-rl;
text-orientation: upright;
}
ただし、長い英単語や数値では可読性が著しく低下するため、見出しや装飾用途に限定して使うのが現実的です。
縦書きとレイアウト指定の注意点
縦書きでは、width と height の感覚が横書きと逆転します。例えば、縦書き要素の「横幅」は行の高さに相当し、「高さ」は行数に影響します。そのため、縦書きコンテナに対して安易に height を指定すると、テキストが途中で切れてしまうことがあります。
レイアウト制御には、余白を padding で調整し、必要に応じて max-height や max-width を使う方が安全です。
flexboxやgridとの併用時の挙動
writing-mode を指定した要素は、flexbox や grid の子要素として配置しても問題なく動作します。ただし、縦書き要素自体の主軸方向は変わらないため、align-items や justify-content の効き方が直感とずれることがあります。
特に縦書き要素を横並びに配置する場合は、親コンテナ側の flex-direction と、子要素側の writing-mode の役割を切り分けて考えることが重要です。
ブラウザ対応と実務での現実解
現在の主要ブラウザでは writing-mode と text-orientation は概ね安定して実装されていますが、細かな字形や回転ルールには差異が残っています。そのため、縦書きをページ全体に適用するのではなく、見出しや装飾ブロックなど、用途を限定して使う設計が無難です。
よくある失敗例
writing-mode だけを指定し、text-orientation を省略すると、英数字の向きが意図せず回転したり、ブラウザごとに異なる表示になることがあります。また、縦書き要素に対して line-height や letter-spacing を横書きと同じ感覚で調整すると、文字間が不自然になる点にも注意が必要です。
まとめ
縦書きを正しく制御するためには、writing-mode で文章の流れを定義し、text-orientation で文字の向きを明示することが不可欠です。日本語主体の縦書きでは vertical-rl と mixed の組み合わせを基本とし、英数字の扱いが必要な場合のみ upright を選択します。レイアウトや可読性への影響を考慮し、縦書きは用途を絞って導入することが、実務で破綻しないCSS設計につながります。
