タグクラウドの日本語文字の改行を制御したい

category-icon

 こんばんは。以前、フォーラムで

「タグボックス(いわゆるタグクラウド)に含まれる日本語のキーワードが途中で改行されることがありますが、これを防ぐ方法はありますか?」

という質問があったように記憶しています(探し出せませんでしたが・・・)。

 その時は、「日本語折り返しの制御はなかなか難しいかもですねぇ」みたいに答えていたと思いますが、ちょっとやってみたところ解決できたのでエントリーとして残しておきます。

 まずは、以下のショットを。これはppBlogを含めた多くのブログで見かけるタグクラウドGですが、日本語の文字列が途中で改行されて、一瞥しただけではキーワードが認識しにくくなっています。このサンプルのタグクラウドは、まだエントリー数が少ないのでそうでもないですが、タグの数が多くなると、結構みづらくなるのではと思います。
shot1
日本語文字列は半端に改行されている。
 そこで以下のショットのように改善したいです。
shot2
日本語文字が途中で改行されていないことが分かる。

 これはスタイルシート(CSS)をうまく使うことで解決できます。IE系なら、IE5の時代からword-breakというW3Cのワーキングドラフトに含まれる仕様Link を先行実装しているので、これを使えば少なくともIE5-7では意図した結果が得られます。この値の指定をkeep-allにすればOKです。これで日本語の単語が途中で改行されることはなくなります。でも、これはFirefoxが対応していません。さらには、IE8ではbreak-allの挙動がIE5-7と違うようで、Safari/Chromeと同じように振舞うようです。その結果、keep-allを指定しても、日本語の単語は途中で改行され得ます(参考:「CSS 3におけるテキストの自動改行と禁則処理の定義Link 」)。

 なのでword-breakに頼らずに別の仕様をあたることにします。

 ラッキーなことにどのブラウザでも対応しているものがありました。white-spaceです。

white-spaceプロパティは、ソース中の半角スペース・タブ・改行の表示の仕方を指定する際に使用します。

引用元: white-space-スタイルシートリファレンスLink

 空白だけでなく、改行の表示にもかかわっているのがポイントですね。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.htmlLink

 ちなみに、タグクラウドという名称の由来は、雲(=クラウド, cloud)みたいだからです。なのでサンプルでは、雲のイラストを付けてみました。パワーポイントで円や直線、3角形を組み合わせて適当に作成したんですが、思わずに良い出来栄えになりました:)

— posted by martin at 01:37 pm   commentComment [2]  pingTrackBack [0]

この記事に対するコメント・トラックバック [2件]

scrollUp1. ぷらむ — 2009/12/22@21:24:41

タグクラウドの件がありましたので、これまで思っていたことを。
私は、サイドではスペースが小さいので、同一の文字ポイントで表示しています。タグの全部表示をした時、つまり記事が出るスペースにタグを表示させた時、タグの一覧表が下にずらりと出てきます。タグの数が多いと、かなり長くなり、見にくくなります。それでタグの数を減らしました。
できたらこの全部表示のところは、スペースがあるので、タグクラウドで表示したいと思います。naokさんのブログでそうされていたので、やり方を教えていただき、やったことはあるのですが、ppblogのヴァージョンアップがあり、そこを設定し直すのが面倒で、あきらめました。
できましたら、タグの全部表示にタグクラウド表示できるようにしていただけるとありがたいです。
現行表示とタグクラウド表示が選択できるのであれば、変更によって困る人は出てこないので、いいのですが。

Owner Comment martin Website  2009/12/24@07:12:39

こんばんは。タグエントリー表示時は、確かにクラウド形式が良いですね。実のところタグクラウドを実装した当初は、タグの利便性を十分に認識していませんで。タグのエントリーが50個以上とかは普通に起こりそうですが、そういうイメージはなかったですねぇ。
 というわけで、次期バージョンでは、タグクラウド形式にしようと思います。時間があれば、エントリーに書きます。

この記事に対する TrackBack URL:

設定によりTB元のページに、こちらの記事への言及(この記事へのリンク)がなければ、TB受付不可となりますのであらかじめご了承下さい。

コメントをどうぞ。 名前(ペンネーム)と画像認証のひらがな4文字は必須で、ウェブサイトURLはオプションです。

ウェブサイト (U):

タグは使えません。http://・・・ は自動的にリンク表示となります

:) :D 8-) ;-) :P :E :o :( (TT) ):T (--) (++!) ?;w) (-o-) (**!) ;v) f(--; :B l_P~

     
T: Y: ALL: Online:
Created in 0.0195 sec.
prev
2017.5
next
  1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31