HTML ソフトハイフンに対する IE,Firefox,Opera の扱い

Webブラウザなどのエージェントが HTML を表示する際に、特に「文字のように見えるもの挿入するなどの処置」を行って視覚的な表現が期待されるものとしては、前に書いた引用符を挿入する 引用:Q要素の他には例えば

1. 順不同リスト UL要素
2. 序列リスト OL要素
3. ハイフン（ソフトハイフン） 文字実体参照 ­

がある。

順不同リスト UL要素 と 序列リスト OL要素 は Blog などで HTML を書く人にはお馴染みだと思うけど、三つ目のハイフン（ソフトハイフン）はなじみが無いのではないかと思う。 （いわゆる "タグ" ではないし）

「ハイフン」については Wikipedia(ja) を参照ｗ

HTML 4.01 におけるハイフンの扱いは 9.3.3 ハイフンづけ（9.3.3 Hyphenation）に記載されている。 そこの一つ目のパラグラフに書かれているように、HTML では二種類のハイフン（プレーンハイフンとソフトハイフン）がある。 「プレーンハイフン」は HTML を書く著者が「文字として」記述する記号を指す。 例えば Wikipedia という単語が行末に来たときに Wiki で区切って次の行頭に pedia と書きたい時に行末に Wiki- と書き、次の行頭に pedia と書くというような、まさに実際にペンなどで欧文を書くのと同じ思考のもとに入力する文字。

注意しなければならない点は、HTML を使って記述したテキストは基本的に閲覧環境ごとにレンダリング結果が異なる性質を持っており、著者が意図した通りに表示されるとは限らない点。 たとえスタイルシートで文字サイズや本文を表示する部分の表示幅などを綿密に設定しても、スタイルシートを解釈しない Webブラウザも存在するし、そもそも表示画面が IE や Firefox, Opera のようにグラフィカルなものとは限らない。 （w3m など俗に言うテキストブラウザに分類されるブラウザはグラフィカルなブラウザに比べると文字サイズが固定的になるものが多い） そんな環境では、著者が書いたプレーンハイフンが表示上の行末に来るとは限らない。

だからと言ってハイフンには Wikipedia に書いてある用法 2 のような用途もあるから HTML のプレーンハイフンが無意味という事ではない。 行末～行頭における単語の分かち書きという用途においては実用的ではない、という程度だと思う。

行末～行頭における単語の分かち位置を示す印は、もう一方の「ソフトハイフン」がその役割を担っている。 簡単に言えばブラウザに対して「行末などで単語を区切る必要があるならここで区切っても良いよ」と分かち位置を示す印が「ソフトハイフン」だ。

具体的に見てみよう。 google で "長い英単語" を検索した時にトップに表示されたこちらのページに書いてあった単語 "supercalifragilisticexpialidocious" を使った例を書いてみる。

<dl>
<dt>プレーンハイフンの例：
<dd>子供が英語で最も長い語として言うことば，あるいは「すばらしい」の意味
super-califragi-listicexpiali-docious.
</dl>

<dl>
<dt>ソフトハイフンの例：
<dd>子供が英語で最も長い語として言うことば，あるいは「すばらしい」の意味
super&shy;califragi&shy;listicexpiali&shy;docious.
</dl>

supercalifragilisticexpialidocious という単語を区切る場合にどこで区切るべきかまったく判らなかったのでｗ 適当な位置にプレーンハイフン - とソフトハイフン &shy; を入れてみた。 その HTML をブラウザで表示させた結果はこんな感じになる。 各ブラウザの文字の表示処理に微妙な差異があるためにドット単位で一致している訳ではないが、今回の件に充分な程度には調整しているつもり。

Internet Explorer 7(7.0.5730.11)

Opera 9 (9.02 for Win32)

Mozilal Firefox 2.0(Gecko/20061010)

結果を見て言えることはこんな事だろう。

Internet Explorer 7 と Opera 9 はソフトハイフンを処理する。

見ての通り、IE 7 と Opera 9 ではソフトハイフンを挿入した supercalifragi-listicexpialidocious で区切っている。 区切り部分以外のソフトハイフンは何も表示に影響がない。 非常に美しい。

Internet Explorer 7 と Opera 9 はプレーンハイフンも行末～行頭の分かち位置として処理する。

Firefox の画像とそれぞれ見比べると判る。 HTML 4.01 的にはプレーンハイフンで区切ることは求められていないけど、プレーンハイフンも分かち位置として処理してくれるのはソフトハイフンの文字実体参照 &shy; をタイプするのが面倒だから嬉しいといえば嬉しいｗ しかし分かち位置を示すつもりで無いハイフン文字であっても分かち書きとして処理してしまう副作用がある。 例えば IE 7 と Opera9 で表示上の行末辺りに 100+(-100+100)=100 という数式があると "100+(-" で改行して続きの "100+100)=100" が次の行の行頭にくるというなんとも気持ち悪い結果になる。

Firefox 2.0 はソフトハイフンもプレーンハイフンも処理しない。

Firefox の画像を見た通り。 ウィンドウの横幅を調整してもソフトハイフンが機能することは無かった。 あれほどに右側に余白があるならば super の5文字くらいはレンダリングできると思う。

まぁ、日本語には欧文における単語分かち書きの為のハイフン文字に相当する記号の文化がない（はず）なので、日本語文において広範囲に影響を受ける事ではないからそんなに気にすることではないかもしれない。

もっとも欧文と違い日本語には句読点や空白・改行以外に単語と単語の間に区切り文字がないために、それら以外で単語と単語の境目が判断できず結果として単語の途中でもおかまいなく区切られているのが現状な訳だけど。

幸い、IE 7, Opera 9, Firefox 2.0 全てが禁則処理の一つである「追い出し制御」（句読点など行頭にするにふさわしくない文字が行頭にこないように一つ前の文字で改行する処理）を行っているのは喜ばしい所。

しかし日本語における追い出し制御には行頭の2文字に句読点が登場しやすくなるという問題があるので、ワープロなどの文書処理系では印字可能な文字の場合は文字間を調整して句読点を行末に押し込める「追い込み制御」を、改行などの印字しない文字は行末からはみ出すように続ける「ぶら下げ」の方を先に試みるという方法が主流だったと思う。 （それでダメなら追い出し制御。試しに行の途中から句点を何十個も並べてみてから句点の数を増やしたり減らしたりすると確認できるｗ）

しかし「ハイフン戦争」ってすごいなｗ