Auto-size dynamic text to fill fixed size container

Question

I need to display user entered text into a fixed size div. What i want is for the font size to be automatically adjusted so that the text fills the box as much as possible.

So - If the div is 400px x 300px. If someone enters ABC then it's really big font. If they enter a paragraph, then it would be a tiny font.

I'd probably want to start with a maximum font size - maybe 32px, and while the text is too big to fit the container, shrink the font size until it fits.

Answer 1

Thanks Attack. I wanted to use jQuery.

You pointed me in the right direction, and this is what I ended up with:

Here is a link to the plugin: https://plugins.jquery.com/textfill/
And a link to the source: http://jquery-textfill.github.io/

;(function($) {     $.fn.textfill = 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;     } })(jQuery);  $(document).ready(function() {     $('.jtextfill').textfill({ maxFontPixels: 36 }); }); 

and my html is like this

<div class='jtextfill' style='width:100px;height:50px;'>     <span>My Text Here</span> </div> 

This is my first jquery plugin, so it's probably not as good as it should be. Pointers are certainly welcome.

Answer 2

I didn't find any of the previous solutions to be adequate enough due to bad performance, so I made my own that uses simple math instead of looping. Should work fine in all browsers as well.

According to this performance test case it is much faster then the other solutions found here.

(function($) {     $.fn.textfill = 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             );         });     }; })(jQuery); 

If you want to contribute I've added this to Gist.