Seu Dev Notes

縦書き Web の実装(writing-mode・ルビ・圏点・縦中横・禁則)

一言まとめ

writing-mode: vertical-rl は 97% 対応だが、ルビ・圏点・縦中横・ぶら下げ組はブラウザ差が大きい。hanging-punctuation は Safari のみ、text-combine-upright の digits は未実装、iOS Safari は scroll-snap で慣性スクロールが止まる。

作成 · 更新 · #css#vertical-writing#japanese#typography
目次 9 sections
  1. 01 writing-mode: vertical-rl
  2. 02 ルビ(ruby)
  3. 03 圏点(text-emphasis)
  4. 04 縦中横(text-combine-upright)
  5. 05 ぶら下げ組(hanging-punctuation)と禁則
  6. 06 iOS Safari の横スクロール
  7. 07 ライブラリ(2026-04 時点)
  8. 08 関連
  9. 09 更新履歴

調査時点: 2026-04。フォントのライセンスとサブセット化は 日本語 Web フォントのライセンスとサブセット化 に分けた。

writing-mode: vertical-rl#

  • グローバルサポート率 97%(Chrome 8+、Safari 5.1+、Firefox 41+、Edge 12+)。
  • text-orientation: mixed(CJK 直立・ラテン 90 度回転、既定)と upright は Chrome 48+ / Firefox 41+。sideways は Firefox 44+ のみ。sideways-rl / sideways-lr は Safari 18.4 から。
  • writing-mode は <html> ではなくコンテンツコンテナ(<main> や <div>)に付ける。Astro の View Transitions が <html> 属性をリセットする問題を避けられる。
ブラウザ既知の問題(2026-04)状態
Firefox縦書き要素を margin: auto で中央寄せすると左に寄る未修正。Flexbox ラッパーで回避
Chromevertical-rl + Flex アイテム内でビューポートの x 軸リサイズに追従しない既知バグ
Safari(旧)<td> に vertical-rl を当ててもセルが縦にならない(WebKit #65917)新版で修正済み
Safari 18.4+vertical-rl + SVG のバウンディングボックス計算、ネスト縦書き内の水平モード2025 に修正

ルビ(ruby)#

  • Safari 18.2(2024-12)で ruby-position がプレフィックスなしになり、over / under / inter-character、ruby-align、ruby-overhang が追加された。
  • Safari 18.4 で縦書きの inter-character ルビが極端に小さくなるバグを修正。Safari 26.0 で sideways-lr のルビ位置を修正。
  • 実務: iOS Safari 18.4 以上なら ruby-position: over で縦書きルビは安定。inter-character は 18.4 未満で縮小するので over にフォールバックする。Android Chrome の縦書きルビ品質は実機確認が要る。

圏点(text-emphasis)#

  • 縦書きでは文字の右側に出る(横書きは上)。lang="ja" の既定は胡麻点(sesame、U+FE45 / U+FE46)。
  • text-emphasis-position の left / right は Safari 18.2 で追加。Safari 18.4 で句読点に圏点が付くバグを修正。
  • 胡麻点グリフを持たないフォントでは UA のフォールバックグリフになり見た目が変わる。収録は fonttools で確認する。

縦中横(text-combine-upright)#

  • text-combine-upright: all は 2022-03 以降 Baseline Widely Available。
  • digits <integer>(2〜4 桁の ASCII 数字を自動で縦中横にする値)はどのブラウザも未実装。<span> でマークアップし、Markdown 変換なら remark / rehype プラグインで自動挿入する。組んだ幅が 1em を超えると UA が自動縮小する。

ぶら下げ組(hanging-punctuation)と禁則#

  • hanging-punctuation は Safari のみ実装で Baseline 未達。CSS 単体での全ブラウザ対応はできない。
  • 代替: budoux(Google、MIT)や vivliostyle(CSS 組版エンジン)。最低限の禁則は overflow-wrap: break-word + word-break: normal + line-break: strict。

iOS Safari の横スクロール#

  • WebKit Bug #243582: scroll-snap-type を設定すると iOS Safari の慣性スクロールが無効になる。P2・未修正(2026-04-16 にテストケース追加)。
  • 章・記事単位のスナップに scroll-snap-type: x mandatory は使わない。overflow-x: scroll に留めるか JS で代替する。-webkit-overflow-scrolling: touch は廃止済みで不要。重なる要素には明示的に z-index を付ける(未設定だとスクロールイベントを横取りする)。

ライブラリ(2026-04 時点)#

  • Astro 公式テーマギャラリーに縦書き専用テーマはない。既存テンプレート(astro-paper、fuwari など)は横書き前提。
  • tategaki(Denkiame、MIT、TypeScript): writing-mode の付与、CJK / Latin のスパン分割、Punctuation Squeeze、text-combine-upright、OpenType の vhal / fwid を扱う。DOM 操作ライブラリなので、SSG では client:load か remark / rehype プラグイン化の検証が要る。
  • vivliostyle(Apache 2.0)は電子書籍向け CSS 組版エンジンとして活発。jQuery.tategaki などは事実上停止。

関連#

更新履歴#

  • 2026-04-19: 初版(ローカル調査ノート)
  • 2026-10-17: Wiki へ移植、概念ページとして再構成

出典

  1. https://caniuse.com/css-writing-mode
  2. https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/text-orientation
  3. https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/text-combine-upright
  4. https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/hanging-punctuation
  5. https://webkit.org/blog/16301/webkit-features-in-safari-18-2/
  6. https://webkit.org/blog/16574/webkit-features-in-safari-18-4/
  7. https://webkit.org/blog/17333/webkit-features-in-safari-26-0/
  8. https://bugs.webkit.org/show_bug.cgi?id=243582
  9. https://github.com/Denkiame/Tategaki

同じトピック — Web