WordPressにkerning.jsを適用してみた

TL;DR

前から気になっていた、Webフォントを適当にカーニングしてくれるkerning.jsを試した。
とはいえ、今は下記CSSの通り、Webフォントを使ってない。

body {
  font-family:
  'Hiragino Kaku Gothic ProN',
  Meiryo, sans-serif;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

Webフォントじゃない、しかもカーニングテンプレートも用意しない状態でどこまでカーニングしていただけるのか。

footer-insert.phpに直接挿入

kerning.js
Simplicityの子テーマを使っているので、footer-insert.phpにスクリプトごと直接書いて実験。

<script type="text/javascript">
/*! kerning - v0.3.1 - 2014-12-13
* http://karappoinc.github.io/jquery.kerning.js/
* Copyright (c) 2014 Karappo Inc.; Licensed MIT */
!function($){return $(document).on("ready",function(){return $(document).find("[data-kerning]").each(function(){var a,b;return b=$(this).data("kerning"),a=null,b?(a=0<=b.indexOf("{")?$.kerning.parseJSON(b):b,$(this).kerning(a,$(this).data("kerning-extend"))):$(this).kerning()})}),$.kerning={},$.kerning.defaults={removeTags:!1,removeAnchorTags:!1,data:{kerning:{"、":[0,-.4],"。":[0,-.4],"(":[-.4,0],")":[0,-.4],"〔":[-.4,0],"〕":[0,-.4],"[":[-.4,0],"]":[0,-.4],"{":[-.4,0],"}":[0,-.4],"〈":[-.4,0],"〉":[0,-.4],"《":[-.4,0],"》":[0,-.4],"「":[-.4,0],"」":[0,-.4],"『":[-.4,0],"』":[0,-.4],"【":[-.4,0],"】":[0,-.4],"・":[-.22,-.22],":":[-.22,-.22],";":[-.22,-.22],"|":[-.22,-.22]}}},$.kerning.parseJSON=function(text){var O_o,o_O,obj;obj=null;try{return obj=JSON.parse(text)}catch(_error){O_o=_error,console.log("jquery.kerning : [WARN] As a result of JSON.parse, a trivial problem has occurred")}try{obj=eval("("+text+")")}catch(_error){return o_O=_error,console.error("jquery.kerning : [ERROR] JSON.parse failed"),null}return obj},$.fn.kerning=function(a,b){return null==b&&(b=!1),this.each(function(){var c,d,e,f,g,h,i,j;return h=$(this),c=h,j=h.html(),d="",i=f=null,e=function(){var a;for(a=[];h.find("[data-kerned]").length;)h.find("[data-kerned]").replaceWith(function(){return this.innerHTML}),a.push(j=h.html());return a},g=function(a){var g,k,l,m,n,o,p,q;for(h.find("[data-kerned]").length&&e(),i=b?$.extend(!0,{},$.kerning.defaults,a):$.extend({},$.kerning.defaults,a),f=i.data.kerning,i.removeAnchorTags?h.children("a").length?(c=h.children("a"),j=c.html().replace(/(<([^>]+)>)/gi,"").split("")):(c=h,j=h.html().replace(/(<([^>]+)>)/gi,"").split("")):i.removeTags?j=h.html().replace(/(<([^>]+)>)/gi,"").split(""):h.find("[data-kerned]").empty(),l=h.data("delimiter"),n=h.data("linebreak"),void 0!==l&&(j=(l+j.join(l)+l).split("")),m=p=0,q=j.length;q>=0?q>p:p>q;m=q>=0?++p:--p)o=j[m],g=0,k=0,f[o]?(g=f[o][0],k=f[o][1],void 0!==n&&(d+=''+n+""),d+=0!==g||0!==k?''+o+"":o,void 0!==n&&(d+=''+n+"
")):d+=o;return c.html(d),c.find("[data-kerned]").each(function(){var a;return a=$(this),0!==parseInt(a.css("text-indent"),10)?a.css("text-indent",0):void 0}),h},"string"==typeof a?"destroy"===a?(e(),h):0<=a.indexOf(".json")?$.getJSON(a,function(a){return g({data:a})}):(console.error("jquery.kerning : [ERROR] Invalid configure"),h):g(a)})}}(jQuery); jQuery(function($) { $('p').kerning(); }); </script>

とりあえず、pタグ全部。

こうなった

before

kerning.js before

after

kerning.js after

所感

MacOS上のSafariで試し、"Hiragino Kaku Gothic ProN"に適用されたのを見て。
括弧や感嘆符より、句読点、特に読点(、)に効いてるのがわかる。
その差は微妙だけれど、スッと読みやすいのはやはりカーニング後。
こちらに慣れると、カーニングしてない方の句読点は"区切り"感が強すぎる。
一方で、中黒(・)は詰まりすぎて、"並列"感がなくなるかも。
このあたり、ちゃんとカーニングテンプレートを用意してあげれば解決しそうだし、
適用後もほとんど表示が遅くならなかったので、このまま適用し続けることにします。
制作者のKARAPPOさんに感謝です:)

SPONSORED BY