jQuery Plugin To Scale Text To Fill Its Container - ScaleText

jQuery Plugin To Scale Text To Fill Its Container - ScaleText
File Size: 16.8 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.