テキストをボックスサイズに合わせて拡大縮小してフィットさせるjQueryプラグイン

絶対同じようなものがあると思ったんですが、あるにはあるものの使い勝手がイマイチ(or 理解不足)だったので、車輪の再発明を承知で書きました。

$.fn.fitText = function(option) {
 var e = $(this);
 option = $.extend({
  maxFontSize : undefined,
  minFontSize : undefined
 }, option);
 var c = e.clone();
 c.css({ "white-space": "nowrap", "position": "absolute", "height":0, "width":"auto" }).insertAfter(e);
 var font_size = c.css("font-size").match(/^([\d\x2e]+)([a-zA-Z]+)$/);
 var size = parseFloat(font_size[1]) * (e.width() / c.width()) ;
 if (undefined !== option["maxFontSize"] && parseFloat(option["maxFontSize"]) < size) {
  size = option["maxFontSize"];
 } 
 if (undefined !== option["minFontSize"] && parseFloat(option["minFontSize"]) > size) {
  size = option["minFontSize"];
 }
 e.css("font-size", parseInt(size) + font_size[2]);
 c.remove();
 return e;
}

文字数を数えたり何なりする代わりに、要素のクローンを一旦配置して、レンダリング後のボックスサイズを取得して、オリジナルのボックスサイズと比べています。
position:absolute; height:0;
な上に最後で削除しているので、レイアウトに影響はないと思いますが、一応ご留意。

また、中身にフォントサイズを変更して(上書きして)ある要素があると、それは適用されません(たぶん)。

$(window).resize(function(){$("#some_element").fitText()}).trigger('resize');

とかやっておくと、リサイズ時にも追随します。

ちなみに、同じ名前のプラグインがありますが、ワタクシ的に使いづらかったのと、併用はしないので、まあいいかなって思っています。
気になる方は勝手に名前を変更してお使いください。

Leave a Reply