├── .gitignore
├── CHANGELOG.md
├── README.md
├── demo
    └── index.html
├── jquery.quickfit.js
└── package.json


/.gitignore:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chunksnbits/jquery-quickfit/32d6aa4a5324d19221890f9933840216cf4ebd82/.gitignore


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
 1 | ## Preparing for 1.0.0 (April 9, 2012)
 2 | 
 3 | ## 0.3.0 (April 9, 2012)
 4 | 
 5 | * Refactored code
 6 | * Simplified options
 7 | * Simplified project setup
 8 | 
 9 | ## 0.2.0 (April 7, 2012)
10 | 
11 | * fixed bug that caused frequent remeassures.
12 | * improved documentation.
13 | 
14 | 
15 | ## 0.1.0 (April 6, 2012)
16 | 
17 | * initial release


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | #### *DEPRECATED (This plugin is no longer maintained*
  2 | #### Archive:
  3 | 
  4 | ---
  5 | 
  6 | A quick and dirty way to fit your text
  7 | ======================================
  8 | jquery-quickfit-plugin is a quick and dirty solution to fit html text into its surrounding container. 
  9 | 
 10 | jquery-quickfit is for you, if:
 11 | 
 12 | * you want to resize multiple items in a short amount of time
 13 | * you want good performance when you resize an item multiple times (e.g., on window resize)
 14 | * you want to autofit a single line of text
 15 | 
 16 | jquery-quickfit is not for you, if:
 17 | 
 18 | * you need to fit a single text once
 19 | * you want to fit a paragraph of text, spanning multiple lines
 20 | 
 21 | Usage
 22 | =====
 23 | 
 24 | Include jquery and jquery-quickfit int the header. 
 25 | Then simply call 
 26 | 
 27 | ```html
 28 | $('#yourid').quickfit(options) 
 29 | ```
 30 | 
 31 | on the element you want to fit.
 32 | 
 33 | Demo
 34 | ====
 35 | 
 36 | Html:
 37 | 
 38 | ```html
 39 | <div id="quickfit">Text to fit*</div>
 40 | ```
 41 | 
 42 | Javascript:
 43 | 
 44 | ```javascript
 45 | <script src=".../jquery.min.js" type="text/javascript" />
 46 | <script src="../script/jquery.quickfit.js" type="text/javascript" />
 47 |   
 48 | <script type="text/javascript">
 49 |   $(function() {
 50 |     $('#quickfit').quickfit();
 51 |   });
 52 | </script>
 53 | ```
 54 | * in order to work correctly, this line should be styled with the white-space:nowrap option
 55 | 
 56 | Options
 57 | =======
 58 | 
 59 | <table>
 60 |   <thead>
 61 |     <tr>
 62 |       <th>Name</th>
 63 |       <th>Type</th>
 64 |       <th>Default</th>
 65 |       <th>Description</th>
 66 |     </tr>
 67 |   </thead>
 68 |   <tbody>
 69 |     <tr>
 70 |       <td>min</td>
 71 |       <td>integer
 72 |       <td>8
 73 |       <td>The minimum font-size the element can be sized to</td>
 74 |     </tr>
 75 |     <tr>
 76 |       <td>max</td>
 77 |       <td>integer</td>
 78 |       <td>12</td>
 79 |       <td>The maximum font-size the element can be sized to</td>
 80 |     </tr>
 81 |     <tr>
 82 |       <td>truncate</td>
 83 |       <td>boolean</td>
 84 |       <td>false</td>
 85 |       <td>Flag, whether the text should be truncated (shortened with an appended '...') if it doesn't fit with the minimum size.</td>
 86 |     </tr>
 87 |     <tr>
 88 |       <td>tolerance</td>
 89 |       <td>float</td>
 90 |       <td>0.02</td>
 91 |       <td>Adds a padding to the calculation. The higher the value, the smaller the chance the text will overlap its container. This value should be fiddled with, when encountering problems on a certain font.</td>
 92 |     </tr>
 93 |     <tr>
 94 |       <td>width</td>
 95 |       <td>int</td>
 96 |       <td>null</td>
 97 |       <td>You can default quickfit a size to which the text should be fitted to. Handy when fitting a lot of elements with an equal width.</td>
 98 |     </tr>
 99 |   </tbody>    
