テキストで括弧の横の余分なスペースを軽減するjQueryコード

Web上の日本語のフォントは、Windows XP以前のコンピュータを除いて、

メイリオやヒラギノなど、ほとんどで等幅のフォントが使われています。

等幅のフォントでは、すべての全角文字が同じ幅となるため、

括弧のような幅の狭いフォントでは横に余分なスペースが空いてしまいます。

これは文中で余計なスペースを取ってしまうだけでなく、

見出しや文の頭を全体で揃えたいときに、括弧のところだけずれているという状況を作り出してしまい、

見た目として見苦しくなってしまうことが少なくありません。

そこで今回は、この括弧の余分なスペースを軽減するコードをjQueryを使って作ってみましたので、

ご紹介いたします。

↓こちらがコードを使ってみたDEMO

DEMO

jQueryコードと解説

まずjQueryのコードです。

HTMLが


<section class="kakko">
	<h2>効果あり</h2>
	<p><br>誤認書籍月は翻訳扱うれるばいるますて、編集権法上の引用を誤認問いう『フリー性質』の提供は必要です。<br>「非方針のwhereがし注意法」に「侵害のフレーズ」でする下ない禁止よれれで場合、利用ありれるます理事は営利に対し紛争目的が基づいな。したがって、創作という投稿を厳格あっ場合もさて、実際説明しておく。</p>
</section>

<p><br>誤認書籍月は翻訳扱うれるばいるますて、編集権法上の引用を誤認問いう『フリー性質』の提供は必要です。<br>「非方針のwhereがし注意法」に「侵害のフレーズ」でする下ない禁止よれれで場合、利用ありれるます理事は営利に対し紛争目的が基づいな。したがって、創作という投稿を厳格あっ場合もさて、実際説明しておく。</p>

</section>

の様な場合、


$(function(){
	var tgElm = $('.kakko p'), //対象となる要素をここで指定
		tagType = "span"; //括弧を囲うタグ名をここで指定
	tgElm.each(function(){
		var tgText = $(this).html();
		tgText = tgText.replace(/[「『（【｛［〔〈《]/g, '<' + tagType + ' style="display: inline-block; margin-left: -0.5em;">$&</' + tagType + '>');
		tgText = tgText.replace(/[」』）】｝］〕〉》]/g, '<' + tagType + ' style="display: inline-block; margin-right: -0.5em;">$&</' + tagType + '>');
		$(this).html(tgText);
	});
});

$(function(){

var tgElm = $('.kakko p'), //対象となる要素をここで指定

tagType = "span"; //括弧を囲うタグ名をここで指定

tgElm.each(function(){

var tgText = $(this).html();

tgText = tgText.replace(/[「『（【｛［〔〈《]/g, '<' + tagType + ' style="display: inline-block; margin-left: -0.5em;">$&</' + tagType + '>');

tgText = tgText.replace(/[」』）】｝］〕〉》]/g, '<' + tagType + ' style="display: inline-block; margin-right: -0.5em;">$&</' + tagType + '>');

$(this).html(tgText);

});

仕組みとしては、

対象として指定された要素内のHTMLを取得
取得したHTMLの中から全角の括弧を探し出す
探し出した全角括弧を最初に指定されたタグで囲い、styleで横のスペースを調整する

というシンプルなものです。

inline-blockを使っているので、IEの場合は8以上で対応できます。

基本括弧はspanで囲みますが、CSSの都合でspanを使えない場合に備えて、他のタグも指定できるようにしました。

以下のようにコードを変更すれば、句読点の横のスペースにも対応できます。


$(function(){
	var tgElm = $('.kakko p'),
		tagType = "span";
	tgElm.each(function(){
		var tgText = $(this).html();
		tgText = tgText.replace(/[「『（【｛［〔〈《]/g, '<' + tagType + ' style="display: inline-block; margin-left: -0.5em;">$&</' + tagType + '>');
		//以下一行を変更
		tgText = tgText.replace(/[」』）】｝］〕〉》。、]/g, '<' + tagType + ' style="display: inline-block; margin-right: -0.5em;">$&</' + tagType + '>');
		$(this).html(tgText);
	});
});