From e8158a687ac6f94489571ae4fca90c6434a4edb3 Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Tue, 22 May 2012 07:18:11 -0400 Subject: [PATCH 1/3] whitespace fixes --- jquery.fittext.js | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/jquery.fittext.js b/jquery.fittext.js index 1c4b29e..ca59338 100644 --- a/jquery.fittext.js +++ b/jquery.fittext.js @@ -1,31 +1,31 @@ /*global jQuery */ -/*! +/*! * FitText.js 1.0 * * Copyright 2011, Dave Rupert http://daverupert.com -* Released under the WTFPL license +* 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 ) { - + var settings = { 'minFontSize' : Number.NEGATIVE_INFINITY, 'maxFontSize' : Number.POSITIVE_INFINITY }; - + return this.each(function(){ var $this = $(this); // store the object - var compressor = kompressor || 1; // set the compressor - - if ( options ) { + 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.max(Math.min($this.width() / (compressor*10), parseFloat(settings.maxFontSize)), parseFloat(settings.minFontSize))); @@ -33,10 +33,10 @@ // Call once to set. resizer(); - - // Call on resize. Opera debounces their resize by default. + + // Call on resize. Opera debounces their resize by default. $(window).resize(resizer); - + }); }; From be0843563443048db6f43d23af8daa8ea7e87336 Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Tue, 22 May 2012 07:52:22 -0400 Subject: [PATCH 2/3] Use proportional sizing to get exact fit Adds CSS `display: inline-block` to work Resolves relying on compressor to fix for perfect sizing --- README.md | 1 - example.html | 8 ++++---- jquery.fittext.js | 27 +++++++++++++++++++-------- 3 files changed, 23 insertions(+), 13 deletions(-) diff --git a/README.md b/README.md index 7197801..e43b873 100644 --- a/README.md +++ b/README.md @@ -27,7 +27,6 @@ FitText now allows you to specify two optional pixel values: `minFontSize` and ` ## 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. `$('
').fitText()` will NOT work diff --git a/example.html b/example.html index 77774cd..784a689 100644 --- a/example.html +++ b/example.html @@ -42,8 +42,8 @@

Squeeze with FitText

-

Squeeze with FitText

-

Squeeze with FitText

+

FitText

+

FitText like skinny jeans

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.

@@ -52,8 +52,8 @@

Squeeze with FitText

diff --git a/jquery.fittext.js b/jquery.fittext.js index ca59338..70c5384 100644 --- a/jquery.fittext.js +++ b/jquery.fittext.js @@ -11,24 +11,35 @@ (function( $ ){ + var isStyleAdded; + $.fn.fitText = function( kompressor, options ) { - var settings = { - 'minFontSize' : Number.NEGATIVE_INFINITY, + // add .fit-text '); + isStyleAdded = true; + } + + $(this).addClass('fit-text'); + + var settings = $.extend({ + 'minFontSize' : 1, 'maxFontSize' : Number.POSITIVE_INFINITY - }; + }, options || {} ); return this.each(function(){ 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.max(Math.min($this.width() / (compressor*10), parseFloat(settings.maxFontSize)), parseFloat(settings.minFontSize))); + // get proportional size of text to fit in its parent + var size = ( parseInt( $this.css('font-size'), 10 ) / $this.width() ) * $this.parent().width(); + size = Math.max( parseFloat( settings.minFontSize ), size ); + size = Math.min( parseFloat( settings.maxFontSize ), size ); + size *= compressor; + $this.css( 'font-size', size ); }; // Call once to set. From f8220df3837ba7ea1056f2f152431a72f72cf462 Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Thu, 24 May 2012 13:42:09 -0400 Subject: [PATCH 3/3] Use innerWidth of parent element --- jquery.fittext.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/jquery.fittext.js b/jquery.fittext.js index 70c5384..163df81 100644 --- a/jquery.fittext.js +++ b/jquery.fittext.js @@ -35,7 +35,7 @@ // Resizer() resizes items based on the object width divided by the compressor * 10 var resizer = function () { // get proportional size of text to fit in its parent - var size = ( parseInt( $this.css('font-size'), 10 ) / $this.width() ) * $this.parent().width(); + var size = ( parseInt( $this.css('font-size'), 10 ) / $this.width() ) * $this.parent().innerWidth(); size = Math.max( parseFloat( settings.minFontSize ), size ); size = Math.min( parseFloat( settings.maxFontSize ), size ); size *= compressor;