CSSでカーニング（文字詰め）等を可能にするJSライブラリ・kerning.js

3連休も今日で最後ですねー。今日は
ゆっくり過ごす方も多そうですね。
さて、休みですし、ちょっとネタ的
なライブラリをご紹介。カーニング
をCSSで出来るようにしたJSライブラ
リです。

jQueryやmootoolsなどにも依存していないようです。これだけ聞くとかなり使えそうなんですけど。でも個人的にこういうチャレンジは称えたいので敬意を示すつもりで記事にします。

kerning.js

CSSで出来る、と言っても独自の記述法を加える事でテキストコンテンツでのカーニングを実現するタイプなので好みが分かれそうですね。

まだちょっとよく分かってないんですけど適当にデモ作ってみました。一応違いが分かるように少し大袈裟にしたつもりです。クオリティは無視です。
※右上でjsのオン/オフが出来ます。Chrome推奨

Sample

css

#example01 {/*文字詰め*/
    -letter-kern: 1px 1px 0 0 0
                  1px 0 2px 0 0
                  0 0 0;
}
#example02 {/*途中の文字だけサイズ変更*/
    -letter-size: _ _ _ _ _ 0.5em;
}
 
#example03 {/*単語別にカラー変更*/
    -word-color: #f5474b #000000;
}
 
#example04 {/*n個目の文字を変形*/
    -letter-transform: skew(-5deg) none
                       none none
                       none none
                       skew(-5deg);
}
#example05 {/*文字を指定してカラー変更*/
    -letter-color: -letter-pairs(
           'か': #1eacf9,
            'で': #f5474b
    );
}