• Home
  • twitter
  • Facebook Page
  • google+
  • RSS
  • follow us in feedlyfeedly
  • Contact Form
OPEN
2013/07/26

テキストを均等割り付けしてくれるjQueryプラグイン「jQuery.justify.js」

Justified
Justified / ark

先日仕事で「Webページにおける文字の均等割り付け」を行わなければならない場面がありまして。
「そんなんCSSで簡単にできるでしょ」と思っていたら、text-align:justify;がwebkit系のブラウザだと上手く動かないことが発覚。

無理やりスペースつこうて揃えてやろうかなどと思っていたところ、NxWorld@nxworld_net さんにテキストの均等割り付けをしてくれるjQueryプラグイン「jQuery.justify.js」を教えて頂きました:)

参考:文字の均等割り付けを行うjQueryプラグイン jQuery.justify.js | php-tips




神か。

使い方

まずはプラグインをダウンロードいたしましょう。
あとはヘッダーに

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.justify.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('td.hoge').justify();
});
</script>

と記述すれば、自動的に適切なletter-spacingを与えてくれると言うわけです。(上の例ですとtd.hogeに記述されたテキストが均等割り付けになります。)チョーカンターン。

 

jquery-justify
こんな感じ。
詳しくはデモページを作ってみたのでコードを見たい方はどうぞ。

どうしてもテキストを均等割り付けしなければならない案件があった時はこちらを使わせて頂くのも手ではないでしょうか:)

こんな記事もオススメです

7つのサンプルでjQueryを学ぼう!「jQueryが全く分からない人のため」の超初級者向け入門講座

小粋空間さんの作った「ノンプログラマーのためのjQuery生成ツール」が初心者の勉強用にうってつけでスゴイ便利

[jQuery][CSS]見やすい表組みを作ろう!jQueryを使用して表組み(table)の配色をストライプにする

SPONSORED LINK

FB Comments

About This Site

Mac,iPhone,Evernote,Web,Foodを中心に様々な情報をお届けするブログです。
ふざけた文体が目につきますが、本人はいたってふざけております。
ご意見・ご感想は info[at]ozpa-h4.com もしくはコンタクトフォームまでどうぞ。
広告掲載、執筆、取材などの依頼も受け付けております。
さらに詳しく

SNS

×