InDesignとCSSの行組版の違い
InDesignを使っているDTP関係者がCSSで組版をやろうとすると、細かな違いに戸惑うことがあります。今回は行送りの扱いの違いをまとめてみました。
※ここでは問題をシンプルにするために、日本語の文字組で、すべて同サイズの文字を組む場合を前提にしています。
用語説明
まずは組版の基礎知識として、行間、行送り、文字サイズの用語から。「日本語組版の要件」*1によると
- 行送り(line feed)
- 隣接する行同士の基準点から基準点までの距離.(JIS Z 8125)
- 行間(line gap)
- 隣接する行の文字の外枠間の距離.
- 文字サイズ(character size)
- 文字の大きさ.通常,文字の行送り方向の外枠の長さ.
とあります。「[図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氏による資料を参考にしています。当日は参加できず内容に関しての詳細は不明ですが、参加したかった…。