東京のWeb制作会社LIGLIGならできるおもしろいこと。デザインシェアこんにちは、机に置いたおもちゃの日焼けが気になるもりたです。今回は、前からちょっと気になっていたウェブフォントをカーニングできるJS「HTMLで文字詰めするタイポグラフィー用JS」を試してみました。http://fladdict.net/blog/2011/02/auto-kerning.htmlご存知のとおり、jsを使わなくてもletter-spacingを使ってcssだけで設定しようと思えばできるんですが、ひと文字ずつの設定となるとhtmlもcssもすっきりしなくなる上にめんどくさい!こうパッとガッとスッと設定したい!そんな希望を叶えてくれるのが「FLAutoKerning.js」です!ポイント1:導入が楽です手順は簡単、サイトからファイルをダウロードしてjqeryと一緒に読み込ませて<head>内に設定を書くだけ。入れてみたデモはこちら。■demoちなみに上のコードを改良したものを公開している方もいらっしゃいました。Gisthttps://gist.github.com/846898さらに改良版をwordpressに組み込む場合はこちらの記事が参考になります。タメハhttp://tameha.net/wordpress/jquery-flautokerning-js/ポイント2:自分でもペアを設定できますただ入れるだけでも綺麗にカーニングしてくれるのですが、なにぶん日本語って文字が多くてカーニングが必要なペアが多い!設定されているペアは仮名と記号の基本的なものしかないので、細かい部分は自分で設定していきます。個別の設定は、制作者のサイトからダウンロードしたFLAutoKerning.jsに直接書いていく事で可能です。上のデモではこんな感じで設定してみました。-0.1;//ひらがなp["。-0.05;この設定が増えれば増えるほど、入れただけでそのまま使えるJSに成長していくわけですね、素敵だ。自分の設定を公開するのはめちゃくちゃ恥ずかしいですが!『その詰めはないわー。』とか言われたら、やっぱりちょっとショックなのでどうぞ優しく教えてください。して見た通りすごくアナログな感じですが、逆に他の人のカーニング設定を数字で見ることができて勉強にもなるところが普及して欲しいポイントなのです!実際、自分の個別設定を公開している方はまだ少なく、私が見つけられたのはこの記事しかありませんでした。SANOGRAPHIXhttp://www.sanographix.net/2012/04/3rdmarriage-renewal/設定の公開情報を私が絶賛募集中ですポイント3:使いやすくしてくれている人がいますカーニングの設定を、コードを直してリロードして...と確認しながら書くのめんどくさい!もっと楽じゃないと使わない!という方はこちら。「FLAutoKerning.js」のインターフェイスを作ってみましたよ。tweet.http://creative-tweet.net/blog/2012/05/ui-for-flautokerning.htmlコードとブラウザを行ったりきたりせず、ブラウザ上だけで設定を作ることができるインターフェースだそうです。TypeSquareには登録したもののまだ使ってなくてなんとももったいないのでコレでひとしきり遊んでみたいと思います。問題が......ところで、こんなに便利なFLAutoKerning.jsですが一つだけ問題がありました。コードを見ると段落頭に来る括弧に-0.5emのカーニングがついているのに、......?動いてない?HTMLでカーニング指定のクラスをつけた<p>の後ろに改行を入れてしまっていたので、この改行をなくすとこのとおりその次の行の「それに〜」という書き出しは<br>で改行を入れていたため行頭のカーニングが処理されないのは仕方ないのかもしれないんですが、<br>の後ろに入れていた改行をとったらこんな風になってしまいました。おおおお......他には行頭にある丸括弧に関しても同じ処理が行われるようです。ダブルクォーテーションや二重カギ括弧にも同じ指定がされてるんですが、これらが<br>の直後に改行なしで書かれても、単純にカーニングが効かなくなるだけのようです。改良版でも同じ事を試してみましたが、この動きに関しては元のコードと変わりないようでした。<p>タグを「段落」として使用するなら、<br>直後にカギ括弧が来るパターンは頻度は低くともゼロではないので、プログラミングに強い方が改良してくれるのを期待しています!他力本願ですみません!もりたでした。POSTLIGへの自由なメッセージお待ちしています頂いたご意見への回答は行っておりません。