URLのような長い半角英数文字でレイアウトが崩れるのを防ぐ

  • 2007年7月20日 02:32
  • php

Web屋泣かせの話として、ユーザの入力文字を表示する際に、ユーザがありえないような長い文字を入力してページレイアウトを崩れさせる、な話があるかと思います。全角文字の場合はCSSで表示ブロック要素に対してwidthをちゃんと定義しておくと崩れることはそうそう無いと思うのですが、問題は半角英数文字の場合。特にイジワルをしなくても長いパラメータが付いたURLなんかの場合は、意図せずともこんな場面に出くわすことになるかと思います。

そこで超便利なタグでwbrというタグがあります。これ、W3C の HTML/XHTML の仕様には無い拡張仕様なんですけども、そこが目をつぶれる場合ならかなり有効です。

w3g.jpによると、wbr要素は次のような説明になっています。

wbr要素(word break)は文字列の行末での折り返しを禁止する nobr要素内で改行の候補位置を定義します。終了タグはなく、内容をもたない空要素です。nobr要素内で改行が禁止されている場合に、wbr要素は改行の候補位置を定義します。Netscape Navigator 2.0(Netscape の前身)の時に独自に採用された機能ですが、既に Netscape ではこの機能は廃止されており、Netscaoe, Firefox では nobr要素内における改行の候補位置となる機能ではなく、wbr要素単独で別の機能をします。

単独で使う wbr要素の別の機能とは、nobr要素内でなくとも、欧米語は半角スペースで単語を区切るため、視覚環境の UA においても半角スペースの部分で折り返しが行われますが、wbr要素を指定することで、半角スペース部分での折り返しに加えて、改行箇所を明確に指定することができます。たとえば、やたらと長い URI を記述する場合、URI は半角スペースが含まれない半角文字で構成されているので、表示域に合わせた自動的な文字列の折り返しは行われず、延々と横長に表示されるため表示域からはみ出して横スクロールを表示することがあります。そこで、横スクロールが表示されるのを回避したい場合に URI の途中で wbr要素を指定することで、表示域の縮小に合わせた改行が可能になります。

単独で使う wbr要素には、Netscape, Firefox の Gecko系が対応しているのですが、逆に Opera では nobr要素内の wbr要素の機能にのみ対応しており、単独で使う wbr要素の機能には対応していません。Internet Explorer はどちらの機能にも対応しているのに対して、Safari では wbr要素は完全に無効です。UA ごとに実装が大きく異なり、如何にも独自機能らしいです。

http://w3g.jp/xhtml/dic/wbr より抜粋

と、いうわけでSafari以外は主要ブラウザなら対応していると考えてよさそうです。もしPHP+Smartyを使っている環境でしたらwordwrap修飾子を利用することで簡単に対応可能です。

{$str | wordwrap:10:"<wbr />"}

wordwrapの第一引数は第二引数で入れる改行文字を入れ込むバイト数です。上記例だと10byte毎にwbrタグが挿入されます。

ところでこの手の問題って結構有名な問題だと思うのですが、XHTML strictな方々はどのような方法で解決しているのでしょう??そもそも、そんな問題に悩まないようなCSSデザインを組むべき??

関連広告

Trackbacks:0

TrackBack URL for this entry
http://blog.katsuma.tv/mt-tb.cgi/81
Listed below are links to weblogs that reference
URLのような長い半角英数文字でレイアウトが崩れるのを防ぐ from blog.katsuma.tv

Home > php > URLのような長い半角英数文字でレイアウトが崩れるのを防ぐ

Search
Feeds

Return to page top