Fork me on GitHub

jquery.kerning.js

jQuery.Kerning.js

A kerning plugin specific with Japanese webfont

Get Source

Demo


うつくし明朝 - plain
ポラーノの広場

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。

うつくし明朝 - kerned
ポラーノの広場

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。

M+ 2m Regular - plain
ポラーノの広場

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。

M+ 2m Regular - kerned
ポラーノの広場

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。

Source


HTML
<h1>ポラーノの広場</h1>
<p>あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。</p>
Javascript
$.getJSON("./kerning-data.json" , function(_data) {
  $('h1,p').kerning({data:_data});
});

Notice


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



Feature


Without option

カーニングデータを指定しなかった場合、デフォルトで全角約物のカーニングのみ設定されます。

$('p').kerning();

plain

どんなフォントでも「約物(やくもの)」のカーニング調整が、簡単にできます。

kerned

どんなフォントでも「約物(やくもの)」のカーニング調整が、簡単にできます。



Deep Data Extending

通常、カーニングデータを指定するとデフォルトのカーニングデータが上書きされ消えてしまいますが、第2引数にtrueを指定することで、デフォルトのカーニング情報に指定したデータをマージして適用することができます。

$('p').kerning({data:_data}, true);


Destroy

一旦カーニングを適用後に、再度'destroy'オプション付きで呼び出すことで、カーニングをキャンセルし、元の状態に戻すことができます。

$('p').kerning('destroy');


Use "data-kerning" attribute

javascriptを書かなくても、data属性だけで記述することもできるようになりました。

<p data-kerning>この要素は、デフォルトのカーニング(全角約物のカーニング)が適用されます。</p>
<p data-kerning="{data:_data}">このように、カーニングデータを指定する事もできます。</p>


Case Study