JSでカーニングエンジンを作ってみる 3回目

前回は行頭処理を実装しました。実は不具合がちらほらあるのが発見されました。それは後ほど解説します。

今回は各文字のカーニングを実装します。

文字のペアを定義

文字"A"と文字"B"のセット、というようにカーニングを指定したペアを設定します。
まずは効果が大きい約物を設定しましょう。
こんな感じです。

PIPKerningHiragino.js

module.PIPKerningTable.table = {
    '、*' : -0.1,
    '「*' : -0.2
};

約物は様々な文字との組み合わせが発生するので、"*"をワイルドカードとして設定します。
もちろん普通の文字も設定できます。

PIPKerningHiragino.js

module.PIPKerningTable.table = {
   'って': -0.5,
   'ちょ': -0.5 
};

実際はカーニングテーブルにたくさんのペアを設定していきます。

カーニング値を反映

先ほど作ったテーブルデータを利用して、文字のカーニングを設定します。
カーニング値を反映する場合は

1.ワイルドカード設定を調べる
2.具体的なペアの値を調べる

という順番で進めます。より具体的な方を優先するということです。

PIPKerning.js

var characters = str.split('');
var table = PIPKerningTable.table;
var len = characters.length - 1; // 最後の文字は何も指定しない。
var output = "";
for(var i = 0; i < len; ++i){

    // 次の文字ワイルドカードのペアを調べる
    var pair   = characters[i] + '*';
    var result = table[pair];

    // ワイルドカードと次の文字
    if(!result) {
        pair  = '*'+characters[i+1];
        result = table[pair];
    }

    // 文字のペア
    pair = characters[i] + characters[i+1];
    if(table[pair]) result = table[pair];

    if(!result) result = 0;
   // result = 0;
    output += '<span style="display: inline-block; letter-spacing: '+ result +'em;">' + characters[i] + '</span>';
}

// 最後の文字
output += '<span style="display: inline-block; ">' + characters[len] + '</span>';

こんな感じで実装できます。
これでそれなりにカーニングが効くようになりました。
しかし前回の行頭処理に不具合が発生します。それは本来は改行される文字が、カーニングによって改行位置がずれるということです。
また、ブラウザがリサイズされた場合の処理も必要です。
この辺りは次回に対方法を紹介します。

ソースコードについては、完成した時にgithub上にでも公開します。(すみません、まだ開発中なので...)