From 5ffe92f3f90e30d436ea0659116afdf32064b98e Mon Sep 17 00:00:00 2001 From: Pete Warman Date: Wed, 30 Oct 2013 13:43:38 +0000 Subject: [PATCH 1/5] calculate compressor ratio automatically --- example.html | 4 ++-- jquery.fittext.js | 26 ++++++++++++++++++++------ 2 files changed, 22 insertions(+), 8 deletions(-) diff --git a/example.html b/example.html index c6a2aee..65f16cf 100644 --- a/example.html +++ b/example.html @@ -52,8 +52,8 @@

Squeeze with FitText

diff --git a/jquery.fittext.js b/jquery.fittext.js index 080b82e..7b25c14 100644 --- a/jquery.fittext.js +++ b/jquery.fittext.js @@ -11,10 +11,10 @@ (function( $ ){ - $.fn.fitText = function( kompressor, options ) { + $.fn.fitText = function( options ) { // Setup options - var compressor = kompressor || 1, + var compressor, settings = $.extend({ 'minFontSize' : Number.NEGATIVE_INFINITY, 'maxFontSize' : Number.POSITIVE_INFINITY @@ -22,12 +22,26 @@ return this.each(function(){ - // Store the object - var $this = $(this); + // Store the object & save previous position value + var $this = $(this), + oldPos = $this.css('position'); - // Resizer() resizes items based on the object width divided by the compressor * 10 + // Temporarily force all the text onto one line and allow the element's width to expand to accommodate it + $this.css({'white-space':'nowrap','position':'absolute'}); + + // Calculate compressor ratio for this typeface + compressor = parseFloat($this.width()) / parseFloat($this.css('font-size')); + + // Reset the position value. Leaving white-space:nowrap provides some wriggle room for rounding errors + $this.css({'position':oldPos}); + + // Resizer() resizes items based on the object width divided by the compressor + // Using Math.floor helps avoid browser rounding errors. var resizer = function () { - $this.css('font-size', Math.max(Math.min($this.width() / (compressor*10), parseFloat(settings.maxFontSize)), parseFloat(settings.minFontSize))); + var fontSize = Math.floor(Math.max(Math.min($this.width() / compressor, parseFloat(settings.maxFontSize)), parseFloat(settings.minFontSize))); + $this.css('font-size', fontSize); + //reset white-space property if minFontSize is being used + $this.css({'white-space': (fontSize <= parseFloat(settings.minFontSize)) ? 'normal':'nowrap'}); }; // Call once to set. From 8fc7e2db555c7613b78cb41465ba20beed448173 Mon Sep 17 00:00:00 2001 From: Pete Warman Date: Wed, 30 Oct 2013 14:27:09 +0000 Subject: [PATCH 2/5] removed reference to compressor from readme --- README.md | 14 +------------- 1 file changed, 1 insertion(+), 13 deletions(-) diff --git a/README.md b/README.md index 27c86d9..44f070f 100644 --- a/README.md +++ b/README.md @@ -12,23 +12,11 @@ Here is a simple FitText setup: ``` -Your text should now fluidly resize, by default: Font-size = 1/10th of the 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`. - -```javascript -jQuery("#responsive_headline").fitText(1.2); // Turn the compressor up (resizes more aggressively) -jQuery("#responsive_headline").fitText(0.8); // Turn the compressor down (resizes less aggressively) -``` - -This will hopefully give you a level of "control" that might not be pixel perfect, but resizes smoothly & nicely. - ## minFontSize & maxFontSize FitText now allows you to specify two optional pixel values: `minFontSize` and `maxFontSize`. Great for situations when you want to preserve hierarchy. ```javascript -jQuery("#responsive_headline").fitText(1.2, { minFontSize: '20px', maxFontSize: '40px' }) +jQuery("#responsive_headline").fitText({ minFontSize: '20px', maxFontSize: '40px' }) ``` ## CSS FAQ From a692940d55b63e151be9396298e41be34ab8196e Mon Sep 17 00:00:00 2001 From: Pete Warman Date: Wed, 30 Oct 2013 15:05:12 +0000 Subject: [PATCH 3/5] need to reset width for calculation --- jquery.fittext.js | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/jquery.fittext.js b/jquery.fittext.js index 7b25c14..f116b55 100644 --- a/jquery.fittext.js +++ b/jquery.fittext.js @@ -23,17 +23,16 @@ return this.each(function(){ // Store the object & save previous position value - var $this = $(this), - oldPos = $this.css('position'); + var $this = $(this); // Temporarily force all the text onto one line and allow the element's width to expand to accommodate it - $this.css({'white-space':'nowrap','position':'absolute'}); + $this.css({'white-space':'nowrap','position':'absolute','width':'auto'}); // Calculate compressor ratio for this typeface compressor = parseFloat($this.width()) / parseFloat($this.css('font-size')); - // Reset the position value. Leaving white-space:nowrap provides some wriggle room for rounding errors - $this.css({'position':oldPos}); + // Reset the temporary css values. Leaving white-space:nowrap provides some wriggle room for rounding errors + $this.css({'position':'','width':''}); // Resizer() resizes items based on the object width divided by the compressor // Using Math.floor helps avoid browser rounding errors. From 182b26714f82b87529b4b42bcab77000fabe7ecc Mon Sep 17 00:00:00 2001 From: Pete Warman Date: Wed, 30 Oct 2013 15:05:38 +0000 Subject: [PATCH 4/5] removed unnecessary heading from example --- example.html | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/example.html b/example.html index 65f16cf..01d7390 100644 --- a/example.html +++ b/example.html @@ -43,7 +43,6 @@

Squeeze with FitText

Squeeze with FitText

-

Squeeze with FitText

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 +51,7 @@

Squeeze with FitText

From e4155eb826936850743ad3f083c8404806a71d1e Mon Sep 17 00:00:00 2001 From: Pete Warman Date: Wed, 30 Oct 2013 16:22:00 +0000 Subject: [PATCH 5/5] added multiline and scale parameters --- example.html | 4 +++- jquery.fittext.js | 23 +++++++++++------------ 2 files changed, 14 insertions(+), 13 deletions(-) diff --git a/example.html b/example.html index 01d7390..cf55a1e 100644 --- a/example.html +++ b/example.html @@ -43,6 +43,7 @@

Squeeze with FitText

Squeeze with FitText

+

Squeeze with FitText

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.

@@ -51,7 +52,8 @@

Squeeze with FitText

diff --git a/jquery.fittext.js b/jquery.fittext.js index f116b55..b50807e 100644 --- a/jquery.fittext.js +++ b/jquery.fittext.js @@ -14,10 +14,12 @@ $.fn.fitText = function( options ) { // Setup options - var compressor, + var fontRatio, settings = $.extend({ 'minFontSize' : Number.NEGATIVE_INFINITY, - 'maxFontSize' : Number.POSITIVE_INFINITY + 'maxFontSize' : Number.POSITIVE_INFINITY, + 'lineCount' : 1, + 'scale': 100 }, options); return this.each(function(){ @@ -28,19 +30,16 @@ // Temporarily force all the text onto one line and allow the element's width to expand to accommodate it $this.css({'white-space':'nowrap','position':'absolute','width':'auto'}); - // Calculate compressor ratio for this typeface - compressor = parseFloat($this.width()) / parseFloat($this.css('font-size')); + // Calculate fontRatio ratio for this typeface + fontRatio = parseFloat($this.width()) / parseFloat($this.css('font-size')); - // Reset the temporary css values. Leaving white-space:nowrap provides some wriggle room for rounding errors - $this.css({'position':'','width':''}); + // Reset the temporary css values. + $this.css({'position':'','width':'','white-space':''}); - // Resizer() resizes items based on the object width divided by the compressor - // Using Math.floor helps avoid browser rounding errors. + // Resizer() resizes items based on the object width divided by the fontRatio + // Subtract one px for each line to get around rounding errors var resizer = function () { - var fontSize = Math.floor(Math.max(Math.min($this.width() / compressor, parseFloat(settings.maxFontSize)), parseFloat(settings.minFontSize))); - $this.css('font-size', fontSize); - //reset white-space property if minFontSize is being used - $this.css({'white-space': (fontSize <= parseFloat(settings.minFontSize)) ? 'normal':'nowrap'}); + $this.css('font-size', Math.max(Math.min( ((settings.scale/100) * settings.lineCount * $this.width() / fontRatio) - settings.lineCount, parseFloat(settings.maxFontSize)), parseFloat(settings.minFontSize))); }; // Call once to set.