文字数に応じてfont-sizeを自動変更

質問

エクセルのセルの書式の中にある「縮小して全体を表示する」の様な
ことをしたいのです。

具体的にはtableの固定幅セルのfont-sizeを、文字数に応じて自動的に
設定して、セル内で折り返しが発生しないようにしたい。
といっても、そんなに厳密でなくてもいいので、
「文字数が○文字未満ならfont-size:normal、以上ならsmall」
程度でいいんですが、これをCSSのみかCSS＋JavaScriptで
実現できないものでしょうか。
文字数に応じて<td>のclassを変えればいいのでしょうが、
できれば、テキストの修正をすれば自動的に変わる様にしたいです。

回答No.3

ORUKA1951

あれから調べても見たのですが、やはりありませんでした。
唯一、ページ自体をサーバー側で作成する。
たとえば、別のディレクトリに存在するHTL(これは通常どおりアップロード)をtest.html(実態はCGI)で読み込んで、特定のtableないの<td>内の文字数を数えて・・・（もちろん、別の用途のもの)

　事前の策として、というかベストな方法としてはtableのmin-widthで指定して、各セルの幅は内容にしたがって割り振れるようにした上で、少し小さめなfont-sizeで作っておくということ。
[配置指定の継承]( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/tables.html#h-11.3.2.1 )に完全に適合します。

　通常でtable内で折り返さない程度の文字サイズに少し余裕を見てtableを作成してしまえば、文字数が増えたらそのセルを含む列が拡大する。ウィンドウ幅を超えるようなら折り返される。
　フォントサイズは、ユーザー依存・・・これがベスト

回答No.2

ORUKA1951

「文字数に応じて自動的に設定して、セル内で折り返しが発生しないようにしたい。」
　はっきり申し上げて、作者側で強制する問題ではありません。

　HTMLは本来、さまざまな端末でも利用できるように考案された方式です。

【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで
［Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )］より

　視覚障害者はフォントサイズを大きくしてみようとするかもしれませんし、黒白のコントラストの大きい表示を選択するかもしれません。
　たとえばfirefoxだと、Ctrl+＋

　そのために、table(--表をあらわすものでデザインのためのものでしない。)は内容に応じて自在に伸張することが求められています。また、ウィンドウをはみ出さないために、セル内の文字は必要に応じて折り返されることを期待しています。

【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
非視覚系メディアでのレンダリングに際して問題を起こすことがあるため、単に文書内容を整形する目的だけで表を用いるべきでない。 さらに、見た目のために表が用いられると、その表が大きなディスプレイのあるシステムで作られた場合、表を見るために水平スクロールを強いられることがある。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで
［Tables in HTML documents (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/tables.html#h-11.1 )］より

＞これをCSSのみかCSS＋JavaScriptで実現できないものでしょうか。
　異常の理由もあってないと思います。(未確認)
　もしそれをするなら、動的にサーバーサイトでHTMLを作成すればよい。たとえばXMLでデータを持ってておいて、XSLTで文字数を数えれば楽
<xsl:value-of select="string-length(.)"/ >

補足

質問にも書いたように「厳密でなくてもいい」んですって。
当然、UA側でフォントを大きくすれば折り返しは発生します。
ただ、標準状態(デフォルト)のフォントでは折り返しがなさそうな
フォントサイズが自動的に設定されればと思ってます。

回答No.1

chochobizo

完全な回答ではありませんが、

はみ出る部分を省略表示（・・・という表示）にする案ではダメでしょうか？
そこにマウスをあてると、全内容が表示する仕組みです。

以下に参考ページあります。
http://www.salty1.com/rakuraku/241.html

お礼

「…」ではなぁ・・・
と思ったのですが、そのページのソースを見て、
CSSではfont-size:normalにしておいて、JavaScriptでtableを舐めて
一定の文字数以上のセルにだけfont-size:smallを上書きする。
という方法に気付きました。

ただ、まだ試してませんが、これだと一旦全部normalでレンダリング
されてからsmallになるので、画面がバタつくかなぁとも思います。

他に何か案があれば、よろしくお願いします。