この日記はMozillaのプロダクトへの貢献者としての私の成果を中心に、気になったバグやWeb界隈の話題について書いていますが、 断り書きがある場合を除き、いかなる団体のオフィシャルな見解ではありません。あくまでも個人的なものです。 Mozilla Foundation、Mozilla Corporation、及び関連企業の公式情報ではないことに注意してください。

現在、XHTML 1.0 (もどき)から、HTML5なコンテンツに修正中です。古い日記は修正が完了していませんので表示が崩れます。 順次、修正していく予定ですのでしばらくお待ちください。

もずはっく日記(2009年6月)

2009年6月21日

<WBR>ハックと決別を
初回投稿日時: 2009年06月21日18時14分56秒
最終更新日時: 2009年06月21日18時18分48秒
カテゴリ: CSS Firefox Google Chrome HTML Mozilla Core Safari
SNS: (list)

Fx2.0(Gecko 1.8.1)まではURL等の長い文字列が一つの単語として認識され、改行されずにブロックからはみ出す、という問題がありましたが、Fx3.0(Gecko1.9)で解決されました。そして、現在、Fx2.0系列は既にサポートを終了し、セキュリティアップデートを提供していません。また、Fx2.0系のユーザにはメジャーアップデートの案内も通知済みです。

特殊なURLを表示するケース(例えば、ドメイン名やパス内のディレクトリ名やファイル名が異常に長い、異様に幅の狭いところに表示しようとしている)を除いて、URLがブロックからはみ出す心配は現役のGecko系ブラウザでは問題なくなっています。

ですが、その後で勢力を伸ばしてきたWebKitではURLの改行が駄目駄目なようです。-や、?で改行する程度のみのようです。しかし、幸運にもWebKitは既にword-breakプロパティをサポートしているので、word-break: break-all;を利用すれば問題無くなりそうです。

そう、現役のメジャーなブラウザでは既に<WBR>ハックを使う必要は既に無くなっています。動的なコンテンツであれば、対WebKit用に、URLな文字列を自動リンクする際に、

<a href="http://example.com/" style="word-break: break-all;">http://example.com/</a>

としておけば、醜い<WBR>ハックと決別することができます(決して、全文には指定しないでください。日本語の禁則処理も行われなくなるので、読みにくくなるだけです)。

<WBR>ハックは、

  1. 転送容量が肥大化する
  2. W3Cで合意の得られなかったレガシーな要素なので、階層の深い、滅茶苦茶なDOMツリーが構築される可能性がある
  3. 各WBR要素毎に要素ノードが作られる
  4. 分断されたURLの欠片それぞれが独立したテキストノードになってしまう

等、問題が非常に大きいので是非、Webデザイナの方は<WBR>ハックの除去を(可能なら)検討してみてください。

関連するかもしれないエントリ

関連するかもしれないエントリを発見できませんでしたが、無いとは限りません。

このエントリへのリンク元