jQuery textfill (v6)

Revision 6 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 style="white-space: nowrap;">
    My Text Here uahuah auha auhsdiauhsd uiahsdiauhsd oasdhauishd
  </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);
        });
    };
  
  // by eecolella (derived from mekwall)
  $.fn.textfill4 = function (maxFontSize) {
      maxFontSize = parseInt(maxFontSize, 10);
      return this.each(function () {
          var ourText = $("span", this),
              parent = ourText.parent(),
              maxWidth = parent.width(),
              fontSize = parseInt(ourText.css("fontSize")),
              multiplier = maxWidth / ourText.width(),
              newSize = +(fontSize * multiplier).toFixed(),
              size = (maxFontSize > 0 && newSize > maxFontSize) ? maxFontSize : newSize;
  
          ourText.css("fontSize", size);
          while (ourText.width() > maxWidth) {
              size--;
              ourText.css("fontSize", size);
              console.log(9);
          }
      });
  };
  
  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 mekwall
ourText.textfill3(36);
ready
texfill by eecolella
ourText.textfill4(36);
ready
textfill by GeekyMonkey
ourText.textfill1({
  maxFontPixels: 36
});
ready
textfill by Alexander Sandstorm
ourText.textfill2({
  maxFontSize: 36
});
ready

Revisions

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