inflateText.js

InflateText remixes Dave Rupert's FitText.js by altering the resizer function to determine the maximum font-size that will allow an element to fit in the available horizontal space.

Installation

InflateText is available on bower:

$ bower install rjz/inflateText.js

Usage

via UMD

<script>
require(['./inflateText'], function (inflateText) {
  inflateText(document.querySelector('h1.my-title'), {
    scale: 0.8
  });
});
</script>

As a jQuery plugin

inflateText has historically been packaged as a jQuery plugin. For convenience, a (legacy) shim is provided. Include it, and invoke inflateText as any other jQuery plugin:

<script src="jquery.inflateText.js"></script>
<script>
$('.default h1').inflateText();
</script>

Options

    maxFontSize: 96, // px
    minFontSize: 32, // px
    scale: 0.8       // 0..1

Support

inflateText.js works in Chrome, Firefox, Opera, and IE9+, but please don't hesitate to fork+fix any issues you discover.

A cautionary note:

Unless a minimum font size is specified, InflateText will always attempt to fit the target text into a single line. Mix long headlines and mobile resolutions only at your own risk!

Author

RJ Zaworski rj@rjzaworski.com

License

inflateText.js is released under the WTFPL License. You can read the license here.