読者です 読者をやめる 読者になる 読者になる

overprint

印刷とそれ以上の何かについて(少し電子書籍寄り)。気が向いただけでは更新されません。

縦書きテキストを美しくジャスティファイするために(概論編)

EPUB3の特徴として挙げられる縦組ですが、webkitの対応も進み、「text-align:justify;」で行頭行末揃えも表示されるようになりました。ただ何も考えないでジャスティファイを使うと、組版にこだわりのある方から「段落の最後の行だけ詰まって見える」と指摘されてしまう可能性があります。というわけでcssで行頭行末揃えをする際に現状気をつけておくといいと思うことをまとめてみます。*1 まあ、結論を先に言うと「行長指定重要」ということなのですが。

なお、縦書きのcss指定については「草枕を作ろう =縦書きHTML簡単作成ガイド=」あたりを参考にしてください。

「段落の最後の行だけ詰まって見える」ってどういうこと?

まずは見ていただくのが手っ取り早いと思いますので、InDesignで作ってみました。わかりやすいかと思って国構えの漢字を並べてみましたがどうでしょう。

最初の3行に比べて最終行が詰まって見えるのがわかるでしょうか? でもこれは正確には最終行が詰まっているわけではなく、それ以外が広がっているのです。

ここでジャスティファイを解除して、行頭揃えにしてみます。

すべての行の文字間がきれいにそろいました。ですが、そのかわりに最初の3行の下部にスペースができています。
この例では文字サイズは16pxで行長(ブルーの枠の高さ)は適当にキリのいい数字として140pxを指定しています(それを150%拡大表示してキャプチャ)。そうすると1行には8文字は収まるけど12px余ってしまいます。ジャスティファイとは、その余った部分をそれぞれの文字間に適当に割り振って、行末を枠の端にくっつけようとする処理です。

どれくらいずれているか、マス目(InDesignのフレームグリッド)を重ねて表示されてみましょう。

ジャスティファイを指定した状態でどれくらいずれているかわかるでしょうか。勘のいい方はわかると思いますが、このずれを解決するためには、ブルーの枠の高さをマゼンタの枠と同じ高さにすればいいのです。そこで148pxから128pxに変更したのが下の画像です。


cssでどのように指定するか

InDesignで作ったサンプルで説明してきましたが、これをcssでどう指定するかというと、そのテキストの領域(段落等)の行長を「文字サイズ×1行の文字数(字詰め数)」にします。*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;
}


……が、現状はそううまくはいきません。というわけで続きます。

*1:この文章は縦書きベタ組みを前提にしており、詰め指定に関してはcss実装を確認していないので考慮しません。また禁則処理や和欧混植処理についても複雑になるので無視します。

*2:組版にこだわりのある方はこのあたりのざっくりした説明に目くじらをたてることのないようにお願いします。