縦書きテキストを美しくジャスティファイするために（概論編）
EPUB3の特徴として挙げられる縦組ですが、webkitの対応も進み、「text-align:justify;」で行頭行末揃えも表示されるようになりました。ただ何も考えないでジャスティファイを使うと、組版にこだわりのある方から「段落の最後の行だけ詰まって見える」と指摘されてしまう可能性があります。というわけでcssで行頭行末揃えをする際に現状気をつけておくといいと思うことをまとめてみます。*1 まあ、結論を先に言うと「行長指定重要」ということなのですが。
なお、縦書きのcss指定については「草枕を作ろう =縦書きHTML簡単作成ガイド=」あたりを参考にしてください。
「段落の最後の行だけ詰まって見える」ってどういうこと？
まずは見ていただくのが手っ取り早いと思いますので、InDesignで作ってみました。わかりやすいかと思って国構えの漢字を並べてみましたがどうでしょう。
最初の３行に比べて最終行が詰まって見えるのがわかるでしょうか？ でもこれは正確には最終行が詰まっているわけではなく、それ以外が広がっているのです。
ここでジャスティファイを解除して、行頭揃えにしてみます。
すべての行の文字間がきれいにそろいました。ですが、そのかわりに最初の３行の下部にスペースができています。
この例では文字サイズは16pxで行長（ブルーの枠の高さ）は適当にキリのいい数字として140pxを指定しています（それを150%拡大表示してキャプチャ）。そうすると１行には8文字は収まるけど12px余ってしまいます。ジャスティファイとは、その余った部分をそれぞれの文字間に適当に割り振って、行末を枠の端にくっつけようとする処理です。
どれくらいずれているか、マス目（InDesignのフレームグリッド）を重ねて表示されてみましょう。
ジャスティファイを指定した状態でどれくらいずれているかわかるでしょうか。勘のいい方はわかると思いますが、このずれを解決するためには、ブルーの枠の高さをマゼンタの枠と同じ高さにすればいいのです。そこで148pxから128pxに変更したのが下の画像です。
cssでどのように指定するか
InDesignで作ったサンプルで説明してきましたが、これをcssでどう指定するかというと、そのテキストの領域（段落等）の行長を「文字サイズ×１行の文字数（字詰め数）」にします。*2
例えばfont-size:1emで1行10文字の場合、height（multi-column layoutの場合はcolumn-width）に10emを指定します。
p { writing-mode: vertical-rl; -webkit-writing-mode: vertical-rl; -epub-writing-mode: vertical-rl; font-size: 1em; height: 10em; text-align: justify; }
……が、現状はそううまくはいきません。というわけで続きます。
