jQuery textfill (v2)

Revision 2 of this benchmark created on

Preparation HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<div class="textfill" style="width:100px; height:50px; font-size: 10px;">
  <span>
    My Text Here dsjf fsajdk fhj jfksad fkas fkjsadf kasdj hkjfashfd klah kfjlasd kjf
    hf kajsdlfa
  </span>
</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);
    });
  }
  
  var ourText = $(".textfill");

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: 36
});
ready
textfill by Alexander Sandstorm
ourText.textfill2({
  maxFontSize: 36
});
ready
textfill by mekwall
ourText.textfill3(36);
ready

Revisions

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