Font-size agnostic. Added min- & max- font-size options.

davatron5000 · davatron5000 · commit a1075fbecc4f · 2011-08-27T16:52:58.000-05:00
diff --git a/README.md b/README.md
@@ -1,50 +1,45 @@
 # FitText.js, a jQuery plugin for inflating web type
-FitText makes font-sizes flexible. Use this plugin on your fluid or responsive layout to achieve scalable headlines that fill the width of a parent element.
+FitText makes font-sizes flexible. Use this plugin on your fluid or responsive layout to achieve scalable headlines that fill the width of the parent element.
 
 ## How it works
-If you're working on a responsive design, take whatever headline you'd like to scale and set the item to FitText. Oh. and you'll want to include jQuery n' all that too.
+Here is a simple FitText setup:
 
     <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>
 
-[Pretty Cool](http://www.hulu.com/watch/194733/saturday-night-live-miley-cyrus-show). Your text will now resize based on the width of the item. (by default: ~1/10th of the element's width).
+[Pretty Cool](http://www.hulu.com/watch/194733/saturday-night-live-miley-cyrus-show). 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
-The default setting works pretty well, but when it doesn't FitText has one setting you can adjust. If your text resizes poorly or is resizing all hurdy gurdy, you'll want to turn tweak up/down the compressor. It works a little like a guitar amp.
+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 (font will shrink a bit more aggressively)
-    $("#responsive_headline").fitText(0.8); // turn the compressor down (font will shrink less aggressively)
+    $("#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.
 
-## 3-Step Setup
+### _new:_ minFontSize & maxFontSize
+FitText now allows you to specify two optional values: `minFontSize` and `maxFontSize`. Great for situations when you want responsive text but also want to preserve hierarchy.
 
-* Add all the Javascripts (jQuery, FitText and `$(element).fitText();` block) as described above.
-* Set your `font-size` in your CSS.  This will make act like a max-font-size.
-* Squeeze your browser.
+    $("#responsive_headline").fitText(1.2, { minFontSize: 20, maxFontSize: '80px' })
+
+The options accept either integers or `px` values.
 
 ## CSS Tips
 
-* Set your target headline to `width: 100%` in your CSS. 
-* Set a font-size, this will act like a `max-font-size`.
+* Make sure your headline is `display: block;` or inline-block with a specified width `display: inline-block; width: 100%`. 
 * Be ready to tweak till everything balances out.
-* So far, FitText seems to work with other fun properties like text-shadow
-* It also works with [Lettering.js #synergy](http://github.com/davatron5000/Lettering.js)!
 
 ## Disclaimers
 This is the part of the show where we cover our butts.
 
 ### Intended for Fluid Width Designs
-We built this to satisfy a need for fluid resizing text on responsive designs. Mostly for use on [Trent Walton's blog](http://trentwalton.com), which he's using it all over. If you're not going fluid and/or want exact fitting text, we recommend checking out [BigText](https://github.com/zachleat/BigText) by Zach Leatherman.
+We built this to satisfy a need for fluid resizing text on responsive designs. Mostly for use on [Trent Walton's blog](http://trentwalton.com), which he's using it all over. If you want more exact fitting text, we recommend checking out [BigText](https://github.com/zachleat/BigText) by Zach Leatherman.
 
 ### window.resize() tsk tsk tsk...
 If you oppose `window.resize()`, it's worth mentioning that @chriscoyier created a fork of [FitText using a debounced resize method](https://github.com/chriscoyier/FitText.js). 
 
-### Fallbacks
-As always, use JavaScript with caution: plan for no-js fallbacks that you are comfortable with.
-
-### For Forks' Sake
+### Download, Fork, Commit.
 If you think you can make this better, please Download, Fork, & Commit. We'd love your see your ideas.
diff --git a/example.html b/example.html
@@ -25,12 +25,11 @@
 			color:#fff;
 			font: 95px/1 "Impact";
 			text-transform: uppercase;
-			display: inline-block;
+			display: block;
 			text-shadow:#253e45 -1px 1px 0,
 			#253e45 -2px 2px 0,
 			#d45848 -3px 3px 0,
 			#d45848 -4px 4px 0;
-			width: 100%;
 			margin: 5% auto 5%;
 		}
 	</style>
@@ -42,15 +41,19 @@
 
 	<div class="container">
 		<header>
-		<h1 id="fittext">Squeeze with FitText</h1>
+		<h1 id="fittext1">Squeeze with FitText</h1>
+		<h1 id="fittext2">Squeeze with FitText</h1>
+		<h1 id="fittext3">Squeeze with FitText</h1>
 		</header>
 		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 	</div>
 	
 	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  	<script src="jquery.fittext.js"></script>
 	<script type="text/javascript">
-		$("#fittext").fitText(1.2);
+		$("#fittext1").fitText();
+		$("#fittext2").fitText(1.2);
+		$("#fittext3").fitText(1.1, { minFontSize: 50, maxFontSize: '75px' });
 	</script>
 	
 </body>
diff --git a/jquery.fittext.js b/jquery.fittext.js
@@ -11,16 +11,24 @@
 
 (function( $ ){
 	
-	$.fn.fitText = function( kompressor ) {
+	$.fn.fitText = function( kompressor, options ) {
+	    
+	    var settings = {
+        'minFontSize' : Number.NEGATIVE_INFINITY,
+        'maxFontSize' : Number.POSITIVE_INFINITY
+      };
 	
 			return this.each(function(){
-				var $this = $(this);                                     // store the object
-				var origFontSize = parseFloat($this.css('font-size'));   // init the font sizes
-				var compressor = kompressor || 1;                        // set the compressor
-
+				var $this = $(this);              // store the object
+				var compressor = kompressor || 1; // set the compressor
+        
+        if ( options ) { 
+          $.extend( settings, options );
+        }
+        
         // Resizer() resizes items based on the object width divided by the compressor * 10
 				var resizer = function () {
-					$this.css('font-size', Math.min($this.width() / (compressor*10), origFontSize));
+					$this.css('font-size', Math.max(Math.min($this.width() / (compressor*10), parseFloat(settings.maxFontSize)), parseFloat(settings.minFontSize)));
 				};
 
 				// Call once to set.
