Edited at
Quad incDay 22

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

More than 3 years have passed since last update.

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

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


文字のペアを定義

文字"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上にでも公開します。(すみません、まだ開発中なので...)