CSSスタイルシートによる行送りの指定方法　「デジタル組版の基本用語」の例

「デジタル組版の基本用語」（4/25掲載）のスタイルシートでは、最初、行の高さ（line-height）を指定しなかったため標準の行送り（AH Formatter は1.2）になっていました。このときの組版結果は次のようになります。

・PDFファイルをダウンロード

これはどうも少し行間が狭すぎます。そこで行の高さを1.8（em）にしてみました。
p {
text-align: justify;
text-indent: 1em;
line-height:1.8em;　/*行の高さを1.8(em)に設定 */
margin: 0;
widows: 1;
orphans: 1;
}
このときの組版結果は次のようになります。

PDFファイルをダウンロード
行送りを広くするとずいぶん読み易くなります。但し、詳細に見ますと2段組の左右の段で行送りがずれています。これは、行の中に日本語のフォント（この画像ではMS明朝）とラテンフォント（Times New Roman）が混在していて、二つのフォントでベースラインの位置が異なるため欧文混じりの行と和文だけの行で行送りが違ってしまうためです。下の図をご参照ください。ここでは、Darwin Information Typing Archtectureの部分を<span xml:lang="en">..</span>とマークアップしているため、ここを英語と解釈してTimes New Romanが適用されています。

そこで、行送りを固定にするため文書全体に次の指定をします。これで行送りが一定になります。
html {
margin: 0;
font-size: 10pt;
-ah-line-stacking-strategy: font-height; /* 行送り方法の指定*/
}
見出し文字サイズは本文の1.2倍なので、見出しを本文2行取りにするために、次の指定をします。
h2, h3 {
padding-top:1em;
font-size:1.2em;
line-height: 1.5em;
padding-bottom:0.5em;
font-family: sans-serif;
font-weight: normal;
border-style: none;
margin:0;
}
（説明）
見出しの文字の大きさは本文の1.2倍、行の高さをその1.5倍とすると、見出し行は文字サイズの1.8倍の高さになります。見出し行の上の空き1emと行の下の空き0.5emですので、空きの合計は1.5emです。すると空きの合計は本文文字サイズの1.8倍となります。
この結果、見出し全体の高さは本文換算で2行分の高さとなり、結果、左右の行の位置が一致します。以上の指定をした最終的な組版結果は次のようになります。

PDFファイルをダウンロード