今時の CSS では、次の通り縦書きと段組ができるが、これを組合せられるのだろうかという試み。

  • writing-mode: vertical-rl;で和文の縦書き
  • column-width: <length>;で段組

動機

日本語は伝統的には漢文に習って縦書きであって、 文字を天から地へ、行を右から左へ進めて書きしるす。 舶来の技術であるHTMLの世界では、元来縦書きはできなかった。 けれども、W3CのCSS作業部会(Working Group)の中の人達が、 CSS Writing Modes Level 3をこしらえ、 またブラウザもまたこれをこしらえたお陰でHTMLの世界でも 縦書きができるようになったのである。

いまだ問題となるのは、組方向（縦書きと横書き）が混在する場合である。 そんな組み方をするのが間違っている、という指摘はここでは棚に上げる。 すると横書きに準じて縦スクロールするべきか 縦書きに準じて横スクロールするべきかという問題が生じる。 スクロールの向きが混在するのは流石に読みづらいことこの上ないので避けるとして、 縦書きだが縦スクロールというのは日本の新聞の紙面などにおける段組と 同じなのだからそれが組めればいいのではないかと思ったのである。

要求仕様

文書全体としては横書きの縦スクロールであるが、 縦書きの文章を内部に挿入するにあたり次に示すような要求を満たすものとしたい。

  1. 縦書き部の前には横書きのコンテンツがあり、また縦書き部の後には横書きのコンテンツがある。これらの横書きのコンテンツの表示に影響を及ぼさないこと。
  2. 縦書き部に独立のスクロールバーは持たず、あくまで縦スクロールで読者は読むものとする。
  3. 縦書き部の横幅(width)は、100%、すなわち親の要素に合わせた横幅とする。
  4. 縦書き部の文章は段組とし、行長（段組の高さ）は100vh以下、すなわち画面(view port)の高さより小さくする。
期待される表示の図

ソースコード

単純に横書き→縦書き→横書きの順番で文章が並んだHTMLファイルを用意した。 

<p>(横書きのコンテンツ)...</p>
<p class="vertical-writing">(縦書きのコンテンツ)...</p>
<p>(横書きのコンテンツ)...</p>

これに対して、適切なCSSルールを定義した。 

.vertical-writing {
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
  width: 100%; /* 縦書き部の横幅 */
  -moz-column-width: calc(100vh - 20px);
  -moz-column-gap: 20px;
  -moz-column-rule: 2px dashed #000;
  column-width: calc(100vh - 20px);
  column-gap: 20px;
  column-rule: 2px dashed #000;
}

段組の指定には、段数 (column-count) を使うこともできるが、 段組の高さを指定するのを当初の目的としたのでそうした。

なお、縦書き部の段組の高さは100vh - 20px、 すなわち画面の高さより20px減じたものとした。

表示結果

Edge

Edge 13

縦書き部の後ろに続く横書き部と、縦書き部の段組二段目移行が重なってしまっている。 これは縦書きと段組を組み合わせた時にボックスの高さが、一段分しか計算されないかららしい。 高さを明示しても良いが、それではリキッドレイアウトではないので却下。 それ以外は良好で、縦書き部の後ろに横書きのコンテンツが一切存在しない場合は、 使い物になるのではないか。

Chrome

Chrome 48

一瞬正しくレンダリングしているようにみえるが、 段組が一切動いていないため、文章の続きが左端の画面外にはみ出ている。 スクロールバーも表示されないため、これは一番困る動作。

Firefox

Firefox 45

最も縦書き対応の遅かった Firefox がご覧の通りまともなレンダリングをした。 しかし、少しでも CSS パラメータを変えるとレンダリングが崩れたりと まだ怪しい部分がアリそうだ。

まとめ

縦書きと段組のそれぞれは、各ブラウザで良好に動作するようになってきているが、 まだその組合せは動作は不安定であることがわかった。

参考文献