【実務・中級編】text-orientationによる文字の向きの制御 – HTML実践ガイド

縦書きの「美」を制御する：`text-orientation`で英数字を操る極意

フロントエンドの現場で「縦書きレイアウト」を実装することになったとき、多くのエンジニアが最初に直面する壁。それが「英数字が横倒しになって読みづらい」という問題です。

日本語の文字は縦書きに最適化されていますが、ASCIIコードの英数字はそのまま縦書きに流し込むと90度回転してしまい、まるで首を傾げながら読まなければならないような、無骨なデザインになりがちです。

今日は、この「縦書きにおける文字の向き」をCSSで完璧にコントロールする`text-orientation`プロパティについて、ブラウザの裏側の挙動を紐解きながら、明日から使えるベストプラクティスを解説します。

—

なぜ英数字は「寝て」しまうのか？

CSSで`writing-mode: vertical-rl`を指定した瞬間、ブラウザのレンダリングエンジンは「縦書きモード」に切り替わります。このとき、デフォルトの挙動として、CJK（中国語・日本語・韓国語）文字以外の文字は「グリフをそのまま回転させて配置する」というルールが適用されます。

これが「横倒しの英数字」の正体です。しかし、UIデザインにおいて「半角数字は縦に並べたい」「アルファベットは正立させたい」という要求は日常茶飯事。ここで登場するのが`text-orientation`です。

—

`text-orientation`の主要な値と使い分け

このプロパティを理解する上で重要なのは、以下の3つの値です。

`mixed`（デフォルト）: CJK文字はそのまま、それ以外は90度回転。一般的な書籍のようなスタイルです。
`upright`: すべての文字を正立（回転させない）させます。数字や短い略語が多い場合に有効です。
`sideways`: すべての文字を横倒しにします。横書きのテキストを単純に90度回転させた状態です。

実務において最も頻繁に使うのは、特定の箇所だけを制御する`upright`でしょう。

—

実践：洗練された縦書きコンポーネントを作る

では、現場でそのまま使えるコード例を見てみましょう。例えば、日付やIDなどを縦書きの中に配置する場合、`time`要素や`span`要素に対してピンポイントで適用するのが鉄則です。

/ 縦書きのコンテナ設定 /
.vertical-container {
writing-mode: vertical-rl;
text-orientation: mixed; / 基本は読みやすいmixedで /
font-feature-settings: “palt”; / 文字詰めを有効にして美しく /
}

/ 特定の英数字・記号を正立させるクラス /
.is-upright {
/ 英数字を回転させず、縦にまっすぐ並べる /
text-orientation: upright;

/ 縦書きの中で文字が横に広がりすぎないよう調整 /
font-variant-numeric: tabular-nums;
}

HTMLでのマークアップ例

本日は 2023-10-27 です。
プロジェクトコード XYZ-99 の進捗を確認してください。

—

現場で膝を打つための「プラスアルファ」の知識

1. `text-combine-upright`との併用が最強

`text-orientation: upright`だけでは、桁数の多い数字（例：1000）を並べると、縦書きのラインを大きく崩してしまいます。そんな時は`text-combine-upright: all`を併用しましょう。これは「2〜3文字を1文字分のスペースに押し込む」という強力なテクニックです。

.date-compact {
/ 2023年を1文字分の幅に収める /
text-combine-upright: all;
-webkit-text-combine: horizontal; / Safari対応用 /
}

2. ブラウザ間の差異に注意

`text-orientation`は現在、主要なモダンブラウザでサポートされていますが、レンダリングの細かな挙動（特にフォントのベースラインの揃え方）には若干の差異が出ることがあります。必ず、Firefox、Chrome、Safariの3つで、数字の揃い方をテストしてください。特に`tabular-nums`（等幅数字）を使っていないと、数字の幅がバラバラでガタガタに見えてしまうので注意が必要です。

—

まとめ：デザインの意図をブラウザに伝える

`text-orientation`は、単なる「向きの変更」ではありません。「この情報は縦書きの中でどう見せるべきか」というデザイナーの意図を、コードとして正しくブラウザに伝えるためのプロパティです。

闇雲にすべてを`upright`にするのではなく、可読性を損なわない範囲で、数字や記号を「情報の塊」としてどう整えるか。そこにエンジニアとしてのこだわりが宿ります。

次回のUI実装で縦書きが登場した際は、ぜひこの「正立させる勇気」と「文字詰め」の組み合わせを思い出してください。それだけで、あなたの書くUIの質は一段上のレベルへと引き上げられます。