Mozilla Japan ブログ

Firefox 2 までは日本語ではないテキストでは、Web デザイナの方がトリックを使わない限り、半角スペース (U+0020) 以外では改行されませんでした。そのため、長い URL が以下のようにはみ出したり、これが原因で Web ページ全体のデザインが壊れたりすることがありました。

これが、Firefox 3 では以下のように改行されるようになりました。

この修正は、多くの Internet Explorer (以下 IE) 向けにのみデザインされた Web ページの表示を、そのデザイナの意図通りに表示できるようになったことを意味します。

それでは、 Web デザイナの方には細かい仕様や注意点について、少し詳しい解説をさせて頂きます。

デザイナの方が気になるのは、IE との互換性かもしれません。しかし、Firefox 3 のレンダリングエンジン、Gecko 1.9 は IE と全く同じ仕様を採用することはできませんでした。IE の改行の仕様とほぼ同じ仕様を実際に開発版で採用してみると、様々な言語圏や、特定のユーザ層から苦情が相次いだためです。このため、Gecko 1.9 は互換性よりも、ユーザにとってより良い仕様を考えることにしました。

Gecko 1.9 での改行の詳しい仕様は MozillaWiki に記載していますが、英語版しかないので、ここで簡単に要約を紹介しておきます。

Gecko 1.9 の改行は以下の原則に基づいています。

• Gecko 1.8.1 以前のレイアウトとの互換性のため、欧米の文字の周りでは基本的には改行しない
• 日本のマーケティングために URL は改行可能な仕様とする
• 欧米のテキストであっても、ハイフンの周囲は改行可能とする
• あまりリスクのある変更はしない

以下、細かいルールです。

• 空白文字 (Unicode で定義されている様々な空白を含む) の周りでは改行する
• 改行可能位置の近くでは改行可能とは考えない
  • 単語の先頭近くでは改行しない
  • 単語の末尾近くでは改行しない
  • 直前の改行可能な位置の近くでは改行しない
  • 改行可能ではない空白の近くでは改行しない
  • 「近い」をGecko 1.9 では 6 文字とする
• 閉じ括弧と開き括弧の間は改行可能とする
• ハイフンの後ろでは改行可能とする
  • ハイフンの前後が数字の場合は改行しない
  • ハイフンが連続する場合はその間では改行しない
  • 単語の先頭にあるハイフンの後ろでは改行しない
  • ハイフンの直前の文字か、直後の文字が数字でも日本語、中国語以外の文字の場合、ハイフンの後ろで改行しない
• ファイルパスを改行可能にするために、バックスラッシュ (U+005C) とスラッシュ (U+002F) の前で改行可能とする
  • 単語内の最初のこれらの文字の前では改行しない
  • これらの文字が連続する場合、その間では改行しない
• URL のパラメータ部分を改行可能にするために、'&' (U+0026) と';' (U+003B) の前でも改行可能とする
  • ただし、その前に '=' (U+003D) が無い場合は改行しない
• URL 内のパーセントエンコーディング文字列でも改行可能とするため、'%' (U+0025) の三文字手前が '%' の場合のみその '%' の前で改行可能とする

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

また、この修正で、textarea 要素内でも URL 等が改行されるようになりましたが、textarea 要素に、wrap="hard" を指定していても、今までと変わらず、URL 等は改行されて送信されないのでご注意ください。この挙動は IE とは異なっています。Gecko 1.9 での修正はあくまで、表示のみに限定されていて、データの送信時等の挙動は変更していません (今のところ将来のバージョンでも修正予定はありません)。

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

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

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

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

Gecko 1.9 では URL のような記号混じりの長い単語は自動で改行されるように改善されましたが、単なる長い単語は今後も改行しませんので、この仕様では問題がある場合、デザイナの方がソフトハイフンを利用することで改行可能位置を指定できます。

例えば、HyperText を Hyper­Text と記述すると、普段は HyperText とハイフン無しで表示されますが、この単語内で改行される場合、

Hyper-Text

とハイフン付きで表示されます。他のメジャーブラウザでも実装されているようですし、Firefox 2 はソフトハイフンの特殊な処理は対応していませんが、表示時に無視する (改行も表示もしない) ので、特に副作用なくご利用頂けます。

ただし、ユーザがソフトハイフンを含むテキストをコピーすると、ソフトハイフンもそのままコピーされますので、ユーザにコピーされる可能性のある例示等では、ソフトハイフンを整形目的で使うことが出来ませんのでご注意ください。