CSSで多言語サイトを快適に！writing-modeプロパティで実現する縦書き・横書きレイアウト

CSSのwriting-modeプロパティは、テキストの方向とブロック要素のフロー方向を制御します。横書き、縦書き、右書き、左書きなど、様々な書き方に設定できます。このプロパティは、文書全体、個々の要素、またはインライン要素に適用できます。

書き込みモードの種類

適用範囲

例

以下の例では、#my-element要素内のテキストを縦書きに設定しています。

#my-element {
  writing-mode: vertical-rl;
}

#example {
  writing-mode: vertical-rl;
  text-align: right;
}

縦書きとインライン要素

次の例では、p要素内のテキストを縦書きにし、かつ各行をインライン要素として扱います。これにより、各行の間にスペースを挿入することができます。

p {
  writing-mode: vertical-rl;
  display: inline-block;
}

縦書きとテーブル

次の例では、テーブル内のテキストを縦書きにし、かつ各セルをブロック要素として扱います。

table {
  writing-mode: vertical-rl;
}

table th,
table td {
  display: block;
}

複雑なレイアウト

writing-modeプロパティと他のCSSプロパティを組み合わせて、より複雑なレイアウトを作成することもできます。以下の例では、テキストを縦書きにし、かつ各行を波型に配置しています。

#wave {
  writing-mode: vertical-rl;
  text-align: justify;
  columns: 2;
  column-gap: 20px;
}

方向指定プロパティの組み合わせ

directionプロパティとtext-orientationプロパティを組み合わせて、テキストの方向と行内方向を個別に制御することができます。
- directionプロパティ：テキストの論理的な方向を指定します。ltr（左から右）rtl（右から左）などの値があります。
- text-orientationプロパティ：テキストの表示方向を指定します。normal（既定値）upright（縦書き）などの値があります。

/* 右から左に流れる縦書きテキスト */
.rtl-vertical {
  direction: rtl;
  text-orientation: upright;
}

トランスフォームプロパティ

transformプロパティを使用して、要素を回転させることで、縦書きのような外観を作成することができます。ただし、この方法は、テキストの論理的な方向を変更しないため、検索エンジンでのインデックス作成などに影響を与える可能性があります。

/* 90度回転させて縦書きのように表示 */
.rotated-vertical {
  transform: rotate(90deg);
}

行内要素の配置

インライン要素を適切に配置することで、縦書きのような外観を作成することができます。ただし、この方法は、複雑なレイアウトを作成する場合に困難になる可能性があります。

/* 各行をインラインブロック要素として表示 */
.inline-vertical p {
  display: inline-block;
}

専用ライブラリの使用

FlipItやWrite-ModeなどのJavaScriptライブラリを使用して、writing-modeプロパティをエミュレートすることができます。これらのライブラリは、より高度な機能とブラウザ間の互換性を提供する場合があります。

注意事項

上記の方法を使用する場合は、以下の点に注意する必要があります。

検索エンジン最適化（SEO）：transformプロパティを使用してテキストを回転させる場合、検索エンジンがテキストを正しくインデックスできない可能性があります。
アクセシビリティ：視覚障害者などのユーザーにとって、テキストの方向が正しく認識されない可能性があります。
ブラウザの互換性：すべてのブラウザがこれらの方法をサポートしているわけではありません。古いブラウザでは、意図したとおりに表示されない場合があります。