以前に作成して放置していたjQueryプラグインを、会社で利用することにしたので、その前に公開することにします。これは個人で作成したものであり、業務の成果物ではないことを明記しておきます。
なにに使うの?
Webデザインをしていると「長さ可変の文字列が入るけど1行に収めたい」というようなシチュエーションがあると思います。CSSでoverflow:hiddenしたり、スクリプトで文字数を調整したりして対応すると思うのですが、そういう時に使えるかもしれません。
どうやって使うの?
.compressedFont()
対象ボックス内にテキストが収まるように、擬似的に長体をかけます
.compressedFont( maximumRows:int )
対象ボックス内のテキストがmaximumRows行に収まるように、擬似的に長体をかけます。
.compressedFont( opts:object )
オプションに従い、擬似的に長体をかけます。
opts
height: ボックスの高さを指定します。
rows: ボックス内の行数を指定します。
step: step/100刻みで水平比率を変化させます。デフォルトは50。
min_ratio: 水平比率の最小値を指定します。デフォルトは0.5。
概要
CSS3のtransform:scaleで水平に縮めて、その逆の比率でwidthを広げているだけです。
動作要件
jQuery1.4以上が必要。
IE6,7,8、Firefox4,5、Chrome12で動作確認しています。IEでもむりやり動作させていますが、ジャギがひどくてちょっと汚いです。ちょっと変なことをやってる部分のコードは大体IE対策ですね。
ライセンス
設けないです。パブリックドメインで。
デモ
http://jsfiddle.net/cfYad/
http://jsfiddle.net/cfYad/11/
右下の方の"exec"って書いてあるボタンを押してみて下さい。
あと、適当に弄るとか。
更新
2011/10/16 バグ修正。IEのジャギを少し改善。