CSS Writing Models を使って縦書きしてみる

1. このページの目的

CSS Writing Modes Level 3 の仕様を使って、縦書きしてみる。

2. 仕様

writing-mode プロパティ

ブロックのフロー方向を指定する。

日本語であれば、horizontal-tb と vertical-lr しか必要ないはず。

writing-mode の値
値 説明
horizontal-tb
  • コンテンツは左から右へ水平に、上から下へ垂直方向に流れます。
  • 次の水平な行は、前の行の下に配置されます。
  • 既定値
vertical-lr
  • コンテンツは上から下へ垂直に、右から左へ水平方向に流れます。
  • 次の垂直な行は、前の行の左に配置されます。
vertical-rl
  • コンテンツは上から下へ垂直に、左から右へ水平方向に流れます。
  • 次の垂直な行は、前の行の右に配置されます。

text-orientation プロパティ

行内のテキストの向きを定義する。

text-orientation の値
値 説明
mixed
  • このキーワードは、横書きのみの文字を右に 90°回転させ、縦書き文字のグリフフは自然にレイアウトされます。
  • 既定値
upright
  • このキーワードは、横書きのみの文字を、縦書き文字と同様に自然にレイアウト (正立) させます。
  • このキーワードは、すべての文字が ltr (左から右へ) で書かれているものとみなすので注意してください。これは、ユーザ側でどのように設定されていても、対象のテキストの direction に ltr が指定されているものとします。
sideways
  • このキーワードは、全行を横書きで書いて 90°回転したようにレイアウトします
  • writing-mode が vertical-rl の場合は右へ回転、vertical-lr の場合は左へ回転します。
sideways-right
  • これは、互換性を維持するためのキーワードであり、sideways の別名です。
use-glyph-orientation
  • SVG 要素上で、このキーワードは、非推奨の SVG プロパティ glyph-orientation-vertical と glyph-orientation-horizontal の値を使用します。

日本語における、プロパティの現実的な組み合わせ

記述方式 writing-mode text-orientation
横書き horizontal-tb (既定値) mixed (既定値)
縦書き vertical-rl mixed (英数字は横向きになる)
or
upright (英数字も縦向きになる)

関連するその他のプロパティ

2. デモ

コード

CSS

.demo {
  writing-mode: vertical-rl; /* horizontal-tb | vertical-rl | vertical-lr */
  text-orientation: upright; /* mixed | upright | sideways */
  height: 500px;
  line-height: 1.3em;
  text-indent: 1em;
}

HTML

<section class="demo">
  <p>...</p>
  <p>...</p>
</section>

結果

writing-mode:

text-orientation:

スタイルシート (英語: style sheet) とは、構造化文書コウゾウカブンショなどにおける表示形式ヒョウジケイシキを制御するしくみ。見栄えと構造を分離するという目的で提唱テイショウされた。HTML、XML、SGMLといったマークアップ文書ブンショや、オフィスソフトにおいて広く使用シヨウされている。

Web上で広く使われているHTML文書にスタイルシートを適用する場合には、一般的にCSSが利用される。CSSが圧倒的に普及しているので、単にスタイルシートといえばCSSを指すことがある。

3. メモ

4. 参考