2006年11月16日

長い文字列を自動的に途中改行させるようにするJavaScript - Firefoxで長い文字列が改行されない件を回避しようとして翻弄された話

先日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週間も掛かったのはヒミツだwww

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要素の幅を再設定してドキュメント領域の幅にあわせた折り返しを促しているが原因だろう。
posted by 天井冴太 at 22:53 | Comment(2) | TrackBack(1) | Hack | このブログの読者になる | 更新情報をチェックする
投票お願いします 人気blogランキング - 投票する
この記事へのコメント
助かりました!
利用させていただきます!
Posted by あか at 2010年12月31日 07:07
文章読みにくい
分かりにくい
やりなおし
Posted by at 2011年06月24日 10:06
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

コメント欄右下をドラッグ&ドロップすると、コメント欄の拡大縮小が出来ます。
認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
この記事へのトラックバックURL
http://blog.seesaa.jp/tb/27627568

この記事へのトラックバック

ブラウザでの任意改行――wbrでなくて­の話――
Excerpt: 前回の長い文字列を自動的に途中改行させるようにするJavaScript - Firefoxで長い文字列が改行されない件を回避しようとして翻弄された話で今度(多分)纏めますとしていた部分の話。1週間以上..
Weblog: AMAgrammar <> PROgrammer
Tracked: 2006-11-25 00:01