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 diff --git a/example.html b/example.html index c6a2aee..cf55a1e 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..b50807e 100644 --- a/jquery.fittext.js +++ b/jquery.fittext.js @@ -11,23 +11,35 @@ (function( $ ){ - $.fn.fitText = function( kompressor, options ) { + $.fn.fitText = function( options ) { // Setup options - var compressor = kompressor || 1, + 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(){ - // Store the object + // Store the object & save previous position value var $this = $(this); - // 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','width':'auto'}); + + // Calculate fontRatio ratio for this typeface + fontRatio = parseFloat($this.width()) / parseFloat($this.css('font-size')); + + // Reset the temporary css values. + $this.css({'position':'','width':'','white-space':''}); + + // 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 () { - $this.css('font-size', Math.max(Math.min($this.width() / (compressor*10), parseFloat(settings.maxFontSize)), parseFloat(settings.minFontSize))); + $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.