Firefox3の改行ルール
Firefox3がリリースされて早3ヶ月。幅が固定されたブロック要素の中に空白を含まない英数字（例えばクエリパラメータつきのURLや、長いソースコードなど）をそのまま記述するとはみだしてしまうということが、今までのFirefoxではよく見られました。静的なコンテンツであれば、対応は簡単な場合もあります。しかし動的なコンテンツの場合、はみだすのを防ぐ為にCSSハックを使ったり、JavaScriptを使ったりする必要がありました。 Firefox3ではレンダリングエンジンにGecko1.9が採用されたおかげで、改行ルールが変更されました。Gecko1.9の改行ルールを興味深く感じたので実際に試して見ました。
Gecko1.9の改行ルール
改行するかどうかの判断はおおまかに言えば以下の順序で行われるようです。
- 改行ポイントになりうる文字を探す。改行ポイントになりうる文字については以下です。
- Gecko1.9で定義されている空白(e.g., ‘ ‘)
- Gecko1.9で定義されているハイフン(e.g., ‘-‘)
- スラッシュ(‘/’)、バックスラッシュ(”)
- アンパサンド(‘&’)、セミコロン(‘;’)
- パーセント(‘%’)
- 1に該当する文字の前後を見て、改行ポイントかなるかどうか判断します。以下に該当する場合は改行ポイントになりません。
- 単語の開始位置から6文字以内にある場合
- 単語の終了位置から6文字以内にある場合
- 他の改行ポイント位置から6文字以内にある場合
- 空白文字として扱われない特殊なスペース(NO-BREAK SPACEなど)が6文字以内にある場合
- ハイフンの前後が数字の場合
- 単語の中でスラッシュ、バックスラッシュが最初に現れた場合
- 単語の中でスラッシュ、バックスラッシュが続いている場合
- アンパサンド、セミコロンの前の文字列に等号(‘=’)が含まれない場合
- パーセント前後3文字目がどちらもパーセントでない場合
- 改行ポイントであれば改行を行う。
改行ポイント 改行位置 空白 改行に置き換わる ハイフン 文字の後 スラッシュ
バックスラッシュ文字の前 アンパサンド
セミコロン文字の後 パーセント 文字の前
詳しくは下記のページを見てください。
Gecko:Line Breaking – MozillaWiki
日本語にも配慮してなのか、URL、ファイルパスも改行してくれそうな感じです。では実際に今までのFirefox(version 2.0.0.16)で今までの現象を見てみることにします。
サンプルの作成
幅が固定されたブロック要素を作成し、ブロック要素の中に幅を超える文字列を配置します。文字列については以下のものを配置しました。
(※U+XXXXはユニコードのコードポイントを表しています）
- 改行ポイントを含まない文字列
- Gecko1.9で定義されている
空白(U+0020 SPACE)を含む文字列 - Gecko1.9で定義されている
空白(U+2003 EM SPACE)を含む文字列 - Gecko1.9で定義されている
ハイフン(U+2010 HYPHEN) を含む文字列 - Gecko1.9で定義されている
ハイフン(U+2010 HYPHEN) を含む文字列、但し前後は数字 - Gecko1.9で定義されている
ハイフン(U+00AD SOFT HYPHEN) を含む文字列 - Gecko1.9で定義されている
ハイフン(U+2013 EN DASH) を含む文字列 - Gecko1.9で定義されていない
ハイフン(U+2014 EM DASH) を含む文字列 - URL文字列 （スラッシュ、アンパサンド、パーセントを含む）
- Fileパス （バックスラッシュを含む）
実際にFirefox2(version 2.0.0.16)で表示したものが図1になります。
図1:Firefox2(2.0.0.16)で表示 (クリックで拡大します。)
『Gecko1.9で定義されている空白(U+0020 SPACE)を含む文字列』以外は全て改行されていません。(U+0020 SPACE)が改行されなければ、英文を書く時に困りますから当然かもしれません。 それぞれ、Firefox2(version 2.0.0.16)と Gecko1.9が採用されたFirefox3 (version 3.0.1)と比較していきます。
Gecko1.9で定義されている空白
はじめにGecko1.9で改行される空白について確認してみます。
空白として定義している文字を以下に示します。
- U+0020 (SPACE)
- U+0009 (CHARACTER TABULATION)
- U+000D (CARRIAGE RETURN)
- U+2000 (EN QUAD)
- U+2001 (EM QUAD)
- U+2002 (EN SPACE)
- U+2003 (EM SPACE)
- U+2004 (THREE-PER-EM SPACE)
- U+2005 (FOUR-PER-SPACE)
- U+2006 (SIX-PER-EM SPACE)
- U+2008 (PUNCTUATION SPACE)
- U+2009 (THIN SPACE)
- U+200A (HAIR SPACE)
- U+200B (ZERO WIDTH SPACE)
- U+3000 (IDEOGRAPHIC SPACE)
図2はこの中の『Gecko1.9で定義されている空白(U+0020 SPACE)を含む文字列』、『Gecko1.9で定義されている空白(U+2003 EM SPACE)を含む文字列』について比較してみたものになります。
図2:Gecko1.9で定義されている空白の比較 (クリックで拡大します。)
U+0020 (SPACE)に加えて、U+2003 (EM SPACE)でも改行されるようになりました。サンプル中にはありませんが空白として定義されている他の文字にでもFirefox3では改行されるようになっています。
Gecko1.9で定義されているハイフン
次にGecko1.9で改行されるハイフンについて確認してみます。
ハイフンとして定義している文字を以下に示します。
- U+002D (HYPHEN-MINUS)
- U+058A (ARMENIAN HYPHEN)
- U+2010 (HYPHEN)
- U+2012 (FIGURE DASH)
- U+2013 (EN DASH)
図3はこの中の『Gecko1.9で定義されているハイフン(U+2010 HYPHEN) を含む文字列』、『Gecko1.9で定義されているハイフン(U+2010 HYPHEN) を含む文字列(前後は数字)』、『Gecko1.9で定義されているハイフン(U+00AD SOFT HYPHEN) を含む文字列』、『Gecko1.9で定義されているハイフン(U+2013 EN DASH) を含む文字列』、そして『Gecko1.9で定義されていないハイフン(U+2014 EM DASH) を含む文字列』について比較してみたものになります。
図3:Gecko1.9で定義されているハイフンの比較 (クリックで拡大します。)
まず、『Gecko1.9で定義されているハイフン(U+2010 HYPHEN) を含む文字列』です。ルールにあるように改行ポイントとなっているのがわかります。次の文字列では前後が数字の為、改行ポイントとみなされなくなっています。
次の『Gecko1.9で定義されているハイフン(U+00AD SOFT HY
PHEN) を含む文字列』です。改行する場合はSOFT HYPHENがつけられて改行されています。Firefox3で実装されたことがわかります。
最後に『Gecko1.9で定義されているハイフン(U+2013 EN DASH) を含む文字列』と『Gecko1.9で定義されていないハイフン(U+2014 EM DASH) を含む文字列』の比較です。どちらもハイフンのようなグリフを持っているのですが、前者はハイフンとして定義され、後者は定義はされてはいません。図3に見るようにFirefox2ではどちらも改行されませんが、Firefox3では表示させてみると前者は(U+2014 EM DASH)の後で、後者は(U+2014 EM DASH)の前で改行されています。 ハイフンとして定義されてないので改行の位置が違うのでしょうか？
URL文字列、ファイルパス文字列
図4は『URL文字列 （スラッシュ、アンパサンド、パーセントを含む）』、『Fileパス文字列 （バックスラッシュを含む）』について比較してみたものです。
図4:URL文字列、ファイルパス文字列の比較 (クリックで拡大します。)
まず、『URL文字列 （スラッシュ、セミコロン、パーセントを含む）』を見てみます。Firefox2ではまったく改行してないのに比べ、Firefox3である改行ポイントで改行されています。改行ポイントはスラッシュの前（最初の２つのスラッシュは改行ポイントとされてないことに注意）、アンパサンドの後、パーセントの前になっています。
次にファイルパス文字列を見てみます。こちらもFirefox2ではまったく改行してないのに比べ、Firefox3である改行ポイントで改行されています。 改行ポイントはバックスラッシュの前、ハイフンの前になっています。
まとめ
Gecko1.9の改行ルールに基づいて様々なケースを見てきました。『Gecko1.9で定義されている空白』、『Gecko1.9で定義されているハイフン』、『URL、ファイルパス』でより改行されやすくなりました。ただし、改行ポイントが無い文字列、改行ポイント間の文字列が長い文字列に関しては引き続き注意が必要です。また、定義されていない文字についても想定以外の動作をすることがありますのでこちらも注意が必要です。
Appendix
今までは日本語などのマルチバイト文字を含まない文字を検証していました。日本語と記号が混ざった文字列で試してみると想定外の動作をすることがあります。 