JavaScriptとjQueryで文字サイズ・行高・行取り・見出し行数から見出しのマージンを自動計算

ワタクシがwebデザイン上一番気にするのが見出しのマージン。いつもその時の感覚で決めるが、しっくり来ないことが多々ある。何か巧い方法が無いものかと『文字の組方ルールブック ヨコ組編』の「見出しの構造と組方」を眺めていて、自動計算出来るかもと思いjQueryメインに適宜JavaScriptを組み込みスクリプトなるものを書いてみた。

2013.5.14追記

• デモページの内部に書き込んでいたこのスクリプトを外部ファイル化。
• 上下マージン比1:1時と8:5時をボタンで切り替えられるデモページを追加。

参照

• 日本エディタースクール編. 文字の組方ルールブック ヨコ組編. 本エディタースクール, 2001
• JavaScript：文字を数値に変換する方法その２ | THE HAM MEDIA BLOG
• line-height の値には単位なしが良いとされる理由 - lucky bag
• Can I use rem units?

ほか、色々なサイト・ブログを参照させていただいた。深謝。

注意

なにせjQueryはおろかJavaScript、いやプログラミング全般に素人なので間違ってたりする可能性があるので、使用時は自己責任でお願いする。

実作したweb組版

本文の文字サイズ・1行の字詰・行間（行送り）などを決めると版面が決まる。見出しもその版面に則り「行取り」の方法でその上下のアキを決めていく。具体的には下図をご覧あれ。本文だけでなく見出しも行に綺麗に乗っているのがわかる。

本文サイズ12px、行高22px、行間10px、42字詰。各見出しサイズなどは図の通り。

完成形をブラウザで表示後キャプチャし、イラレで作成した水色の版面上にキャプチャ画像を配置した。

web組版の注意点

行送りの設定方法がDTPと異なる。
webの行送りはline-heightで設定するが、これは厳密には文字通り行の高さを設定するもので、アキの付き方は以下の図の通りになる。

本文上下のグレー網がline-heightで設定されるアキ

これを踏まえて版面設計や見出しのマージンを算出する。

見出しマージンの計算式

ということで、計算式を導くために、下図のように必要な部分を設定。

var bFont = body要素（本文）のfont-size
var bHeight = body要素（本文）のline-height
var hFont = 見出しのfont-size
var hHeight = 見出しのline-height
var hGyodori = 見出しの行ドリ行数
var hGyosu = 見出しの行数
var hMargint = 見出しの上マージン
var hMarginb = 見出しの下マージン

hMargint : hMarginbの比率をj : kとする

見出しが1つの場合

見出しが1つの場合

見出しの上下マージンの計算式は各々、

hMargint = j*(hGyodori*bHeight-hGyosu*hHeight)/(j+k)
hMarginb = k*(hGyodori*bHeight-hGyosu*hHeight)/(j+k)

j : k = 1 : 1の時、

hMargint = hMarginb = 0.5*(hGyodori*bHeight-hGyosu*hHeight)

j : k = 8 : 5（黄金比の近似比）の時、

hMargint = 8*(hGyodori*bHeight-hGyosu*hHeight)/13
hMarginb = 5*(hGyodori*bHeight-hGyosu*hHeight)/13

という風になる。

見出しが2つ以上の場合

見出しが2つ以上連続する場合

上記「見出しが1つの場合」に同じ計算式で算出でき、見出し間のマージンは上下見出しの下マージンと上マージンを足せば良い。

今回使用したjQueryやJavaScriptの留意点

1. 本文や見出しのfont-sizeやline-heightの値は、css()で取得するが「16px」というように単位付きの文字列として返してくる。今回は数値として使いたいので、JavaScriptのparseFloat関数で文字列を数値化する必要がある。
2. 本文や見出しのfont-sizeやline-heightは今回CSS3のrem単位で規定しているが、上記1.でrem単位で規定した値を取得するとpxに変換される。
3. 本文や見出しのfont-sizeやline-heightはどちらも偶数か、またはどちらも奇数が好ましい。行高の計算でline-height-font-sizeの値を1/2にして行の上下に配分するが、そのとき小数点以下（0.5）が出ないようにするため。小数点はブラウザ側で丸めるが、ブラウザごとに丸め方が異なりレイアウトが崩れる可能性がある、らしい。
4. 最終的に算出されたマージンの値は、Math.round()で小数点以下を四捨五入して整数値になるようにしている。上下マージン比j : kによりマージン値が無理数の場合があるので、それを丸めるために。
5. 見出しが連続する場合、絞り込むため、ある要素の「前」にあたる兄弟要素を抽出するjQueryのprev([expr])関数を使うが、$("h4").prev("h3").prev("h2")のように連ねても使える。この場合、h2・h3・h4と連続しているh2のみにマージン設定ができる。

こうしてあとはJavaScriptとjQueryとで記述すれば完成。

スクリプトは【デモページ】のソースを参照していただければ。

---