2012-02-04

段落間のマージンを省きインデントする

段落(p要素)が続く場合、その間のマージンを省き、全角2文字分インデントするようにした。Islands of Thought in Macrotypographyで推奨されていて、ざっと読んで直ぐにやりたくなったので。まぁでも海の向こうのタイポグラフィー・テクニックって感じではあるので、しばらくしたら戻すと思う。

段落間のマージンを省きインデントすることのキモは文章を連続した塊にすることができること。それにより一気に文章を読ませることができる……というよりも、段落間のマージン(bounding)は思考をも分断しIslands of Thoughtを産み出してしまうという欠点があるということへの対策のようだ。

実装はネタ元と同じように以下のように兄弟セレクタを使っただけ。

p + p {
  margin-top: 0;
  text-indent: 2em;
}

このWebサイトのスタイルではブロックで上下にマージンを確保していたのでちょっとアレな感じのコードになった……。これを機会にブロックのマージンはmargin-topプロパティーだけを使うようにしたりすると楽かもしれないとかちょっと思ってる。マージンのとり方を変更してシンプルなルールで実装できるようにした。

グリフが矩形にびっちり詰まっている日本語の文章ではマージンがあった方が読みやすいと思う。元ネタのエントリーにあるBookmarkletを使っていくつかの日本語Webサイトをみたりしてみたけど、やっぱりマージンが必要な感じだった。抑えめのマージンと抑えめのインデントを組み合わせたりするのが良さそうな感じだけど、そこまでするくらいなら普通にマージンをとった方が慣れてて読みやすそう。