overprint

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

CSSで行取りを表現するには

EPUB css

行取りって何？

JLREQこと「日本語組版の要件（http://www.w3.org/TR/2011/WD-jlreq-20111129/ja/）」には下記のように書かれています。

見出しを配置する行送り方向の領域設定で，基本版面で設定した行位置を基準にして設定する方法が行取りである．この場合，見出しの行送り方向に占める領域は，“行の幅×行数＋行間×（行数−1）”となる．しかし，見た目には，ページ（又は段）の途中に見出しを配置する場合は，その領域の前及び後ろの行間が加わり，ページ（又は段）の先頭に見出しを配置する場合は，その領域の後ろの行間が加わった大きさとなる．
4.1.6 行取りの処理例

行取りの例


JLREQの該当ページにも図版でいくつかの例が示されていますので、それを見ればどういうものか分かると思います。要するに見出し部分の送り方向のサイズを本文の複数行分に正確に指定することで、各行をきれいにそろえようということです。特にMulti-column Layoutで段組みを表現する場合、その中に見出しがあった場合に行取りを正しく指定しないと、段ごとの行がそろわなくなってしまいます。


ふぞろいな段組みの例（左右の行がそろっていない）

CSSの指定方法

サンプルとして下記のようなhtmlを組んでみます。

<section>
<h1>行送り方向の見出しの占める領域（行取り）</h1>
<p>各ページで行を配置していく場合，基本版面で設定した行位置にそろった方が望ましい．そこで，行送り方向の見出しの占める領域は，基本版面で設定した行位置を基準にして設定する方法が行われている．</p>
</section>

さらにCSSの指定がこちら

section {
	width:20em;
	margin:0;
	padding:0;
}
p {
	font-size:1em;
	line-height:2em;
	margin:0;
	padding:0:
}
h1{
	font-size: 1.5em;
	line-height: 1.333em;
	color: #008800;
	margin:0.333em 0 0.333em 0;
	padding:0.333em 0em 0.333em 0em;
}

これを表示させるとこうなります（グリッドは画像処理で追加しています）

CSS指定のポイント

以前「InDesignとCSSの行組版の違い」でまとめたように、いわゆる行間（line-heightからfont-sizeを引いた値――これをリーディング（leading）と呼ぶ）が文字の後（ヨコ書きなら下、タテ書きなら左）につくのではなく、この半分の値（half-leading）が文字の前後（ヨコ書きなら上下、タテ書きなら左右）に追加されます。

組版で行取りをする場合に、行送り方向のサイズは「本文の基準文字サイズ×行数＋行間」で表せますが、CSSの場合はこれに加えてhalf-leading×2が追加されることになります。
上記のCSSではhalf-leadingをmarginで指定し、（本文の基準文字サイズ×行数＋行間）をfont-size,line-height,paddingの組み合わせで指定しています。こうすることで背景を指定した場合でも行取り領域にのみ反映させることが可能です。

《h1のline-height》

今回の例では本文と同じ行送りを指定したい（文字サイズが大きくなっているので結果的に行間は狭くなっている）ので、指定する数値は[pのline-height:2em]÷[h1のfont-size:1.5em]＝1.333…emとなります。

《h1のmargin》

本文のhalf-leadingと同じサイズにするので、（[pのline-height:2em]ー[pのfont-size:1em]）÷２＝0.5em(本文文字サイズ基準) になります。指定の際には[h1のfont-size:1.5em]で割って0.333…emとなり、それをmargin-top, margin-bottomにそれぞれ指定します。

《h1のpadding》

・見出しが１行に収まる場合＝２行取り
この場合のサイズ（本文の基準文字サイズ×行数＋行間）は、[pのfont-size:1em]×２＋[pのline-height:2em]ー[pのfont-size:1em]＝3emとなります。
この中に見出し１行分を収めるので、paddingは（3emー[h1のline-height:2em(本文文字サイズ基準)]÷２）＝0.5em(本文文字サイズ基準) になります。指定の際には[h1のfont-size:1.5em]で割って0.333…emとなります。

・見出しが２行になる場合＝３行取り
この場合のサイズ（本文の基準文字サイズ×行数＋行間）は、[pのfont-size:1em]×３＋（[pのline-height:2em]ー[pのfont-size:1em]）×２＝5emとなります。
この中に見出し２行分を収めるので、paddingは（5emー[h1のline-height:2em(本文文字サイズ基準)]×２）＝0.5em(本文文字サイズ基準) になります。指定の際には[h1のfont-size:1.5em]で割って0.333…emとなります。


この例では２行取りの場合も３行取りの場合もpaddingの数値が同じになっていますが、font-size, line-heightの組み合わせによってはそれぞれ個別に指定する必要が出てくると思います。


そろった段組みの例（左右の行の高さがそろっている）

rem指定使うとすごく便利！

先日見かけたこちらの記事によると、サイズ指定にremという単位があるそうです。これはルート要素の文字サイズを基準にしたサイズとなります。


これを使用するとかなり指定が楽になります。見出しの文字サイズを本文の文字サイズより大きくした場合、em指定だと、それに合わせてline-height, margin, paddingの数値も計算しなくてはならないのですが、rem指定なら本文の文字サイズを基準にできるので、いちいち計算する必要がありません。

remで指定した場合
p {
	font-size:1rem;
	line-height:2rem;
	margin:0;
	padding:0:
}
h1{
	font-size: 1.5rem;
	line-height: 2rem;
	color: #008800;
	margin:0.5rem 0 0.5rem 0;
	padding:0.5rem 0 0.5rem 0
}