SPONSORED BY
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に直接挿入
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, -0.4],
'。': [0, -0.4],
'（': [-0.4, 0],
'）': [0, -0.4],
'〔': [-0.4, 0],
'〕': [0, -0.4],
'［': [-0.4, 0],
'］': [0, -0.4],
'｛': [-0.4, 0],
'｝': [0, -0.4],
'〈': [-0.4, 0],
'〉': [0, -0.4],
'《': [-0.4, 0],
'》': [0, -0.4],
'「': [-0.4, 0],
'」': [0, -0.4],
'『': [-0.4, 0],
'』': [0, -0.4],
'【': [-0.4, 0],
'】': [0, -0.4],
'・': [-0.22, -0.22],
'：': [-0.22, -0.22],
'；': [-0.22, -0.22],
'｜': [-0.22, -0.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 +=
'<span style="display:inline-block;">' +
n +
'</span>'),
(d +=
0 !== g || 0 !== k
? '<span data-kerned style="display:inline-block;margin-left:' +
g +
'em;margin-right:' +
k +
'em;">' +
o +
'</span>'
: o),
void 0 !== n &&
(d +=
'<span style="display:inline-block;">' +
n +
'</span><br>'))
: (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
after
所感
MacOS上のSafariで試し、"Hiragino Kaku Gothic ProN"に適用されたのを見て。
括弧や感嘆符より、句読点、特に読点(、)に効いてるのがわかる。
その差は微妙だけれど、スッと読みやすいのはやはりカーニング後。
こちらに慣れると、カーニングしてない方の句読点は"区切り"感が強すぎる。
一方で、中黒(・)は詰まりすぎて、"並列"感がなくなるかも。
このあたり、ちゃんとカーニングテンプレートを用意してあげれば解決しそうだし、
適用後もほとんど表示が遅くならなかったので、このまま適用し続けることにします。
制作者のKARAPPOさんに感謝です:)
