縦組み
進化論CSSで縦組みを
極める

このサイトではページ見出しに縦組みを採用しています。縦組みの研究という意味もあって試したのが動機ですが、意外と気に入っています。そこで本文にも採用できないかと研究してみました。

まず、400文字くらいのコンテンツを縦組みで組んでみます。
最初は2~3コラムくらいか。

■縦2コラム設定のサンプル：https://labo.studio-happyvalley.com/verticalwriting/simple/

基本のCSSです。

wrapper {
	column-count: 2;
	column-rule: solid 1px #ccc;
	column-gap: 2.5rem;
	writing-mode: vertical-rl;
	text-orientation: upright;
	width: 100vw;
	height: 100vh;
}

1. writing-mode: 縦組みの設定。
2. column-count:コラムの数。
3. column-gap: コラムの間隔。
あとは、text-orientationいわゆる縦中横に相当します。
・width, height:好みでテキストボックスの縦横、きちんと縦横の矩形を設定しないと文字が下方向へリフローしません。
詳しくは下段のMDNの解説ページをご覧ください。
※すでにwebにある重複情報は説明しませんのであしからず。

MDNの縦組みの解説ページ：https://developer.mozilla.org/ja/docs/Web/CSS/writing-mode

さてご覧のようにブラウザの大きさを変更するとそれに合わせてあふれた文字が自動で2~3コラムへと調整されます。
非常に賢い仕様のように感じます。

しかし、よくよく調べてみると実はテキストブロックは初期設定のまま変動していなく、文字のみがあふれていることがわかります。

さっきの見本では縦組みブロックのみだったのでわかりませんが、その下へ別の文字組ブロックを配置すると不具合が明らかになります。

■段落を複数設置すると文字が重なってしまうサンプル：https://labo.studio-happyvalley.com/verticalwriting/base/

結局もともとの箱は変形しないんですね。文字量とカラム数が自動で調整されてるわけでは無く、単にあふれているだけでした。
箱の許容量を超えた文字のみが文字通り溢れるので他のブロックの文字列と重なってしまいます。
これでは実用には程遠い仕様ですねえ。
そこで対策を考えてみました。
ようは箱からあふれた文字の分量を計算してその分マージンを取ってあげればいいわけですね。

文字があふれた分を取得するには、文字列の一番最後のbottom座標を取得し、もともとの縦組み箱のbottom座標との差分を計算し、margin-bottomとして設定するプログラムを書いてみました。これで理屈ではうまく段落間隔があくはずです。
結果はこちらです。

■あふれた文字分量を計算し、その分をマージンで空けたJSサンプル：https://labo.studio-happyvalley.com/verticalwriting/column1/

見事にすっきりとしたレイアウトが実現できました。ブラウザのサイズに合わせて自在に変形します。
ただし、これは文字だけなんで、実際には写真も一緒にレイアウトする場合が多いですよね。
そこで次は写真も一緒にレイアウトしたバージョンの実験です。

文字だけだと問題ないですが画像も追加すると読み込みを工夫する必要があります。前回のままだと画像を読み込む前にJSが起動して画像の分のマージンを取得できません。
そのため画像などすべてを読み込んだ時に発動するcompleteイベントを検出するなどしてJS起動を待機させる一工夫が必要になります。
今回はreadyStateプロパティを使用しました。

■画像込みのテキストボックスの縦組みに対応したサンプル：https://labo.studio-happyvalley.com/verticalwriting/addImg/

画像込みの縦組み文字のレイアウトに完全対応したバージョンが完成しました。
檻をみて本サイトでも使っていこうと思います。使っていくうちにさらに品質も上がりますのでね。
本文以外にもサムネイルの小見出しなんかにもいろいろ工夫してみました。

なんとか実用的なレベルへ縦組み本文を構築できたかなと思います。あとは、テキストブロックや画像幅（特に最終段）に大量に空白が空いた時どうするか。
今思いつくのは透過40％位の背景画像をワンポイント的にいれる、くらいですか。それでもかなり印象が変わってくるとおもいます。

オーマイガー！
スマホでは改行されずに文言が隠れてますね。
iPhoneでは仕様が違うようです。
column-countが曲者のようでこの値を2以上にしないと自動改行がなされないようです。
スマホ対応に関しては時間を見て対応ですね。