読者です 読者をやめる 読者になる 読者になる

不動産屋のラノベ読み

不動産売買営業だけどガチガチの賃貸派の人のブログ

ボックスに収まるように長体をかけるjQueryプラグイン jQuery.compressedFont を公開します

 
 以前に作成して放置していたjQueryプラグインを、会社で利用することにしたので、その前に公開することにします。これは個人で作成したものであり、業務の成果物ではないことを明記しておきます。
 

これはなに?

 ボックス内のテキストに擬似的な長体をかけて、ボックスから溢れたテキストをボックス内に収める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のジャギを少し改善。