├── .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 |
Text to fit*
40 | ``` 41 | 42 | Javascript: 43 | 44 | ```javascript 45 | 53 | ``` 54 | * in order to work correctly, this line should be styled with the white-space:nowrap option 55 | 56 | Options 57 | ======= 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 |
NameTypeDefaultDescription
mininteger 72 | 8 73 | The minimum font-size the element can be sized to
maxinteger12The maximum font-size the element can be sized to
truncatebooleanfalseFlag, whether the text should be truncated (shortened with an appended '...') if it doesn't fit with the minimum size.
tolerancefloat0.02Adds 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.
widthintnullYou can default quickfit a size to which the text should be fitted to. Handy when fitting a lot of elements with an equal width.
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 | 2 | 3 | 4 | Quickfit Demo 5 | 6 | 7 | 8 | 17 | 18 | 19 | 20 |
21 | Min: 60, Max: 100 without truncate option 22 |
23 | 24 |
25 | Min: 60, Max: 100 with truncate option 26 |
27 | 28 | 29 | 39 | -------------------------------------------------------------------------------- /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 = $(''); 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 === ' ' ? ' ' : 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 | --------------------------------------------------------------------------------