Section 6:行間・字間

 いままでの HTML では,行間はふつう書き手が変えることのできないものであった。CSS では行間を変えて見やすい文書づくりができるようになっている。また,字間も変えることができる。

行送り : line-height 属性

 CSS では,“行間”を直接指定するのではなく,“行送り(行の高さ)”を指定する。

line-height: (長さ または 倍率);

この属性はすべての要素について適用される。

フォントサイズと行送りの関係。
図 6.1 [D]

 “行間”は line-height と font-size との差と見てよい。この“行間”は上下均等に割り振られる。たとえば,font-size が 10pt,line-height が 12pt の場合,“行間”は 2pt,その割り振りは上下に等しく 1pt ずつである。

 長さで指定する場合の単位は ptemex などである。倍率で指定する場合は“行送り”を“font-size”の何倍にするかを直接数値で指定し,この場合単位はつけない。

<P>この段落には line-height 属性は指定されていません。</P>
<P STYLE="font-size: 12pt; line-height: 18pt;">この段落の行送りは 18pt で,上下に 3pt ずつ,計 6pt の行間ができています。</P>
<P STYLE="line-height: 1.8;">この段落は,行送りを“1.8 倍”に指定しています。0.8 行分の行間があくはずです。</P>

この段落には line-height 属性は指定されていません。

この段落の行送りは 18pt で,上下に 3pt ずつ,計 6pt の行間ができています。

この段落は,行送りを“1.8 倍”に指定しています。0.8 行分の行間があくはずです。

 line-height 属性に負の値を与えることはできないが,たとえば段落のフォントサイズより小さな値にすることは十分可能である。このような指定を行ったとき,日本語の場合は行間が詰まりすぎたり,文字が重なってしまうことがある。

アセンダとディセンダ。
図 6.2 [D]

 いっぽう,欧文では“文字の高さ”が,たとえば,“h” のいちばん上から “y” のいちばん下になるので,“g”,“j”,“p”,“q”,“y”以外には下部に空白ができているから,文字が重なることは起こりにくい。W3C の解説では,欧文において次のようなときに line-height を小さく設定することを示唆している。

......(前略)......“line-height”は文字の高さよりも小さく,行間が負になってもかまわない。これは,文章がディセンダを含まないとわかっている(たとえば,大文字しかない)ときに使うとよい。そうすれば行どうしが接近して配置されるだろう。

 また,line-height 属性はキーワード normal を値として与えることができる。このときは行送りはブラウザによって決められる。

 IE3  “行間”のとられかたが規格と異なっている。また,倍率による指定はできない。

字間:letter-spacing 属性

 行間のときと違って,字間は文字と文字の間隔そのものを指定する。

letter-spacing: (長さ);

 長さの単位は,ptemex など。キーワード normal ではブラウザによって文字間隔が設定される。

 line-height 属性と異なり,倍率で指定することはできない。しかし,値を負とすることはできる。このときでも,あまり無理な値はとれない。

<P>letter-spacing 属性によって<SPAN STYLE="letter-spacing: 0.5em;">文字間隔を広げます</SPAN>。<SPAN STYLE="letter-spacing: -0.2em;">詰めることも</SPAN>できます。</P>

 letter-spacing 属性によって文字間隔を広げます詰めることもできます。

 この属性は,ブラウザによってはサポートされていないこともある。

 NN4  letter-spacing 属性はサポートされていない。