jQuery Plugin To Scale Text To Fill Its Container - ScaleText

ScaleText is a jQuery plugin which allows dynamic resizing of text's font size, so that it grows as based on parent container's width/height. The plugin will find all child elements with fixed font sizes and make them responsive, and then adjust the font size as large as possible to fit/fill the parent container.

How to use it:

1. Include jQuery JavaScript library and the jQuery ScaleText plugin in the web page.

<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="src/jquery.scaletext.js"></script>

2. Wrap your text into a container with fixed width/height.

<div class="box">
  ... Text here ... 
</div>

3. Call the function on the container element and done. You can also add class 'scaleText' to the container element for automatic initialization.

$(".box").scaleText();

4. Available options.

$(".box").scaleText({
// debug mode
debug: false,

// If you decrease this value, the less perfect the fit will be
accuracy: 100,

// Finds all containing elements and converts fixed sizes to relative sizes. 
 makeRelative: true,

// Verical middl alignment
verticalMiddle: true,


// apply a scale animation
animate: false,

// If animating, should the spacer be animated to?
// It will increase in height.
animateSpacer: true,

// custom animations
animateOptions: {}
});

Change logs:

2014-11-14

• Moved from Pixels to Percentages, as standards suggest floating point pixel values aren't valid.
• Doesn't animate if there is less than 0.5pixels difference in font size
• Speed improvements
• Extra options, such as turning off relative font creation
• Updated demo page

2014-11-09

• Rendering issue on Android. 
• Had overcomplicated an aspect of the CSS which was breaking things in certain situations.

2014-11-08

• Vertical Middling

---

This awesome jQuery plugin is developed by unclespode. For more Advanced Usages, please check the demo page or visit the official website.