先日MSに翻弄された話をポストし、お気に入りのブラウザであるFirefoxで実際に表示させてみて卒倒しそうになった。
URLの部分が改行されない為、tableがとんでもなく見難い状態になっていた。
Firefoxは半角英数記号文字列を途中改行しない仕様だというのは知っていたが、今までは(多少見難くなっても)閲覧にはそれほど影響無いと判断して特に対策は行ってなかった。どうしても気になる人はurl_breaker辺りで対策してね、という事で。
しかし今回のは酷すぎる。何とか対策をしないと。
JavaScriptで自動処理だ!!
此処まで閲覧に支障があるのならばサイト側で対策したい。上記拡張のGreaseMonkey版であるurl_breaker_plusを見つけたので、それをそのまま関数化→loadイベントで呼び出せばいいだろう。
url_breakerやurl_breaker_plusの仕様は記号文字毎にwbr要素を挿入する、というもの。wbr要素はIEとMozilla系ブラウザが独自に実装している要素で、HTML/XHTML標準規格のものではない。それがチョット気になるが、まぁ、仕方ない。
という訳でurl_breaker_plusのコードをチョイチョイと弄って実装した。
よしよし、ちゃんと改行されるように……
あるぇ?
table内の文字列が改行されない!?なんでー??
そして苦難の道が続く
ソースを見てみると、間違いなくwbr要素が挿入されている。……のに改行されない。ワケが分からん。
url_breakerのページを見てみると、
Ver.0.2.5 (2006/06/17～08/05) ((略)) loadイベントではなくDOMContentLoadedイベントを利用することで、 table内などで折り返しができない問題を若干改善
という記述を発見。……DOMContentLoadedイベント?調べてみると、Collection &\1 Copy - ドキュメントのロード完了に合わせて関数を実行するというページを発見。曰く、「ドキュメントのロードが終わっていて、かつ、イメージのロードが完了する前」に
発生するFirefoxの非標準イベントらしい。試しに変更してみる。……駄目だ。上手くいかない。まぁ、url_breakerのページでも若干改善
としか言っていないし。
Bookmarkletだと上手くいく
念の為url_breakerやurl_breaker_plusをインストールして確認してみたが、やはりtable要素内はwbrが挿入されるのに改行されない。まさに若干改善
の若干
外の問題にブチ当たってしまったようだ。
途方に暮れながらwebの大海を彷徨っていると、Wrap!というBookmarkletを公開している人が居た。駄目元で使ってみると……あれ?table内も改行される……?
よぉし希望が見えてきたぞ。じゃぁコッチのコードを元にしてみよう。やはり関数化してloadやDOMContentLoadedイベントにdocument.addEventListenerする。
……あれ?今度は改行されなくなった……
オフラインだと上手くいく
bookmarkletだと上手くいって、loadやDOMContentLoadedイベントで実行するとtable内で上手くいかない。こうもワケワカラン状況になるとは……長くなりそうなので、検証用にMSに翻弄された話をHDに保存……あ、間違えて保存したページ開いちゃった。
……………………あるぇ!!?
ローカルに保存したページだと改行が上手くいく。
色々実験。どうやら下に付けているCallbeeのフィードリーダが原因のようだ。外してみたらurl_breakerを元にしたコードもWrap!を元にしたコードも上手くいくし、外部サイト(このblogのページの読込が終わった後?)の読込が絡むと上手くいかないんじゃないかと予想。
何とか解決
という事は、外部サイトのリソースも全て読み込み終わってから処理すると上手くいくという事か。成る程Bookmarkletだと上手く行く訳だ。
少し悩んだが、body要素の閉じタグ直前にscript要素でスクリプトを読み込み、実行するようにした。なお、url_breakerを元にしたコードは最後にdocument.style.width = '100%'; focus();としないと上手くいかなかった。
で、実装
記号毎にwbrを文字の前に挿入するか後に挿入するか変える事が出来るWrap!を元に実装。ついでにurl_breakerの指定文字数で強制的に折り返す
を参考に、強制改行(br要素の挿入)では無くwbrを挿入するようにしてみた。
……で、出来上がったのがコレ。なにやら謎な分岐があるけど、それについては今度(多分)纏めます。
…………バグにとっつかまって1週間も掛かったのはヒミツだｗｗｗ
- GreaseMonkey
- コレの事。Firefoxの拡張機能で、JavaScriptで色々なサイトに手を加える事が出来るという大変便利なもの。ユーザCSSのJavaScript版といった感じか。
- ソースを見てみると
- 今回色々試して気づいたのだが、Firefox(ver2.0 Windows,日本語版。他は分かんね)の『選択した部分のソースを表示』はJavaScriptとかで処理した後のコードを見る事が出来る。
- url_breakerを元にしたコードは最後に
document.style.width = '100%'; focus();としないと上手くいかなかった - 恐らく、bookmarklet: Wrap! ― 長い1byte文字列を折り返す（Mozilla） - airhead の日記で述べられている
折り返し候補位置すべてにWBR要素を挿入してもそれだけではTABLE要素サイズの再計算は行われないので、BODY要素の幅を再設定してドキュメント領域の幅にあわせた折り返しを促している
が原因だろう。
利用させていただきます！
分かりにくい
やりなおし