Created
July 7, 2012 13:03
-
-
Save ekstinehickorysnippets/3066410 to your computer and use it in GitHub Desktop.
JavaScript: Text FitText.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<h1 id="fittext1">Squeeze with FitText</h1> | |
<h1 id="fittext2">Squeeze with FitText</h1> | |
<h1 id="fittext3">Squeeze with FitText</h1> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/*global jQuery */ | |
/*! | |
* FitText.js 1.0 | |
* | |
* Copyright 2011, Dave Rupert http://daverupert.com | |
* Released under the WTFPL license | |
* http://sam.zoy.org/wtfpl/ | |
* | |
* Date: Thu May 05 14:23:00 2011 -0600 | |
*/ | |
(function( $ ){ | |
$.fn.fitText = function( kompressor, options ) { | |
// Setup options | |
var compressor = kompressor || 1, | |
settings = $.extend({ | |
'minFontSize' : Number.NEGATIVE_INFINITY, | |
'maxFontSize' : Number.POSITIVE_INFINITY | |
}, options); | |
return this.each(function(){ | |
// Store the object | |
var $this = $(this); | |
// Resizer() resizes items based on the object width divided by the compressor * 10 | |
var resizer = function () { | |
$this.css('font-size', Math.max(Math.min($this.width() / (compressor*10), parseFloat(settings.maxFontSize)), parseFloat(settings.minFontSize))); | |
}; | |
// Call once to set. | |
resizer(); | |
// Call on resize. Opera debounces their resize by default. | |
$(window).on('resize', resizer); | |
}); | |
}; | |
})( jQuery ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> | |
<script src="jquery.fittext.js"></script> | |
<script type="text/javascript"> | |
$("#fittext1").fitText(); | |
$("#fittext2").fitText(1.2); | |
$("#fittext3").fitText(1.1, { minFontSize: 50, maxFontSize: '75px' }); | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
FitText.js, a jQuery plugin for inflating web type
FitText makes font-sizes flexible. Use this plugin on your responsive design to achieve scalable headlines that fill the width of the parent element.
How it works
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script src="jquery.fittext.js"></script> <script> $("#responsive_headline").fitText(); </script>Here is a simple FitText setup:
Pretty Cool. Your text should now resize based on the width of the parent element. By default: Font-size = 1/10th of the parent element's width.
The Compressor
If your text is resizing poorly, you'll want to turn tweak up/down "The Compressor". It works a little like a guitar amp. The default is 1.
$("#responsive_headline").fitText(1.2); // Turn the compressor up (text shrinks more aggressively)
$("#responsive_headline").fitText(0.8); // Turn the compressor down (text shrinks less aggressively)
This will hopefully give you a level of "control" that might not be pixel perfect, but scales smoothly & nicely.
new: minFontSize & maxFontSize
FitText now allows you to specify two optional pixel values: minFontSize and maxFontSize. Great for situations when you want responsive text but also need to preserve hierarchy.
$("#responsive_headline").fitText(1.2, { minFontSize: '20px', maxFontSize: '40px' })
CSS Tips
Make sure your headline is display: block; or display: inline-block; with a specified width, i.e. width: 100%.
Be ready to tweak till everything balances out.
FitText now ignores your CSS file's font-size, but be sure to set one as a non-javascript fallback.
Make sure your element is appended to document before setting fitText. e.g. $('