Font Scaling

Dynamically apply a font-size to a short text – as a whole – so that it spans 100% of the parent's width.

HTML

<input type="button" id="controller" value="Apply" />
<div>
  <h2>Lorem ipsum dolor</h2>
  <h2>Test String</h2>
  <h2>Sweet Concatenation</h2>
  <h2>Font Scaling</h2>
</div>

CSS

div {
  width: 50%;
  background-color: tomato;
  font-family: 'Arial';
}

h2 {
  white-space: nowrap;
}

h2:nth-child(2) {
  font-style: italic;  
}

JavaScript

$('#controller').click(function(){
	$('h2').each(function(){
    var
      $el = $(this),
      max = $el.get(0),
      el = null
    ;
    max =
      max
    ? max.offsetWidth
    : 320
    ;
    $el.css({
      'font-size': '1em',
      'display': 'inline',
    });
    el = $el.get(0);

    el.get_float = function(){
      var
        fs = 0
      ;
      if (this.style && this.style.fontSize) {
        fs = parseFloat(this.style.fontSize.replace( /([\d\.]+)em/g, '$1' ));
      }
      return fs;
    };

    el.bigger = function(){
      this.style.fontSize = (this.get_float() +0.1) +'em';
    };


    while ( el.offsetWidth < max ) {
      el.bigger();
    }
    // finishing touch.
    $el.css({
      'font-size': ((el.get_float() -0.1) +'em'),
      'line-height': 'normal',
      'display': '',
    });
	});  // end of ( each )
});	// end of ( font scaling test )