Entries

HTMLで文字詰めするタイポグラフィー用JS

HTMLのテキストに対して、文字詰めを行えるスクリプト FLAutoKerningクラスを作ってみた。サンプルはこちらzipも

スクリプト内に任意のカーニングペアを定義することによって、ブログのタイトル等のテキストに字詰めを行ってくれるスクリプトです。なんか探しても見つからなかったので自分でやってみた。いちおう朗文堂の新宿私塾に行ったわけだし、僕もなんか成果物作らんとなぁ。。。的に。

実行はとても簡単。jQueryと一緒にhtmlにロードして、

FLAutoKerning.process($(‘h1′));
FLAutoKerning.process($(‘h2′));
FLAutoKerning.process($(‘h3′));

といった具合に、適用したhtml要素を一括していしてやるだけ。カーニング情報の定義も、FLAutoKerningクラスの頭に、下のようにem単位で定義するだけ。
これがあれば、行頭に括弧がこようが、トッキョキョカキョクが来ようが、もう何も怖くない。

//汎用字詰め
p["*ト"] = -0.075;
p["ト*"] = -0.075;

//特殊なペア
p["す。"] = -0.15;

//行頭の約物
p["「"] = -0.5;



問題は誰がカーニング情報を調節するか。。。
motola先生やゆうき先生がやってくださった上に、大公開してくれると、とってもステキなのですが。。。もちろんそれ以外の誰かがやってくださってもとってもステキです。

とりあえず、キッチリ美しいヒラギノ、メイリオ、MSゴシックあたりのデータを誰かが作て、みんなで共有できたら、書体別に分岐してロードするうにバージョンアップします。そしたらブログのタイトル位はキレイに見れるようになるんじゃない? 普段、Webの文字はバッチいんじゃ!とキレ気味な方は是非。

サンプルでは40ペアぐらいしか定義してないのですが、それでも目に見えて違います。 おそらくは500〜1000ペアも定義すれば、汎用的に使えるし速度も問題ないレベルでいけるんじゃないかと。

現状版はオプソですCCのattributionぐらいの条件で適当に使ってください。
完全完成したら、商業案件での使用するときはPaypalで寄付とか貰えると、今後のメンテに時間が割けるのでステキです。もちろんタダでもokです。