├── .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 |
46 |
47 |
48 |
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 | Name |
63 | Type |
64 | Default |
65 | Description |
66 |
67 |
68 |
69 |
70 | min |
71 | integer
72 | | 8
73 | | The minimum font-size the element can be sized to |
74 |
75 |
76 | max |
77 | integer |
78 | 12 |
79 | The maximum font-size the element can be sized to |
80 |
81 |
82 | truncate |
83 | boolean |
84 | false |
85 | Flag, whether the text should be truncated (shortened with an appended '...') if it doesn't fit with the minimum size. |
86 |
87 |
88 | tolerance |
89 | float |
90 | 0.02 |
91 | 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. |
92 |
93 |
94 | width |
95 | int |
96 | null |
97 | 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. |
98 |
99 |
100 |
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 |
--------------------------------------------------------------------------------