Calculate text font size to fill container with text

Question

Possible Duplicate:
Auto-size dynamic text to fill fixed size container

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

(function($) { 
  $.fn.textfill = function(options) { 
    return this.each(function() {
      var text = $(this).text();
      $(this).text('');
      var container = $('<span />').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 >  1) { min = fontSize}
        if (multiplier <  1) { max = fontSize}
      } while ((max - min) > 1);
      fontSize = min;
      if ($(this).width() < 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 >  1) { min = fontSize}
          if (multiplier <  1) { max = fontSize}
        } while ((max - min) > 1);
        fontSize = min;
      }
      container.remove();
      $(this).text(text);
      var minFontSize = options.minFontPixels;
      var maxFontSize = options.maxFontPixels;
      $(this).css('fontSize', 
                  minFontSize && (minFontSize > fontSize) ?
                  minFontSize :
                  maxFontSize && (maxFontSize < fontSize) ?
                  maxFontSize :
                  fontSize); 
    }); 
  }; 
})(jQuery);

See demo here.

But what if container contains children let's say:

<div><span class="c1">text1</span>main text<span class="c2">text2</span></div>

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

How can be the algorithm above improved to get such results?

@Diodeus - Not a duplicate! Read both post and notice difference regarding child elements. — Ωmega, Oct 10 '12 at 15:33

haynar · Accepted Answer · 2012-10-10T18:06:51.967

I have played around a little bit and it seems to me that I found the solution. The algorithm is modified in the following way:

at first you need to find old font size for the target element and all its children (not only first layer)
then you need to calculate a coefficient, i.e. how much the font size should be changed, the calculation of the coefficient should be done in parallel with the new font size calculation
and apply that coefficient to the final font size of target and for all of its children

here is the working DEMO

UPDATE

here is the solution that you need, the previous one does a little bit more than you need, I just want to keep it, maybe others will find it helpful. I want also to notice the this second solution is very similar to the first one except the coefficient part, which is unnecessary is this case.

Calculate text font size to fill container with text

1 Answers1