Calculate text font size to fill container with text
<blockquote>
  <p><strong>Possible Duplicate:</strong><br>
  <a href="http://stackoverflow.com/questions/687998/auto-size-dynamic-text-to-fill-fixed-size-container">Auto-size dynamic text to fill fixed size container</a>  </p>
</blockquote>



<p>If container contains just a plain text with no child element, then the following code is a working solution:</p>

<pre><code>(function($) { 
  $.fn.textfill = function(options) { 
    return this.each(function() {
      var text = $(this).text();
      $(this).text('');
      var container = $('&lt;span /&gt;').text(text).appendTo($(this));
      var min = 1, max = 200, fontSize;
      do {
        fontSize = (max + min) / 2;
        container.css('fontSize', fontSize);
        var multiplier = $(this).height()/container.height();
        if (multiplier == 1) { min = max = fontSize}
        if (multiplier &gt;  1) { min = fontSize}
        if (multiplier &lt;  1) { max = fontSize}
      } while ((max - min) &gt; 1);
      fontSize = min;
      if ($(this).width() &lt; container.width()) {
        min = 1;
        do {
          fontSize = (max + min) / 2;
          container.css('fontSize', fontSize);
          var multiplier = $(this).width()/container.width();
          if (multiplier == 1) { min = max = fontSize}
          if (multiplier &gt;  1) { min = fontSize}
          if (multiplier &lt;  1) { max = fontSize}
        } while ((max - min) &gt; 1);
        fontSize = min;
      }
      container.remove();
      $(this).text(text);
      var minFontSize = options.minFontPixels;
      var maxFontSize = options.maxFontPixels;
      $(this).css('fontSize', 
                  minFontSize &amp;&amp; (minFontSize &gt; fontSize) ?
                  minFontSize :
                  maxFontSize &amp;&amp; (maxFontSize &lt; fontSize) ?
                  maxFontSize :
                  fontSize); 
    }); 
  }; 
})(jQuery);
</code></pre>

<p>See demo <a href="http://jsfiddle.net/8Bs6W/" rel="nofollow">here</a>.</p>

<p>But what if container contains children let's say:</p>

<pre><code>&lt;div&gt;&lt;span class="c1"&gt;text1&lt;/span&gt;main text&lt;span class="c2"&gt;text2&lt;/span&gt;&lt;/div&gt;
</code></pre>

<p>and we want to autosize also children, keeping text same high as "main text" that is a text node? Children might have a different <em>font-family</em> or other parameters. </p>

<p>How can be the algorithm above improved to get such results?</p>
