Studio
Happyvalley

縦組み
進化論

image: 縦組み進化論
Toplabo
Evolving Vertical Writing

タイトルだけでなく本文も縦組みを極める

2022/04/01

解説

まずは縦組みの基本をおさらいする
  • 最初はタイトルから始まったこのサイトではページ見出しに縦組みを採用しています。縦組みの研究という意味もあって試したのが動機ですが、意外と気に入っています。そこで本文にも採用できないかと研究してみました。
    まずはシンプルな文字組からスタートまず、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;
    }
    設定が必要なプロパティはおおまかには3つ。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://studio-happyvalley.com/wp/wp-content/uploads/fig1-6.png
    実は不具合があった。しかし、よくよく調べてみると実はテキストブロックは初期設定のまま変動していなく、文字のみがあふれていることがわかります。https://studio-happyvalley.com/wp/wp-content/uploads/fig2-4.png

致命的な問題

自動的にコラム数が変化し、文字が矩形内に収まるように見えるが、 実は溢れた文字はフロート状態で他の要素と重なってしまう。
  • なんてこったい下の要素と重なってしまうじゃないかさっきの見本では縦組みブロックのみだったのでわかりませんが、その下へ別の文字組ブロックを配置すると不具合が明らかになります。
    https://studio-happyvalley.com/wp/wp-content/uploads/fig3-1.png
    ■段落を複数設置すると文字が重なってしまうサンプル:
    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/


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

今後の課題

やはり空きが気になる
  • 空きスペースには薄い背景画像?なんとか実用的なレベルへ縦組み本文を構築できたかなと思います。あとは、テキストブロックや画像幅(特に最終段)に大量に空白が空いた時どうするか。
    今思いつくのは透過40%位の背景画像をワンポイント的にいれる、くらいですか。それでもかなり印象が変わってくるとおもいます。
    スマホでの検証オーマイガー!
    スマホでは改行されずに文言が隠れてますね。
    iPhoneでは仕様が違うようです。
    column-countが曲者のようでこの値を2以上にしないと自動改行がなされないようです。
    スマホ対応に関しては時間を見て対応ですね。

『縦組み進化論』関連のお薦め

このページで紹介しているプログラムやビジュアルなどご依頼いただければ実装を賜ります。
お問い合わせはこちら