@fladdictさん作の「FLAutoKerning.js」で使用するカーニングペア情報を、ブラウザで設定できるインターフェイスをつくってみました。
ペアでしかカーニングできないという低機能ですが、キーボード操作だけでカーニングできます。ただし、モリサワのTypeSquare向けに作成していますので、他のWebフォントで使えるかどうかは未検証です。実際にご利用の際は、ご自身のサーバに設置してお使いください。（ライセンス的なアレで）
- Kerning Tuner デモページ（デモはWebフォントを読み込んでいません。）
設置方法
- ソースをダウンロードし、index.htmlにご自身のTypeSquareで取得できるscript要素をコピペしてください。また、予め使用するフォントが決まっているなら、input#font_familyのvalue属性を、fontfamily.cssにあるclass名にしておくと良いと思います！
- 「FLAutoKerning.js」をダウンロードし、特にソースを変更していないならindex.htmlと同じ階層へ入れます。
- ローカルなりリモートなりへ設置してアクセス。
画面の説明と使い方
- Aは、カーニングする文字を設定します。文字を入力し、enterとかtabで確定です。確定した場合は、入力した文字にWebフォントを適用するため、画面を一旦リロードします。
- Bは、Aで入力した文字を表示し、実際の詰め具合を確認できます。
- Cは、カーニングの値です。左右の矢印キーまたは数値入力でカーニングしてください。
- Dは、左右の矢印キーでカーニングした際の増減値を設定します。enterとかtabで設定を確定します。
- Eは、カーニングペア情報を出力したtextarea要素を表示/非表示します。これをFLAutoKerning.processの第2引数として設定してやればOKです。
- Fは、現在適用しているWebフォントです。デフォルトでリュウミンLが設定されているので、お好みで変更してください。
- Gは、今まで設定したカーニングペア情報を表示します。「x」をクリックすることで、そのペア情報のみ削除できます。文字ペアが同じ場合は、上書きされます。
順番としては、まずはFのフォントを変更し、Dを調整しつつA→Cの繰り返しになるかと思います。程よくペアの編集ができたらEからソースをコピーしてください。
ライセンスなど
とりあえずMITとして公開しておきます。
その他
日本語のWebフォントもずいぶんと出揃って来ておりまして、思い思いのフォントを使える環境も整ってきました。しかし、フォントが詰め情報を持っていないようなので、二の足を踏んでる場合もあるんじゃないでしょうか。
で、きれいな文字組を少しでも手軽にできたらいいなぁと思いから、FLAutoKerning.jsのカーニングペア情報を生成できるアプリ的なものを作成してみました。
また、先の通りGithubで公開しておりますので、ご自由にいじってやってください。正直JavaScriptを覗かれると恥ずかしい限りですが、ご興味のある方はいろいろとご指摘いただけると幸いです。
カーニングペア情報を公開すると、みんな幸せになれるかも！
