jQuery textfill (v14)

Revision 14 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 Cesar Mascarenhas
  /*
  Not so precise to fit the parent element, but it will maintain appearance in chrome, firefox, IE and safari. And It's really fast because it is only  based on math. To perfect fit and also maintain some fast reading use the Revision 12 test with the "doubletime" variable in it. 
  */
  $.fn.fastFontSizeFit = function(maxFontSize) {
  	var objlen = this.length;
  	var objs = new Array(); 
  	for(var i=0;i<objlen;i++){              
  			obj = this.eq(i).children();
  			objs[i] = {     
  						obj:obj,
  						parentwidth:obj.parent()[0].offsetWidth ,
  						width:obj[0].offsetWidth,
  						font:parseInt(getComputedStyle(obj[0]).fontSize)
  					  };            
  	}
  	for(var i=0;i<objlen;i++){              
  			newObjTextSize	= objs[i].parentwidth / objs[i].width * objs[i].font;
  			newObjTextSize	= newObjTextSize * objs[i].parentwidth /  (objs[i].parentwidth + newObjTextSize / (objs[i].font / 10));
  			if(newObjTextSize >= maxFontSize){
  					newObjTextSize = maxFontSize;
  			}               
  			objs[i].obj[0].style.fontSize = newObjTextSize+"px";
  	}       
   }
   
  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.