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

2024-06-16

CSSにおける「writing-mode」プロパティ:詳細解説

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

書き込みモードの種類

  • horizontal-tb: 既定値。テキストは左から右へ、上から下へ流れるように表示されます。
  • vertical-rl: テキストは上から下へ、右から左へ流れるように表示されます。
  • horizontal-rl: テキストは左から右へ、下から上へ流れるように表示されます。
  • vertical-lr: テキストは上から下へ、左から右へ流れるように表示されます。
  • initial: 要素の親要素のwriting-modeプロパティ値を継承します。
  • inherit: 要素の親要素のwriting-modeプロパティ値を継承します。

適用範囲

  • writing-modeプロパティは、以下の要素に適用できます。
    • ブロック要素
    • インライン要素
    • テーブルセル
  • 文書全体に適用するには、html要素に設定します。

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

#my-element {
  writing-mode: vertical-rl;
}
  • writing-modeプロパティは、text-orientationプロパティと組み合わせて使用することで、より詳細な制御が可能になります。
  • writing-modeプロパティは、様々な言語の書き方に対応するために使用できます。

    writing-modeプロパティは、Webページのテキストレイアウトを柔軟に制御するための強力なツールです。横書き、縦書き、右書き、左書きなど、様々な書き方に対応できるため、多言語対応サイトやユニークなデザインを作成する際に役立ちます。



    以下の例では、#example要素内のテキストを縦書きに設定し、かつ右揃えにしています。

    #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;
    }
    


    厳密には、CSSのwriting-modeプロパティには直接的な代替方法はありません。しかし、同様の効果を得るために、以下の方法を組み合わせて使用することができます。

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

    • 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;
    }
    

    専用ライブラリの使用

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

    注意事項

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

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

    writing-modeプロパティは、縦書きを含む様々な書き方を設定するための最も強力で柔軟な方法です。しかし、上記のような代替方法も、状況によっては有効な手段となり得ます。それぞれの方法の利点と欠点を理解し、目的に合った方法を選択することが重要です。