Affirmative Way

続・FireFoxのテキスト自動改行

firefox, css

昨日の続き

ちょっと調べたらそっこーで公式見解が見つかった。

Firefox 3 の修正内容のご紹介 その3 — URLも改行されるように | Mozilla Japan ブログ

とにかく意図しない場所での改行が発生しないように、極力制限をかけている仕様になっています。これは、単純に文字だけを見て改行するかどうかを決定すると、日付の書式や、時間の書式等まで改行してしまったりすると、Web ページの内容自体を壊しかねないためです (日本語以外の言語圏では単語の途中で改行するという発想自体があまりないことの方が多いことに注意してください)。将来のバージョンではより改行の発生パターンは制限されるかもしれませんが、これ以上、改行可能位置が増えることはないと考えて頂いて良いと思います。

ﾏｼﾞｯｽｶ。。。増えないんすか。。

そして、この修正が完了した今、Web デザイナの方々にひとつお願いしたいことがあります。

Firefox 2 への妥協として、Web ページ側で「<wbr> ハック」を利用して、URL 等が改行されるようにしている Web サイトがあることを確認しています。<wbr> ハックは、若干ではありますが、転送量の増加、ブラウザ側のメモリ容量の増加、表示速度の低下など、デメリットがありますので、関係者の方は、 Firefox 2 のサポートが終了する際に、<wbr> ハックの利用をやめていただける様、お願いいたします。

最後に、日本では馴染みが薄いですが、ソフトハイフンの実装も行われたので紹介しておきます。

ソフトハイフンとは、HTML のソースコード上では、&shy; と記述する、特殊なハイフンで、その文字は普段は何も表示されません。ですが、ソフトハイフンの直後は改行可能と判断され、ここで実際に改行される時は、その改行位置にハイフンが表示されます。

ようするにFF2が動いてる限りは<wbr>を使っておけば自動改行されるけど、FF3だけになったら&shy;に置き換えて改行してねということらしい。

昨日に引き続き、他ブラウザで正しく動かないと困るので検証してみた

サンプルコード

<style type="text/css">
.wd{
	background:#ccaaaa;
	display:block;
	width:260px;
	white-space:normal;
	word-break:break-all;
}
</style>
<b>&amp;shy;入り</b>
<div class="wd">
asdf&shy;asdf&shy;asdf&shy;asdf&shy;asdf&shy;asdf&shy;asdf&shy;asdf&shy;asdf&shy;asdf&shy;asdf&shy;asdf&shy;asdf&shy;asdf&shy;asdf&shy;asdf&shy;asdf&shy;asdf
</div>
<b>&lt;wbr&gt;入り</b>
<div class="wd">
asdfasdf<wbr/>asdf<wbr/>asdf<wbr/>asdf<wbr/>asdf<wbr/>asdf<wbr/>asdf<wbr/>asdf<wbr/>asdf<wbr/>asdf<wbr/>asdf<wbr/>asdf<wbr/>asdf<wbr/>asdf<wbr/>asdf<wbr/>asdf<wbr/>asdf<wbr/>asdf<wbr/>asdf
</div>
<b>何もしてない場合</b>
<div class="wd">
asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdf
</div>

※全角数字の連続でも同じ挙動をしますが、長ったらしいので今回は省略

IE系の場合(IETesterで検証)

• &shy;、<wbr/>ともに無視され、通常のword-breakと同じ挙動になる

FireFox2の場合

• &shy; はうまく動作しない
• <wbr/>の時点で自動対象の対象になる

FireFox3の場合

• &shy; の時点で自動改行され改行前に - が表示される
• <wbr/>の時点で自動対象の対象になる

Chromeの場合

• &shy;、<wbr/>ともに無視され、通常のword-breakと同じ挙動

Safariの場合

• &shy; の時点で自動改行され改行前に - が表示される
• <wbr/>は無視され通常のword-breakと同じ挙動

Operaの場合

• &shy; の時点で自動改行され改行前に - が表示される
• <wbr/>は無視され自動改行が行われない

まとめ

ブラウザ	自動改行	&shy;区切り	<wbr/>区切り
IE系	○	×	×
FF2	×	×	○
FF3	×	○	○
chrome	○	○	×
safari	○	×	×
opera9.5	△	○	×

それぞれ区切りの有効になり方が違うので注意が必要だが、現状はFF2を無視すれば&shy;区切り+word-break:break-allしておけば主要なブラウザでは自動改行されるようだ。*1

なにげにChromeとsafariで挙動が違うのにはびっくりした。

cssとhtmlで逃げ方としてはこれがベストなのではないかと。

でも、デザイナーだけが入力する範囲のテキストだけならいんだけどなぁ。。

レアケースではあるけれどもデザインが崩れる可能性があるわけで、ユーザーからの入力値表示する場合なんかは&shy;をJSなりサーバー側で入れてあげる必要があるんだろうな。*2

とりあえずすっきりした。

Permalink | コメント(3) | トラックバック(0)