Widely available 安全に使用可能。縦書きレイアウトや垂直テキストの実装に必須。
タイポグラフィ Widely available

writing-mode

writing-mode は horizontal-tb（横書き、上から下）、vertical-rl（縦書き、右から左）、vertical-lr（縦書き、左から右）を指定できる。日本語の縦書きレイアウトや、サイドバーの垂直テキストなどに使われる。論理プロパティと組み合わせると方向に依存しないレイアウトが可能。

国際化縦書き

概要

writing-mode は horizontal-tb（横書き、上から下）、vertical-rl（縦書き、右から左）、vertical-lr（縦書き、左から右）を指定できる。日本語の縦書きレイアウトや、サイドバーの垂直テキストなどに使われる。論理プロパティと組み合わせると方向に依存しないレイアウトが可能。

対応ブラウザ

デスクトップ

Chrome 48+
Edge 12+
Safari 10.1+
Firefox 41+

モバイル

Chrome Android 48+
Safari iOS 10.3+
Firefox Android 41+

基本構文

CSS 
/* 日本語の縦書き */
.vertical-japanese {
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

/* サイドバーラベル */
.sidebar-label {
  writing-mode: vertical-lr;
  transform: rotate(180deg);
}

実務での使いどころ

  • 縦書きコンテンツ

    日本語の小説や詩などを縦書きで表示し、伝統的な読書体験を提供する。

  • 垂直ラベル

    サイドバーやタブのラベルを垂直に配置し、スペースを有効活用する。

注意点

  • writing-mode を変更するとレイアウトの軸が変わるため、width / height や margin / padding の解釈も変わる。論理プロパティの使用を推奨。

アクセシビリティ

  • 縦書きコンテンツでもキーボードナビゲーションが正しく動作するか確認すること。

参考リンク