Character size based fitting (width & height), compressor removed

README.md

@@ -10,27 +10,16 @@ If you're working on a responsive design, take whatever headline you'd like to s
       $("#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 will now resize based on the width and height of the item.
 
-### 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.
-
-    $("#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)
-
-This will hopefully give you a level of "control" that might not be pixel perfect, but scales smoothly & nicely.
-
-## 3-Step Setup
+## 2-Step Setup
 
 * 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.
 
 ## CSS Tips
 
-* Set your target headline to `width: 100%` in your CSS. 
-* Set a font-size, this will act like a `max-font-size`.
-* Be ready to tweak till everything balances out.
+* Set your target headline to `white-space: nowrap; width: auto;`
 * 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)!
 

example.html

@@ -16,22 +16,23 @@
 			max-width:1140px;
 		}
 		header {
+			background: rgba(0,0,0,0.2);
+			margin:5% auto;
+			padding: 2% 0;
+			text-align: center;
 			width: 100%;
-			margin:0px auto;
 		}
 		h1 {
-			background: rgba(0,0,0,0.2);
-			text-align: center;
 			color:#fff;
 			font: 95px/1 "Impact";
-			text-transform: uppercase;
 			display: inline-block;
+			margin: 0;	
 			text-shadow:#253e45 -1px 1px 0,
 			#253e45 -2px 2px 0,
 			#d45848 -3px 3px 0,
 			#d45848 -4px 4px 0;
-			width: 100%;
-			margin: 5% auto 5%;
+			text-transform: uppercase;
+			white-space: nowrap;
 		}
 	</style>
 
@@ -50,7 +51,7 @@ <h1 id="fittext">Squeeze with FitText</h1>
 	<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);
+		$("#fittext").fitText();
 	</script>
 
 </body>

jquery.fittext.js

@@ -1,36 +1,67 @@
 /*global jQuery */
 /*!	
-* FitText.js 1.0
+* FitText.js 1.1
 *
-* Copyright 2011, Dave Rupert http://daverupert.com
+* Copyright 2011, Dave Rupert http://daverupert.com, Armin Rosu http://about.me/arminrosu
 * Released under the WTFPL license 
 * http://sam.zoy.org/wtfpl/
 *
-* Date: Thu May 05 14:23:00 2011 -0600
+* Date: Thu Aug 11 14:30:00 2011 +0200
 */
 
 (function( $ ){
 
 	$.fn.fitText = function( kompressor ) {
 
-			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
-
-        // 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));
+		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 () {
+				// original dimensions
+				var original = {
+					'height':	$this.height(),
+					'size':		parseFloat( $this.css('font-size') ),
+					'width':	$this.width()
 				};
-
-				// Call once to set.
-				resizer();
 
-				// Call on resize. Opera debounces their resize by default. 
-      	$(window).resize(resizer);
-
-			});
+				// parental boundaries
+				var container = $this.parent();
+				var parent = {
+					'height':	container.height(),
+					'width':	container.width()
+				};
+
+				// get character dimensions     
+				var character = {
+					'height':	(original.height / original.size),
+					'width':	(original.width / original.size)
+				}
+
+				// aproximate optimal size
+				var optimal = {
+					'height':	Math.floor( parent.height / character.height ),
+					'width':	Math.floor( parent.width / character.width )		        	
+				};
+
+				// check which fits better
+				if ( optimal.width <= optimal.height ) {
+					// fit width
+					$this.css('font-size', optimal.width );
+				} else {
+					// fit height
+					$this.css('font-size', optimal.height );
+				}
+			};
 
+			// Call once to set.
+			resizer();
+
+			// Call on resize. Opera debounces their resize by default. 
+		  	$(window).resize(resizer);
+		});
+
 	};
 
 })( jQuery );