jQuery textfill (v9)

Revision 9 of this benchmark created on

Preparation HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<script src="http://www.zachleat.com/bigtext/bigtext.js">
</script>

<div class="textfill" style="width:100px; height:50px; font-size: 10px;white-space:nowrap;">
  <span>
    My Text
  </span>
</div>
<div class="textfill" style="width:300px; height:50px; font-size: 14px;white-space:nowrap;">
  <span>
    My Text
  </span>
</div>
<div class="textfill" style="width:600px; height:50px; font-size: 18px;white-space:nowrap;">
  <span>
    My Text
  </span>
</div>

<div class="bigtext" style="width:100px; height:50px; font-size: 10px;white-space:nowrap;">
  <div>
    My Text
  </div>
</div>
<div class="bigtext" style="width:300px; height:50px; font-size: 14px;white-space:nowrap;">
  <div>
    My Text
  </div>
</div>
<div class="bigtext" style="width:600px; height:50px; font-size: 18px;white-space:nowrap;">
  <div>
    My Text
  </div>
</div>

Setup

// by GeekyMonkey
  $.fn.textfill1 = function(options) {
    var fontSize = options.maxFontPixels;
    var ourText = $('span:visible:first', this);
    var maxHeight = $(this).height();
    var maxWidth = $(this).width();
    var textHeight;
    var textWidth;
    do {
      ourText.css('font-size', fontSize);
      textHeight = ourText.height();
      textWidth = ourText.width();
      fontSize = fontSize - 1;
    } while ((textHeight > maxHeight || textWidth > maxWidth) && fontSize > 3);
    return this;
  }
  
  // by Alexander Sandstorm
  $.fn.textfill2 = function(options) {
  
      options = jQuery.extend({
          maxFontSize: null,
          minFontSize: 8,
          step: 1
      }, options);
  
      return this.each(function() {
  
          var innerElements = $(this).children(':visible'),
              fontSize = options.maxFontSize || innerElements.css("font-size"), // use current font-size by default
              maxHeight = $(this).height(),
              maxWidth = $(this).width(),
              innerHeight,
              innerWidth;
  
          do {
  
              innerElements.css('font-size', fontSize);
  
              // use the combined height of all children, eg. multiple <p> elements.
              innerHeight = $.map(innerElements, function(e) {
                  return $(e).outerHeight();
              }).reduce(function(p, c) {
                  return p + c;
              }, 0);
  
              innerWidth = innerElements.outerWidth(); // assumes that all inner elements have the same width
              fontSize = fontSize - options.step;
  
          } while ((innerHeight > maxHeight || innerWidth > maxWidth) && fontSize > options.minFontSize);
  
      });
  
  };
  
  // by mekwall
  
      $.fn.textfill3 = function(maxFontSize) {
        maxFontSize = parseInt(maxFontSize, 10);
        return this.each(function() {
          var ourText = $("span", this),
              parent = ourText.parent(),
              maxHeight = parent.height(),
              maxWidth = parent.width(),
              fontSize = parseInt(ourText.css("fontSize"), 10),
              multiplier = maxWidth / ourText.width(),
              newSize = (fontSize * (multiplier - 0.1));
          ourText.css("fontSize", (maxFontSize > 0 && newSize > maxFontSize) ? maxFontSize : newSize);
        });
    };
  
  // by eecolella (derived by mekwall)
  $.fn.fontSizePerfect = function (maxFontSize) {
      maxFontSize = parseInt(maxFontSize || Number.POSITIVE_INFINITY, 10);
  
      for (var i = 0, selLength = this.length; i < selLength; i++) {
          var $el = this.eq(i).children(),
              el = $el[0], maxWidth = $el.parent()[0].offsetWidth,
              newSize = +(parseInt(parseInt(getComputedStyle(el).fontSize)) * (maxWidth / el.offsetWidth)).toFixed(),
              size = (maxFontSize > 0 && newSize > maxFontSize) ? maxFontSize : newSize;
  
          el.style.fontSize = size + 'px';
              while (el.offsetWidth > maxWidth) {
                  size--;
                  el.style.fontSize = size + 'px';
              }
      }
      return this;
  };
  
  // by cesarmascarenhas
  /* 
  Works with font size starting with 1px. It fits Any Size perfectly.
  */
  resizefit = false;
   
   $.fn.fastFontSizeFit = function(maxFontSize) {
  	  var $obj = this.children();
  
  		parentWidth = $obj.parent()[0].offsetWidth;
   		objTextSize	= parseInt(getComputedStyle($obj[0]).fontSize);
  		objWidth 	= $obj[0].offsetWidth;
  
  		newObjTextSize = parentWidth / objWidth * objTextSize;
  		if(newObjTextSize >= maxFontSize){
  			newObjTextSize = maxFontSize;
  		}
  		$obj[0].style.fontSize = newObjTextSize+"px";
  		if(resizefit == false){
  			resizefit = true;
  			this.fastFontSizeFit(maxFontSize);
  		} 
  		resizefit = false;
  		return;
  	
   }; 
  
   
  var ourText = $(".textfill");
  var ourText2 = $(".bigtext");

Teardown



            // reset the size so we can calculate again
  ourText.find("span").css("fontSize", "");

Test runner

Ready to run.

Testing in
TestOps/sec
textfill by GeekyMonkey
ourText.textfill1({
  maxFontPixels: 50
});
ready
textfill by Alexander Sandstorm
ourText.textfill2({
  maxFontSize: 50
});
ready
textfill by mekwall
ourText.textfill3(50);
ready
fontSizePerfect by eecolella
ourText.fontSizePerfect(50);
ready
bigtext by http://www.zachleat.com/web/bigtext-makes-text-big/
ourText2.bigtext()
ready
fastFontSizeFit by Cesar Mascarenhas
ourText.fastFontSizeFit(50);
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.