ブラウザでも美しい文字を「jQuery.Kerning.js」

僕は以前DTPオペレータをしていたことがありました。
文字流し込みなどをしていると、やれカーニングかけろだやれ字間詰めろだ言われておりました。
Quark時代はイージーコンポというものがあったのである程度楽でした、InDesignはスタイルを作成すれば自動的に調整してくれたので有難かった記憶があります。
しかしこのような文字調整の作業は非常に面倒くさいです

CSSにも文字間を調整するスタイルは用意されておりますが、これを文字ごとに設定している方はあまりいらっしゃらないでしょう

※こんなやつです「letter-spacing:5px;」

ブラウザでの字間調整はムリだろうなと思っておりましたが、とんでもないライブラリが出てきました

jQuery.Kerning.js

デモを見て驚いたのですが、文字詰めが非常に美しい！
InDesignを使ったかのようにキレイな文章になっております！

使用方法は簡単で、JQuery読み込み後に下記を記述します

<scriptsrc="jquery.kerning.min.js"></script>

あとはカーニングする箇所を設定すれば完了です

$.getJSON(“./kerning-data.json” , function(data) {
$(‘h1,p’).kerning({“data”:data});
});

ただ正しくカーニングするにはフォントごとにカーニングデータが必要なようです

※本家サイト様から引用

使用するには、フォントに合わせたカーニングデータの作成が必要です。

現時点では、ソースコードに付属しているテンプレートを参考に、使用するフォントに合わせたカーニングデータを別途作成する必要があります。
※ フォントデータから自動的にjsonデータを生成するツールを試作中です。

役物はデフォルトでカーニングしてくれるようです、これだけでも十分素晴らしい！