initial commit

mivey00 · May 5, 2011 · 3e4a81c · 3e4a81c
1 parent 4d24b54
commit 3e4a81c
Show file tree

Hide file tree

Showing 3 changed files with 130 additions and 0 deletions.
diff --git a/README b/README
@@ -0,0 +1,33 @@
+# 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.
+
+## 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.
+
+    <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).
+
+### 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.
+
+## CSS Tips
+
+* Set your target headline to `width: 100%` in your CSS.  And if you set a font-size, this will act like a `max-font-size`.
+* 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](http://github.com/davatron5000/Lettering.js)! #synergy
+
+### Disclaimers & Forks
+As always, use JavaScript with caution: plan for no-js fallbacks that you are comfortable with.
+
+Also please Download, Fork, & Commit. We'd love your see your ideas.
diff --git a/example.html b/example.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8" />
+	<title>FitText</title>
+
+	<style type="text/css">
+		body {
+		  background: #233a40; 
+		  color: #fff;
+		  font: 16px/1.8 sans-serif;
+		}
+		.container {
+			width: 84%;
+			margin:0 auto;
+			max-width:1140px;
+		}
+		header {
+			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;
+			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>
+
+	<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
+</head>
+
+<body>
+
+	<div class="container">
+		<header>
+		<h1 id="fittext">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);
+	</script>
+
+</body>
+</html>
diff --git a/jquery.fittext.js b/jquery.fittext.js
@@ -0,0 +1,40 @@
+/*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 ) {
+
+			return this.each(function(){
+				var $this = $(this);                                      // store the object
+				var fontResize = origFontSize = $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 ( obj ) {
+					fontResize =  obj.width() / (compressor*10);
+					fontResize = (fontResize >= origFontSize)?  origFontSize : fontResize; 
+					obj.css('font-size',fontResize);
+				}
+
+				// Call once to set.
+				resizer($this);
+
+				// Call on resize. Opera debounces their resize by default. 
+      	$(window).resize(function() {
+					resizer($this);
+      	});
+
+			});
+
+	};
+
+})( jQuery );