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

overprint

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

InDesignとCSSの行組版の違い

InDesignを使っているDTP関係者がCSS組版をやろうとすると、細かな違いに戸惑うことがあります。今回は行送りの扱いの違いをまとめてみました。
※ここでは問題をシンプルにするために、日本語の文字組で、すべて同サイズの文字を組む場合を前提にしています。

用語説明

まずは組版の基礎知識として、行間、行送り、文字サイズの用語から。「日本語組版の要件*1によると

行送り(line feed)
隣接する行同士の基準点から基準点までの距離.(JIS Z 8125)
行間(line gap)
隣接する行の文字の外枠間の距離.
文字サイズ(character size)
文字の大きさ.通常,文字の行送り方向の外枠の長さ.

とあります。「[図36]: 基本版面を行送りで指定する方法」の図を見れば一目で分かるかと思います。


[図36]: 基本版面を行送りで指定する方法より

行送り方向の版面サイズ

版面のサイズを計算する際に、行送り方向のサイズ(ヨコ組の場合は高さ、タテ組の場合は幅)は通常、

文字サイズ×行数+行間×(行数-1)

で計算されます*2。行間はその名の通り、行と行の間ですので、最終行の後(もしくは最初行の前)には付きませんので、「(行数-1)」となります。

CSSの場合は?

CSSで行送りを指定するにはline-heightを使用します。しかし、line-heightは組版での行送りとは少し動作が異なります。line-heightの名のとおり行の高さを指定するもので、line-heightからfont-sizeを引いた値をリーディングレディング(leading)と呼び*3、この半分の値(half-leading)が文字の前後(ヨコ書きなら上下、タテ書きなら左右)に追加されます。
下図をごらんいただくとわかりやすいでしょうか。

ここで問題になるのは、最初行の前および最終行の後にもそれぞれhalf-leadingがついていることです。つまりCSSで行送り方向のサイズ(ヨコ組みの場合はheight、タテ組みの場合はwidth)は、

(line-height)×行数=文字サイズ×行数+行間×行数

になってしまい、これまでの組版と比較して行間1つ分大きくなっています。

これまでの感覚で版面設計をして、(ヨコ組みで)heightを「文字サイズ×行数+行間×(行数-1)」で指定してしまうと、実際に必要な高さに足りず、1行少なくなってしまいます*4

参考資料

この記事は、2011年5月30日に開催された「次世代電子出版とWeb 表現技術フォーラム2011」でのアドビのNat McCully氏による資料を参考にしています。当日は参加できず内容に関しての詳細は不明ですが、参加したかった…。

*1:この文書は非常にわかりやすく無料で手に入る日本語組版の資料としては最良のものだと思います

*2:文字サイズが一定サイズのみの場合

*3:「鉛」のlead [led] が由来だそうでレディングが正しいそうです(http://en.wikipedia.org/wiki/Leading)。コメントをくださったtokumeiさんありがとうございます

*4:実際にはoverflow:visibleになっていればheight指定を超えて表示されるはずですが