「FLAutoKerning.js」のインターフェイスを作ってみましたよ。

@fladdictさん作の「FLAutoKerning.js」で使用するカーニングペア情報を、ブラウザで設定できるインターフェイスをつくってみました。

ペアでしかカーニングできないという低機能ですが、キーボード操作だけでカーニングできます。ただし、モリサワのTypeSquare向けに作成していますので、他のWebフォントで使えるかどうかは未検証です。実際にご利用の際は、ご自身のサーバに設置してお使いください。(ライセンス的なアレで)

設置方法

  1. ソースをダウンロードし、index.htmlにご自身のTypeSquareで取得できるscript要素をコピペしてください。また、予め使用するフォントが決まっているなら、input#font_familyのvalue属性を、fontfamily.cssにあるclass名にしておくと良いと思います!
  2. FLAutoKerning.js」をダウンロードし、特にソースを変更していないならindex.htmlと同じ階層へ入れます。
  3. ローカルなりリモートなりへ設置してアクセス。

画面の説明と使い方

  1. Aは、カーニングする文字を設定します。文字を入力し、enterとかtabで確定です。確定した場合は、入力した文字にWebフォントを適用するため、画面を一旦リロードします。
  2. Bは、Aで入力した文字を表示し、実際の詰め具合を確認できます。
  3. Cは、カーニングの値です。左右の矢印キーまたは数値入力でカーニングしてください。
  4. Dは、左右の矢印キーでカーニングした際の増減値を設定します。enterとかtabで設定を確定します。
  5. Eは、カーニングペア情報を出力したtextarea要素を表示/非表示します。これをFLAutoKerning.processの第2引数として設定してやればOKです。
  6. Fは、現在適用しているWebフォントです。デフォルトでリュウミンLが設定されているので、お好みで変更してください。
  7. Gは、今まで設定したカーニングペア情報を表示します。「x」をクリックすることで、そのペア情報のみ削除できます。文字ペアが同じ場合は、上書きされます。

順番としては、まずはFのフォントを変更し、Dを調整しつつA→Cの繰り返しになるかと思います。程よくペアの編集ができたらEからソースをコピーしてください。

ライセンスなど

とりあえずMITとして公開しておきます。

その他

日本語のWebフォントもずいぶんと出揃って来ておりまして、思い思いのフォントを使える環境も整ってきました。しかし、フォントが詰め情報を持っていないようなので、二の足を踏んでる場合もあるんじゃないでしょうか。

で、きれいな文字組を少しでも手軽にできたらいいなぁと思いから、FLAutoKerning.jsのカーニングペア情報を生成できるアプリ的なものを作成してみました。

また、先の通りGithubで公開しておりますので、ご自由にいじってやってください。正直JavaScriptを覗かれると恥ずかしい限りですが、ご興味のある方はいろいろとご指摘いただけると幸いです。

カーニングペア情報を公開すると、みんな幸せになれるかも!

tags