Skip to content

rjz/inflateText.js

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

13 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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.