概要

writing-modeは、CSSのプロパティで、テキストの書字方向を制御するために使用されます。このプロパティを使うことで、テキストを横書きから縦書きに変更するなど、文の流れを文化やデザインに合わせてカスタマイズできます。特に、日本語や中国語など、縦書きを多用する言語のコンテンツや、ユニークなデザイン表現において、重要な役割を果たします。

writing-modeの基本

構文

.element {
writing-mode: <値>;
}

主な値

  1. horizontal-tb（デフォルト） テキストは左から右、上から下に流れます。一般的な横書きの書字方向です。
  2. vertical-rl テキストは上から下、右から左に流れます。縦書きの標準的なレイアウトです（日本語、中国語などに適しています）。
  3. vertical-lr テキストは上から下、左から右に流れます。縦書きですが、逆方向の流れです。
  4. sideways-rl テキストが回転して右から左に流れ、横向きの縦書き風になります。
  5. sideways-lr テキストが回転して左から右に流れ、横向きの縦書き風になります。

各値の詳細と使用例

horizontal-tbで標準の横書き

horizontal-tbはデフォルトの書字方向で、テキストは左から右へ、次の行は上から下に流れます。一般的な英語やヨーロッパ言語の標準的なレイアウトです。

.horizontal-example {
writing-mode: horizontal-tb; /* 標準の横書き */
}

<p class="horizontal-example">これは標準の横書きのテキストです。</p>

この設定では、テキストは通常の横書きで表示されます。

vertical-rlで右から左に流れる縦書き

vertical-rlは、縦書きで右から左に流れるテキストを表示します。日本語や中国語などの縦書き文化に適しており、伝統的な書字方向を再現します。

.vertical-rl-example {
writing-mode: vertical-rl; /* 右から左に流れる縦書き */
border: 1px solid #000; /* 境界線を追加して視覚化 */
height: 200px; /* 高さを設定して見やすく */
}

<p class="vertical-rl-example">縦書きのテキストが右から左に流れます。</p>

この設定では、テキストが上から下、右から左に流れる縦書きになります。

vertical-lrで左から右に流れる縦書き

vertical-lrは、縦書きで左から右に流れるレイアウトです。文化的にはあまり使用されませんが、デザインの自由度が高く、特定のアートやレイアウトで使用されることがあります。

.vertical-lr-example {
writing-mode: vertical-lr; /* 左から右に流れる縦書き */
border: 1px solid #000;
height: 200px;
}

<p class="vertical-lr-example">縦書きのテキストが左から右に流れます。</p>

この設定では、縦書きのテキストが上から下、左から右に流れます。

sideways-rlで横向きに回転した縦書き

sideways-rlは、テキストが横に回転して右から左に流れるように表示されます。看板や特定の装飾的なデザインに適しています。

.sideways-rl-example {
writing-mode: sideways-rl; /* 横向きの縦書き */
border: 1px solid #000;
height: 200px;
}

<p class="sideways-rl-example">横向きに回転した縦書きです。</p>

この設定では、テキストが横に回転し、縦書き風に表示されます。

sideways-lrで左から右に流れる横向き縦書き

sideways-lrは、テキストが横に回転して左から右に流れるように表示されます。ユニークなレイアウトが可能です。

.sideways-lr-example {
writing-mode: sideways-lr; /* 左から右に流れる横向き縦書き */
border: 1px solid #000;
height: 200px;
}

<p class="sideways-lr-example">左から右に流れる横向き縦書きです。</p>

この設定では、テキストが横に回転し、左から右に流れる縦書きになります。

使用シーンと注意点

  • 文化に合わせたレイアウト: 日本語や中国語の文章では、vertical-rlが特に役立ちます。書籍や記事で縦書きを採用する場合に適しています。
  • デザイン性の高い表現
    sideways-rlやsideways-lrを使用することで、看板や特殊なデザインに適したテキスト表現が可能です。
  • レスポンシブデザイン: 縦書きや横書きを適切に使い分けることで、画面の向きやサイズに応じた読みやすいレイアウトが実現できます。

注意点

  • ブラウザの互換性: 一部の古いブラウザではwriting-modeがサポートされていない場合があります。使用する際は、ターゲットとするユーザーの環境を確認しましょう。
  • テキストの読みにくさ: 特殊な書字方向を使用する場合、読みにくくなることがあるため、対象となるユーザーにとって適切かどうかを検討することが重要です。

まとめ

writing-modeプロパティは、CSSを使ってテキストの書字方向を柔軟に調整できる強力なツールです。横書きと縦書きを切り替えたり、デザイン性の高いレイアウトを作成することで、視覚的なインパクトを与えることが可能です。文化的な背景に応じたテキスト表示や、個性的なデザインを求めるシーンで、適切に使用してみましょう。

参照:

`CSS` Writing-Mode | MDN Web Docs