「かっこ」の隙間が空きすぎるのでjQueryで文字詰めした

「」や『』など2Bytes文字なのに1Byteみたいな文字間になっていて、文章中にカッコを使うと妙な隙間ができてしまいます。
文中に入る分には気にならないのですが、行頭がカッコだと半角スペース分下がって見えて気になる。

FLAutoKerning.jsというファイルもあるらしいのですが、新たにjQueryのライブラリを読み込ませるのはメンドくさい！

原始的なやり方ですがjQueryで対応してみました。

jQueryでタグ内にカッコがあったらclassをつける

指定したタグの中に「」があればclass付きのspanで囲います。

あとはclassにスタイルを設定すれば対応完了です。

基本的にはp, a, h1, h2, h3, h4, h5のタグ内でしか括弧は使わないと思うので事足りると思います。

jQuery

$('p, a, h1, h2, h3, h4, h5').each(function(){
    var txt = $(this).html();
    $(this).html(txt.replace(/「/g,'「')
                    .replace(/」/g,'」'));
});

/gの前の文字とspanで囲われている文字を変更すると違うカッコにも対応できます。

css

.kerning_before { margin-left: -0.5em; }
.kerning_after { letter-spacing: -0.5em; }

まとめ

今回やっていることは単純にspanで囲うだけなので、html上で直接記述してしまってもよいのですが、下記のデメリットがあるのでjQueryを使って対応してみました。

• 1つ1つ設定するのは大変
• カッコがあるたびにspanで囲っているとソースの視認性が下がる、修正が大変
• なにより面倒

違う種類のカッコに対応したい場合は、replaceの文字を変更すればOKです。

「そんな冗長的なコードしかかけねぇのかヨ！もっと簡単にかけるゼ」という方がいらっしゃったら教えてください！