100 | </table>
101 | 
102 | 
103 | How it works
104 | ============
105 | Instead of using the [shrink-to-fit-approach](http://stackoverflow.com/questions/687998/auto-size-dynamic-text-to-fill-fixed-size-container) or the more performant [shrink-by-ratio-variant](http://stackoverflow.com/a/10053366/1318800), 
106 | which brings perfect results, but causes frequent re-layouts and thus is rather slow when dealing with multiple resizes,
107 | quickfit calculates an onetime size invariant estimate for a text length and uses this to guesstimate the best
108 | font-size without requiring a relayout on a subsequent fit.
109 | 
110 | Demo
111 | ====
112 | You can see jquery-quickfit in action [here](http://chunksnbits.github.com/jquery-quickfit/) (Resize to see effect). 
113 | 
114 | Performance
115 | ===========
116 | Rule of the thumb testing has shown quickfit about equally performant against the shrink-to-fit-approach, when resizing a single item once.
117 | When resizing multiple items, or a single item multiple times, jquery-quickfit outperforms shrink-to-fit significantly, see e.g., [jsperf](http://jsperf.com/jquery-quickfit-single-item-demo/11) (the test would be very similar to a window resize).
118 | 
119 | License
120 | =======
121 | jquery-quickfit-plugin is licensed under the Apache License 2.0. 
122 | 


--------------------------------------------------------------------------------
/demo/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <title>Quickfit Demo</title>
 5 |   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
 6 |   <script src="../jquery.quickfit.js" type="text/javascript" charset="utf-8"></script>  
 7 |   
 8 |   <style type="text/css" media="screen">
 9 |     .demo {
10 |       font-family:sans-serif;
11 |       margin:10px 0; 
12 |       background:#A1D8FF;
13 |       width:50%; 
14 |       white-space:nowrap
15 |      }
16 |   </style>
17 | </head>
18 | <body>
19 | 
20 |   <div id="quickfit-a" class="demo">
21 |     Min: 60, Max: 100 without truncate option
22 |   </div>
23 |   
24 |   <div id="quickfit-b" class="demo">
25 |     Min: 60, Max: 100 with truncate option
26 |   </div>
27 |   
28 | </body>
29 | <script type="text/javascript" charset="utf-8">
30 |   $(function() {
31 |     $(window).on('resize', function() {
32 |       $('#quickfit-a').quickfit({ max: 40, min: 20, truncate: false });
33 |       $('#quickfit-b').quickfit({ max: 40, min: 20, truncate: true });        
34 | 
35 |     });
36 |     $(window).trigger('resize');    
37 |   });
38 | </script>
39 | </html>


--------------------------------------------------------------------------------
/jquery.quickfit.js:
--------------------------------------------------------------------------------
  1 | (function ($) {
  2 |   var Quickfit, QuickfitHelper, defaults, pluginName;
  3 | 
  4 |   pluginName = 'quickfit';
  5 | 
  6 |   defaults = {
  7 |     min: 8,
  8 |     max: 12,
  9 |     tolerance: 0.02,
 10 |     truncate: false,
 11 |     width: null,
 12 |     sampleNumberOfLetters: 10,
 13 |     sampleFontSize: 12
 14 |   };
 15 |   QuickfitHelper = (function () {
 16 | 
 17 |     var sharedInstance = null;
 18 | 
 19 |     QuickfitHelper.instance = function (options) {
 20 |       if (!sharedInstance) {
 21 |         sharedInstance = new QuickfitHelper(options);
 22 |       }
 23 |       return sharedInstance;
 24 |     };
 25 | 
 26 |     function QuickfitHelper(options) {
 27 |       this.options = options;
 28 | 
 29 |       this.item = $('<span id="meassure"></span>');
 30 |       this.item.css({
 31 |         position: 'absolute',
 32 |         left: '-1000px',
 33 |         top: '-1000px',
 34 |         'font-size': "" + this.options.sampleFontSize + "px"
 35 |       });
 36 |       $('body').append(this.item);
 37 | 
 38 |       this.meassures = {};
 39 |     }
 40 | 
 41 |     QuickfitHelper.prototype.getMeassure = function (letter) {
 42 |       var currentMeassure;
 43 |       currentMeassure = this.meassures[letter];
 44 |       if (!currentMeassure) {
 45 |         currentMeassure = this.setMeassure(letter);
 46 |       }
 47 |       return currentMeassure;
 48 |     };
 49 | 
 50 |     QuickfitHelper.prototype.setMeassure = function (letter) {
 51 |       var currentMeassure, index, sampleLetter, text, _ref;
 52 | 
 53 |       text = '';
 54 |       sampleLetter = letter === ' ' ? '&nbsp;' : letter;
 55 | 
 56 |       for (index = 0, _ref = this.options.sampleNumberOfLetters - 1; 0 <= _ref ? index <= _ref : index >= _ref; 0 <= _ref ? index++ : index--) {
 57 |         text += sampleLetter;
 58 |       }
 59 | 
 60 |       this.item.html(text);
 61 |       currentMeassure = this.item.width() / this.options.sampleNumberOfLetters / this.options.sampleFontSize;
 62 |       this.meassures[letter] = currentMeassure;
 63 | 
 64 |       return currentMeassure;
 65 |     };
 66 | 
 67 |     return QuickfitHelper;
 68 | 
 69 |   })();
 70 | 
 71 |   Quickfit = (function () {
 72 | 
 73 |     function Quickfit(element, options) {
 74 |       this.$element = element;
 75 |       this.options = $.extend({}, defaults, options);
 76 |       this.$element = $(this.$element);
 77 |       this._defaults = defaults;
 78 |       this._name = pluginName;
 79 |       this.quickfitHelper = QuickfitHelper.instance(this.options);
 80 |     }
 81 | 
 82 |     Quickfit.prototype.fit = function () {
 83 |       var elementWidth;
 84 |       if (!this.options.width) {
 85 |         elementWidth = this.$element.width();
 86 |         this.options.width = elementWidth - this.options.tolerance * elementWidth;
 87 |       }
 88 |       if (this.text = this.$element.attr('data-quickfit')) {
 89 |         this.previouslyTruncated = true;
 90 |       } else {
 91 |         this.text = this.$element.text();
 92 |       }
 93 |       this.calculateFontSize();
 94 | 
 95 |       if (this.options.truncate) this.truncate();
 96 | 
 97 |       return {
 98 |         $element: this.$element,
 99 |         size: this.fontSize
100 |       };
101 |     };
102 | 
103 |     Quickfit.prototype.calculateFontSize = function () {
104 |       var letter, textWidth, i;
105 | 
106 |       textWidth = 0;
107 |       for (i = 0; i < this.text.length; ++i) {
108 |         letter = this.text.charAt(i);
109 |         textWidth += this.quickfitHelper.getMeassure(letter);
110 |       }
111 | 
112 |       this.targetFontSize = parseInt(this.options.width / textWidth);
113 |       return this.fontSize = Math.max(this.options.min, Math.min(this.options.max, this.targetFontSize));
114 |     };
115 | 
116 |     Quickfit.prototype.truncate = function () {
117 |       var index, lastLetter, letter, textToAdd, textWidth;
118 | 
119 |       if (this.fontSize > this.targetFontSize) {
120 |         textToAdd = '';
121 |         textWidth = 3 * this.quickfitHelper.getMeassure('.') * this.fontSize;
122 | 
123 |         index = 0;
124 |         while (textWidth < this.options.width && index < this.text.length) {
125 |           letter = this.text[index++];
126 |           if (lastLetter) textToAdd += lastLetter;
127 |           textWidth += this.fontSize * this.quickfitHelper.getMeassure(letter);
128 |           lastLetter = letter;
129 |         }
130 | 
131 |         if (textToAdd.length + 1 === this.text.length) {
132 |           textToAdd = this.text;
133 |         } else {
134 |           textToAdd += '...';
135 |         }
136 |         this.textWasTruncated = true;
137 | 
138 |         return this.$element.attr('data-quickfit', this.text).html(textToAdd);
139 | 
140 |       } else {
141 |         if (this.previouslyTruncated) {
142 |           return this.$element.html(this.text);
143 |         }
144 |       }
145 |     };
146 | 
147 |     return Quickfit;
148 | 
149 |   })();
150 | 
151 |   return $.fn.quickfit = function (options) {
152 |     var measurements = [];
153 | 
154 |     // Separate measurements from repaints
155 |     // First calculate all measurements...
156 |     var $elements = this.each(function () {
157 |       var measurement = new Quickfit(this, options).fit();
158 |       measurements.push(measurement);
159 |       return measurement.$element;
160 |     });
161 | 
162 |     // ... then apply the measurements.
163 |     for (var i = 0; i < measurements.length; i++) {
164 |       var measurement = measurements[i];
165 | 
166 |       measurement.$element.css({ fontSize: measurement.size + 'px' });
167 |     }
168 | 
169 |     return $elements;
170 |   };
171 | 
172 | })(jQuery, window);
173 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "jquery-quickfit",
 3 |   "version": "1.0.0",
 4 |   "description": "jquery-quickfit-plugin is a quick and dirty solution to auto-resize html text to fit it's surrounding container.",
 5 |   "repository": {
 6 |     "type": "git",
 7 |     "url": "git+https://github.com/chunksnbits/jquery-quickfit.git"
 8 |   },
 9 |   "keywords": [
10 |     "jquery",
11 |     "quickfit",
12 |     "responsive",
13 |     "autoresize",
14 |     "resize",
15 |     "css"
16 |   ],
17 |   "author": "Daniel Eissing",
18 |   "license": "ISC",
19 |   "bugs": {
20 |     "url": "https://github.com/chunksnbits/jquery-quickfit/issues"
21 |   },
22 |   "homepage": "https://github.com/chunksnbits/jquery-quickfit#readme"
23 | }
24 | 


--------------------------------------------------------------------------------