以前、フォーラムで「タグボックス(いわゆるタグクラウド)に含まれる日本語のキーワードが途中で改行されることがありますが、これを防ぐ方法はありますか?」という質問があったように記憶しています(探し出せませんでしたが・・・)。その時は、「日本語折り返しの制御はなかなか難しいかもですねぇ」みたいに答えていたと思いますが、ちょっとやってみたところ解決できたのでエントリーとして残しておきます。これはppBlogを含めた多くのブログで見かけるタグクラウドGですが、日本語の文字列が途中で改行されて、一瞥しただけではキーワードが認識しにくくなっています。このサンプルのタグクラウドは、まだエントリー数が少ないのでそうでもないですが、タグの数が多くなると、結構みづらくなるのではと思います。日本語文字列は半端に改行されている。そこで以下のショットのように改善したいです。日本語文字が途中で改行されていないことが分かる。これはスタイルシート(CSS)をうまく使うことで解決できます。先行実装しているので、これを使えば少なくともIE5-7では意図した結果が得られます。この値の指定をkeep-allにすればOKです。これで日本語の単語が途中で改行されることはなくなります。これはFirefoxが対応していません。IE8ではbreak-allの挙動がIE5-7と違うようで、Safari/Chromeと同じように振舞うようです。word-breakに頼らずに別の仕様をあたることにします。ラッキーなことにどのブラウザでも対応しているものがありました。white-spaceです。white-spaceプロパティは、ソース中の半角スペース・タブ・改行の表示の仕方を指定する際に使用します。white-space-スタイルシートリファレンス空白だけでなく、改行の表示にもかかわっているのがポイントですね。ppBlogでは、タグクラウドはだいたい以下のようなソースを出力します。11px;">ゴールドバッハの予想</a></li></ul>これに対して、スタイルシートの指定は以下のようにすれば、うまく行きます。nowrap;で事足りますが、これだけだと、IE7以下で表示が崩れるので、IE7以下のhasLayoutGを有効にするためにzoom:1という指定をしています。これはほかのブラウザでは無視されます。具体的なサンプルを見てみましょう。cloud)みたいだからです。サンプルでは、雲のイラストを付けてみました。開発日誌タイトルだけだと何のことやら分からないと思いますが、ppBlogの「テーマ管理」では、テンプレートのHTMLやスタイルシートを修正した際に、どういう風に変更が反映されるか、実際にプレビューボタンで確認することが出来ます。そのプレビュー画面では、以下のように「戻る」のリンクでもとの編集画面に戻ります。従来だと、この戻るリンクで戻ると、マウスのカーソルは長々しいテキストエリアの先頭に戻っているので、再度編集部位を探しつつ、そこまでスクロールする必要がありました(Ctrl+Fで検索するのが常套手段ですが)。スタイルシートの編集では、テキスト量が多い傾向にあり、直前の編集部位を探し出すのは大変です。その辺を改善してみました。やりたいのは以下のことです。スクロールバーの位置に注目。テキストエリアのスクロールバーの位置はJavaScriptから制御することが出来ます。流れとしては、プレビューボタンを押したタイミングで、スクロール量を取得(scrollTopで可能)、プレビューから戻ったときに、取得した値を指定すれば良いわけです(指定もscrollTopです)。実際には、テキストエリアだけではなく、ブラウザのスクロールバーもscrollTopで制御できるので、この2つのスクロール量を保持するようにしています。やってみると意外と簡単に実装できました。早くやっておけば良かったです。試されたい方は、以下のutils.phpとmodules/theme.inc.phpでどうぞ。アップデートこんばんは。普段はブラウザとしてFirefoxを使っています。先ほどブログの方で記事を投稿したら、Firefoxだけ(厳密にはGeckoエンジンブラウザ)に読み込ませるツールチップのスクリプトが動作していないことに気付きました。Firefoxは、画像などで多用されるTITLE属性内の改行や改行コードを無視します。実は仕様としては正しい振る舞いです。TITLE属性の改行が有効な方がブラウザの使い手には優しいと思うので、ppBlogでは、FirefoxでもTITLE属性内の改行が有効になるようなスクリプトを用意しています。その読み込ませる際に、次のようにしています。やっていたんですが、これがいつの間にやら認識されなくなったようです。実は、今日Firefoxの自動アップデートがありバージョンが3.5.6になりました。リリースノートを見てみると、どうやらhttp://www.mozilla-japan.org/security/announce/2009/mfsa2009-71.htmlが関係している模様。これで認識しなくなるのかなという疑問もありつつ、この部分を修正しました。最新のoParts.jsを添付しておきます。JavaScriptこんばんは。localStorageに空の値を入れるとIE8がクラッシュすると書きました。空の値が入らないようなチェックを入れれば良いのですが、それだけだとナンなので、症状をもう少し追ってみました。一度、(IE8が)クラッシュするコードを書いておきます。valueが空白だとクラッシュ!}以下のように、直接空の値を入れる分には大丈夫でした。