├── .gitignore ├── example ├── requireExample.js └── index.html ├── package.json ├── README.md └── fittext.js /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | .project 3 | node_modules 4 | example/example.js 5 | -------------------------------------------------------------------------------- /example/requireExample.js: -------------------------------------------------------------------------------- 1 | // When using this as an npm dependency, require("FitText-UMD") 2 | var fitText = require("../fittext"); 3 | 4 | fitText(document.getElementById("fittext"), 1.2); 5 | 6 | // document.getElementById("headerslider").oninput = function(ev, p) { 7 | // var val = +this.value; 8 | // document.getElementById("fittext").style.width = val + "%"; 9 | // // Initial release can only listen for window resize events, not element resize. 10 | // fitText(document.getElementById("fittext"), 1.2); 11 | // }; 12 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "FitText-UMD", 3 | "version": "1.0.0", 4 | "author": "Peace Chen", 5 | "contributors": ["Dave Rupert (https://github.com/davatron5000)", "Jeremy Keith (https://github.com/adactio)"], 6 | "license": "WTFPL", 7 | "description": "FitText dynamically sizes text to fit the container (UMD version)", 8 | "keywords": [ "FitText", "FitText.js", "FitText-UMD", "font", "size", "dynamic", "responsive", "UMD"], 9 | "repository": { 10 | "type": "git", 11 | "url": "git://github.com/peacechen/FitText-UMD" 12 | }, 13 | "bugs": "https://github.com/peacechen/FitText-UMD/issues", 14 | "main": "fittext.js", 15 | "scripts": { 16 | "example": "npm run build-example && npm run serve", 17 | "build-example": "node node_modules/browserify/bin/cmd.js example/requireExample.js -d > example/example.js", 18 | "serve": "node node_modules/serve/bin/serve example/ -p 8080" 19 | }, 20 | "browserify": { 21 | "transform": [ 22 | "babelify" 23 | ] 24 | }, 25 | "devDependencies": { 26 | "babel-preset-es2015": "^6.0.15", 27 | "babelify": "^7.2.0", 28 | "browserify": "^12.0.1", 29 | "serve": "^1.4.0" 30 | }, 31 | "dependencies": { 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /example/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | FitText Example 6 | 7 | 43 | 44 | 45 | 46 | 47 |

48 |

49 |

50 |

Squeeze with FitText

51 |

52 | Resize the window to dynamically scale the font size. 53 | 54 | 55 |

56 |

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.

57 |

58 | 59 | 60 | 61 | 62 | 63 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # FitText-UMD, a standalone library for inflating web type 2 | FitText makes font sizing flexible. Use this library on your fluid or responsive layout to achieve scalable headlines that fill the width of a parent element. 3 | 4 | Now supporting [UMD](https://github.com/umdjs/umd), and of course no jQuery requirement. 5 | 6 | ## How to use 7 | FitText-UMD supports UMD and may be loaded as a module. In this example, "responsive_headline" is the id of an element that we want the text to dynamically size to. 8 | ```javascript 9 | var fitText = require("FitText-UMD"); 10 | fitText( document.getElementById("responsive_headline") ); 11 | ``` 12 | FitText-UMD may optionally be loaded globally in the HEAD, making it accessible via the window object. 13 | 14 | ## See it in action 15 | npm install 16 | npm run example 17 | 18 | Open http://localhost:8080 in the browser. 19 | 20 | ### The Compressor 21 | The default setting works pretty well, but when it doesn't FitText has one setting you can adjust. If your text resizes poorly or is resizing all hurdy gurdy, you'll want to turn tweak up/down the compressor. It works a little like a guitar amp. 22 | ```javascript 23 | fitText( document.getElementById("responsive_headline"), 1.2 ); // turn the compressor up (font will shrink a bit more aggressively) 24 | fitText( document.getElementById("responsive_headline"), 0.8 ); // turn the compressor down (font will shrink less aggressively) 25 | ``` 26 | This will hopefully give you a level of "control" that might not be pixel perfect, but scales smoothly & nicely. 27 | 28 | ### To Do 29 | With the removal of jQuery, element resize events are no longer available. jQuery uses an inefficient polling method to detect element resizing so a better solution is needed anyway. One potential candidate: 30 | https://github.com/marcj/css-element-queries 31 | 32 | ### Thanks 33 | Thanks to adactio for eliminating the need for jQuery: https://github.com/adactio/FitText.js 34 | Thanks to Trent, Dave and Reagan for original FitText.js: https://github.com/davatron5000/FitText.js 35 | http://fittextjs.com/ 36 | -------------------------------------------------------------------------------- /fittext.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * FitText-UMD 3 | * 4 | * Copyright 2011, Dave Rupert http://daverupert.com 5 | * Released under the WTFPL license 6 | * http://sam.zoy.org/wtfpl/ 7 | * Modified by Slawomir Kolodziej http://slawekk.info 8 | * Modified by Peace Chen to support modules 9 | * 10 | * Date: Tue Jan 12 2016 10:03:36 GMT-0600 (CST) 11 | */ 12 | 13 | (function(root, factory) { 14 | if (typeof define === 'function' && define.amd) { 15 | // AMD. Register as an anonymous module. 16 | define([], factory); 17 | } else if (typeof module === 'object' && module.exports) { 18 | // Node. Does not work with strict CommonJS, but 19 | // only CommonJS-like environments that support module.exports, 20 | // like Node. 21 | module.exports = factory(); 22 | } else { 23 | // Browser globals (root is window) 24 | root.fitText = factory(); 25 | } 26 | }(this, function() { 27 | 28 | var css = function(el, prop) { 29 | return getComputedStyle ? getComputedStyle(el).getPropertyValue(prop) : el.currentStyle[prop]; 30 | }; 31 | 32 | var addEvent = function(el, type, fn) { 33 | if (el.addEventListener) 34 | el.addEventListener(type, fn, false); 35 | else 36 | el.attachEvent('on' + type, fn); 37 | }; 38 | 39 | var extend = function(obj, ext) { 40 | for (var key in ext) 41 | if (ext.hasOwnProperty(key)) 42 | obj[key] = ext[key]; 43 | return obj; 44 | }; 45 | 46 | var fitText = function(el, kompressor, options) { 47 | 48 | var settings = extend({ 49 | 'minFontSize': -1 / 0, 50 | 'maxFontSize': 1 / 0 51 | }, options); 52 | 53 | var fit = function(el) { 54 | var compressor = kompressor || 1; 55 | 56 | var resizer = function() { 57 | el.style.fontSize = Math.max(Math.min(el.clientWidth / (compressor * 10), parseFloat(settings.maxFontSize)), parseFloat(settings.minFontSize)) + 'px'; 58 | }; 59 | 60 | // Call once to set. 61 | resizer(); 62 | 63 | // Bind events 64 | // If you have any js library which support Events, replace this part 65 | // and remove addEvent function (or use original jQuery version) 66 | // Candidate: http://marcj.github.io/css-element-queries/ 67 | addEvent(window, 'resize', resizer); 68 | }; 69 | 70 | if (el.length) 71 | for (var i = 0; i < el.length; i++) 72 | fit(el[i]); 73 | else 74 | fit(el); 75 | 76 | // return set of elements 77 | return el; 78 | }; 79 | 80 | return fitText; 81 | })); 82 | --------------------------------------------------------------------------------