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


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

$('p').kerning();

plain

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

kerned

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



Case Study