段落幅を自動調整するJavaScript

可変幅のレイアウトを考える上で、DIV要素内に画像とテキストを入れると、ブラウザがやけに狭い部分へ無理矢理文字を流し込もうとして読みにくいレンダリング結果となることがあります。まあ、透明な画像で最低横幅を確保するという手もありますが、JavaScriptで幅を調整してみた時に作ってみたJavaScriptです。表示後のブラウザ画面リサイズは考慮していませんので使用する際はその点にご注意ください。

jQueryを使うので、まずはHEAD要素内に以下の行を追加してjQueryを利用できるようにします。確認はしていませんが、おそらくjQueryのどのバージョンでも大丈夫そうかな。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

ここではGoogleからjQueryを読み込んでいますが、自分のWebサイトにjQueryを置いて、それを読み込ませるようにしても問題ありません。

続けてjQueryを読み込ませた次の行へ以下のようにJavaScriptを記述してください。この部分は外部のJavaScriptファイルにしておいたほうがメンテナンスが楽になります。

<script type="text/javascript">
$(function() {
	var letterwidth=$("div.box p").innerWidth();
	var spacewidth=(letterwidth % ($("div.box img").outerWidth()));
	if (spacewidth<200) $("div.box p").css('width',letterwidth-spacewidth+'px');
});
</script>

この例ではdiv.boxを処理対象にしています。段落の文字最小幅はPX単位で行ない、この例では200PXです。

ブラウザはFirefox、Google Chrome、Internet Explorer 6/7/8/9、Opera、それとChrome for Androidを用いて表示を確認しました。

Sample

通常

ああああああああああああああああああああ

Script使用

ああああああああああああああああああああ

なお、上のサンプルは以下のような組み合わせとなっています。class属性はsolidは1pxの線を表示しているだけで、clearfixはWebデザインをしている人ならばお馴染みの指定で独自にカスタマイズするような変なことはしていません。

HTML部分

<div class="solid clearfix">
<p class="c">Sample</p>
<div class="box">
<p class="c">通常</p>
<p><img src="/img/2012/fleet.png" alt="" width="240" height="86"><img src="/img/2012/fleet.png" alt="" width="240" height="86">ああああああああああああああああああああ</p>
</div>
<div class="box">
<p class="c">Script使用</p>
<p><img src="/img/2012/fleet.png" alt="" width="240" height="86"><img src="/img/2012/fleet.png" alt="" width="240" height="86">ああああああああああああああああああああ</p>
</div>
</div>

CSS

<style type="text/css">
div.box{width:520px;float:left;border:solid 1px #0aa;margin:5px;padding:5px}
div.box img{float:left;margin-right:5px}
</style>

JavaScript部分(片方をサンプルにするためのカスタマイズあり)

<script type="text/javascript">
$(function() {
	var letterwidth=$("div.box p").innerWidth();
	var spacewidth=(letterwidth % ($("div.box img").outerWidth()));
	if (spacewidth<200) $("div.box:last-child p").css('width',letterwidth-spacewidth+'px');
});
</script>