Blog

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

2015.01.21Cat:jQuery デザイナー

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

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

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

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

example-text

 

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

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

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

 

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

ご紹介いたします。

 

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

DEMO

 

jQueryコードと解説

まずjQueryのコードです。

HTMLが

の様な場合、

 

仕組みとしては、

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

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

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

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

 

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

是非ご利用ください。

Author Profile

ninomiya
ninomiya

Webデザイナー兼コーダーです。
イラストを描くのも好きです。
SVGとCanvasを使ったWEBアプリにも興味があります。
よろしくお願いいたします。

» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