ブラウザでの任意改行――wbrでなくて­の話――

前回の長い文字列を自動的に途中改行させるようにするJavaScript - Firefoxで長い文字列が改行されない件を回避しようとして翻弄された話で今度(多分)纏めますとしていた部分の話。1週間以上ブランクが在るのは気にしてはいけない。いいえバグではありません仕様d(ry

その条件分岐部分を抜き出してみたのが下記。

// UA別に処理を振り分け
if(navigator.userAgent.indexOf("Gecko") == -1) {
    nNode = document.createTextNode("\xad");    // ­
} else {
    nNode = document.createElement('WBR');
}

軽く解説すると、navigator.userAgentにはUA(例えばwebブラウザ)の名称(とかOS名とか)が入っている。indexOf()は対象文字列に引数で指定した文字列がある位置を返す関数で無い時は-1を返す。Mozilla系ブラウザ(Firefoxとか)はGeckoというレンダリングエンジンを使っているのでそれを判定材料としている。で、Mozilla系UAではwbr要素を、それ以外では文字コード0xadを書き込んでいる。

wbrは前回説明した通り。じゃあ0xadって何さ??という話。

­ ――standardな任意位置途中改行――

前回スクリプトを組むときに悩んだのがwbr要素が非標準だという事。便利なのかもしれないが、出来れば標準規格に則った記述がしたい。何か無いか……と探していて見つけたのが­。ソフトハイフンを挿入する為の文字参照だ。

shyなやつ - 徒書や長い文字列の改行方法 - wbr, ­, css - World Wide Walkerにて解説されているが、 ソフトハイフンとはユーザエージェントに対し、そこが行区切りが発生してもよい場所であることを示すものである。との事。……つまり、wbrの代わりに­(又は&#xAD)使えば標準規格から外れる事も無く期待通りの機能が実装出来るぜヒャッホゥイ!!

と思ったら……さてかんじんのMozillaではというと、((略))全く改行されずに遙か右方に伸びていってしまいます。……Mozilla対応して無いのね……

正直IEが対応していてFirefoxが対応していないというのは激しくムカツク訳だが、とりあえずMozilla系以外のUAではwbrで無くソフトハイフンを入れるようにした。

……てか、document.createTextNode()ってdocument.write()と違って文字参照って書けないのね。そっくりそのままの内容のテキストになる。しょうがないので、文字コードで指定しているが。

ところで、Firefox。

­ は ((略))Firefox ではそもそも全く無視されているようだ。

……と、長い文字列の改行方法 - wbr, ­, css - World Wide Walkerでは書かれているが、一応認識はしているようだ。

その証拠(?)にshyなやつ - 徒書でテストとして書かれているクソ長い英単語をFirefox2.0で選択、テキストエディタにペーストしてみると、­挿入位置毎に"-"が表示される。

参考

• shyなやつ - 徒書
• 長い文字列の改行方法 - wbr, ­, css - World Wide Walker
• Paragraphs, Lines, and Phrases (ja)

Mozilla系ブラウザ(Firefoxとか)はGeckoというレンダリングエンジンを使っているのでそれを判定材料としている

正直ココは手抜き。レンダリングエンジンはあくまで描画の為のものなので本当は正しく無いんだろうなぁ。