「タグボックス(いわゆるタグクラウド)に含まれる日本語のキーワードが途中で改行されることがありますが、これを防ぐ方法はありますか？」
という質問があったように記憶しています(探し出せませんでしたが･･･)。その時は、「日本語折り返しの制御はなかなか難しいかもですねぇ」みたいに答えていたと思いますが、ちょっとやってみたところ解決できたのでエントリーとして残しておきます。
まずは、以下のショットを。これはppBlogを含めた多くのブログで見かけるタグクラウドGですが、日本語の文字列が途中で改行されて、一瞥しただけではキーワードが認識しにくくなっています。このサンプルのタグクラウドは、まだエントリー数が少ないのでそうでもないですが、タグの数が多くなると、結構みづらくなるのではと思います。
これはスタイルシート(CSS)をうまく使うことで解決できます。IE系なら、IE5の時代からword-breakというW3Cのワーキングドラフトに含まれる仕様
を先行実装しているので、これを使えば少なくともIE5-7では意図した結果が得られます。この値の指定をkeep-allにすればOKです。これで日本語の単語が途中で改行されることはなくなります。でも、これはFirefoxが対応していません。さらには、IE8ではbreak-allの挙動がIE5-7と違うようで、Safari/Chromeと同じように振舞うようです。その結果、keep-allを指定しても、日本語の単語は途中で改行され得ます(参考：「CSS 3におけるテキストの自動改行と禁則処理の定義 」)。
なのでword-breakに頼らずに別の仕様をあたることにします。
ラッキーなことにどのブラウザでも対応しているものがありました。white-spaceです。
white-spaceプロパティは、ソース中の半角スペース・タブ・改行の表示の仕方を指定する際に使用します。
- 引用元: white-space－スタイルシートリファレンス
空白だけでなく、改行の表示にもかかわっているのがポイントですね。ppBlogでは、タグクラウドはだいたい以下のようなソースを出力します。
<ul class="sidebar-tags"> <li><a href="#" rel="tag" style="font-size: 11px;">DOM storage</a></li> <li><a href="#" rel="tag" style="font-size: 11px;">Flex</a></li> <li><a href="#" rel="tag" style="font-size: 12px;">CSS</a></li> <li><a href="#" rel="tag" style="font-size: 13px;">フーリエ級数</a></li> <li><a href="#" rel="tag" style="font-size: 11px;">PHP</a></li> <li><a href="#" rel="tag" style="font-size: 15px;">トラベラーズ</a></li> <li><a href="#" rel="tag" style="font-size: 11px;">ppBlogTips</a></li> <li><a href="#" rel="tag" style="font-size: 29px;">ppBlog</a></li> <li><a href="#" rel="tag" style="font-size: 11px;">無限級数</a></li> <li><a href="#" rel="tag" style="font-size: 11px;">Ajax</a></li> <li><a href="#" rel="tag" style="font-size: 21px;">アップデート</a></li> <li><a href="#" rel="tag" style="font-size: 29px;">JavaScript</a></li> <li><a href="#" rel="tag" style="font-size: 11px;">Firefox</a></li> <li><a href="#" rel="tag" style="font-size: 11px;">アマゾン</a></li> <li><a href="#" rel="tag" style="font-size: 11px;">ゴールドバッハの予想</a></li> </ul>
これに対して、スタイルシートの指定は以下のようにすれば、うまく行きます。
ul.sidebar-tags li {
display: inline;
white-space: nowrap; /* これがポイント！ */
padding-right: 3px;
zoom: 1; /* これはIE7以下向け */
}
基本的には、white-space: nowrap;で事足りますが、これだけだと、IE7以下で表示が崩れるので、IE7以下のhasLayoutGを有効にするためにzoom:1という指定をしています。これはほかのブラウザでは無視されます。
では、具体的なサンプルを見てみましょう。→http://p2b.jp/demo/tagCloud.html
ちなみに、タグクラウドという名称の由来は、雲(=クラウド, cloud)みたいだからです。なのでサンプルでは、雲のイラストを付けてみました。パワーポイントで円や直線、3角形を組み合わせて適当に作成したんですが、思わずに良い出来栄えになりました
Y:
Comments