├── .gitignore ├── README.md ├── dist └── fitter-happier-text.js ├── gulpfile.js ├── index.html ├── index.js └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | *.log* 3 | node_modules/ 4 | bower_components/ 5 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Fitter Happier Text 2 | 3 | Performant, fully fluid headings 4 | 5 | --- 6 | 7 | # Usage 8 | 9 | Include `dist/fitter-happier-text.js` in your project or install from NPM: 10 | 11 | ``` 12 | npm install fitter-happier-text 13 | ``` 14 | 15 | (or download it https://github.com/jxnblk/fitter-happier-text/archive/0.0.1.zip) 16 | 17 | Pass it a nodelist. 18 | 19 | ```js 20 | var nodes = document.querySelectorAll('[data-fitter-happier-text]'); 21 | fitterHappierText(nodes); 22 | ``` 23 | 24 | Fitter Happier Text replaces each node with an SVG text node and sets the `viewBox` attribute based on its width and height. 25 | 26 | To adjust for different fonts, use the `baseline` and `paddingY` options. `paddingY` can be set to a negative value to reduce the height of the SVG container. 27 | 28 | ```js 29 | fitterHappierText(nodes, { baseline: 14, paddingY: 2 }); 30 | ``` 31 | 32 | 40 | 41 | --- 42 | 43 | ### Browser support: 44 | 45 | http://caniuse.com/#feat=svg 46 | 47 | Please note: I do not plan on adding any SVG polyfills to handle old browsers. 48 | 49 | --- 50 | 51 | MIT License 52 | 53 | -------------------------------------------------------------------------------- /dist/fitter-happier-text.js: -------------------------------------------------------------------------------- 1 | !function(t){if("object"==typeof exports)module.exports=t();else if("function"==typeof define&&define.amd)define(t);else{var e;"undefined"!=typeof window?e=window:"undefined"!=typeof global?e=global:"undefined"!=typeof self&&(e=self),e.fitterHappierText=t()}}(function(){return function t(e,i,r){function n(u,f){if(!i[u]){if(!e[u]){var s="function"==typeof require&&require;if(!f&&s)return s(u,!0);if(o)return o(u,!0);throw new Error("Cannot find module '"+u+"'")}var d=i[u]={exports:{}};e[u][0].call(d.exports,function(t){var i=e[u][1][t];return n(i?i:t)},d,d.exports,t,e,i,r)}return i[u].exports}for(var o="function"==typeof require&&require,u=0;u 2 | 3 | 4 | 5 | Fitter Happier Text 6 | 7 | 93 | 94 | 95 | 96 |
97 |
Fitter Happier Text
98 |

99 | Performant, fully fluid headings 100 |
101 | View on Github 102 |

103 |
104 | 105 |
106 |
107 | 108 | 109 | 110 |
111 |
112 | 113 |
114 |
115 | 116 | 117 |
118 |
Fitter, happier, more productive
119 |
Comfortable
120 |
Not drinking too much
121 |
Regular exercise at the gym
122 |
(Three days a week)
123 |
Getting on better with your associate employee contemporaries
124 |
At ease
125 |
Eating well
126 |
(No more microwave dinners and saturated fats)
127 |
A patient better driver
128 |
A safer car
129 |
(Baby smiling in back seat)
130 |
Sleeping well
131 |
(No bad dreams)
132 |
No paranoia
133 |
Careful to all animals
134 |
(Never washing spiders down the plughole)
135 |
Keep in contact with old friends
136 |
(Enjoy a drink now and then)
137 |
Will frequently check credit at (moral) bank (hole in the wall)
138 |
Favors for favors
139 |
Fond but not in love
140 |
Charity standing orders
141 |
On Sundays ring road supermarket
142 |
(No killing moths or putting boiling water on the ants)
143 |
Car wash
144 |
(Also on Sundays)
145 |
No longer afraid of the dark or midday shadows
146 |
Nothing so ridiculously teenage and desperate
147 |
Nothing so childish, at a better pace
148 |
Slower and more calculated
149 |
No chance of escape
150 |
Now self-employed
151 |
Concerned (but powerless)
152 |
An empowered and informed member of society
153 |
(Pragmatism not idealism)
154 |
Will not cry in public
155 |
Less chance of illness
156 |
Tires that grip in the wet
157 |
(Shot of baby strapped in back seat)
158 |
A good memory
159 |
Still cries at a good film
160 |
Still kisses with saliva
161 |
No longer empty and frantic like a cat tied to a stick
162 |
That's driven into frozen winter shit
163 |
(The ability to laugh at weakness)
164 |
Calm
165 |
Fitter
166 |
Healthier and more productive
167 |
A pig in a cage on antibiotics
168 |
169 | 170 |
171 |

Usage

172 |

173 | Download source 174 | or install via NPM: 175 |

176 | 
177 | npm install fitter-happier-text
178 |
179 |

180 | Link to fitter-happier-text and pass it a nodelist. 181 |

182 | 
183 | var nodes = document.querySelectorAll('[data-fitter-happier-text]');
184 | fitterHappierText(nodes);
185 |
186 |

187 | Since this is based on the SVG text element, no JavaScript resize events are fired – 188 | JavaScript is only used on initial load. 189 | 192 |

193 |

View on Github

194 |
195 | 196 | 211 | 212 | 213 | 214 | 218 | 230 | 231 | 232 | 233 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | 2 | module.exports = function(elements, options) { 3 | 4 | /* Assign function arguments to variables. The elements variable references the text 5 | to be bound to the page. Options is an optional argument that takes the form of an object with a 6 | baseline and/or a paddingY */ 7 | var options = options || {}; 8 | var baseline = options.baseline || 16; 9 | var paddingY = options.paddingY || 0; 10 | var doc = options.doc || document; 11 | var bounding = typeof doc.createElementNS('http://www.w3.org/2000/svg', 'svg').getBoundingClientRect === 'function'; 12 | 13 | for (var i = 0; i < elements.length; i++) { 14 | 15 | // variable declarations 16 | var content = elements[i].textContent; 17 | var svg = doc.createElementNS('http://www.w3.org/2000/svg', 'svg'); 18 | var text = doc.createElementNS('http://www.w3.org/2000/svg', 'text'); 19 | var rect; 20 | 21 | // assign proper styles and positioning to text elements 22 | text.textContent = content; 23 | text.setAttribute('x', '50%'); 24 | text.setAttribute('y', baseline); 25 | text.setAttribute('font-family', 'inherit'); 26 | text.setAttribute('font-size', '1rem'); 27 | text.setAttribute('font-weight', 'inherit'); 28 | text.setAttribute('style', 'text-anchor:middle'); 29 | 30 | for (var j = 0; j < elements[i].attributes.length; j++) { 31 | svg.setAttribute(elements[i].attributes[j].name, elements[i].attributes[j].value); 32 | } 33 | 34 | // set proper size, style, and fill for svg element 35 | svg.setAttribute('width', '100%'); 36 | svg.setAttribute('style', 'max-height:100%'); 37 | svg.setAttribute('fill', 'currentcolor'); 38 | svg.setAttribute('overflow', 'visible'); 39 | 40 | // append text element to page 41 | svg.appendChild(text); 42 | elements[i].parentNode.replaceChild(svg, elements[i]); 43 | 44 | rect = bounding ? text.getBoundingClientRect() : {}; 45 | rect.width = rect.width || text.offsetWidth || text.getComputedTextLength(); 46 | rect.height = rect.height || text.offsetHeight || 24; 47 | 48 | svg.setAttribute('viewBox', '0 0 ' + Math.round(rect.width) + ' ' + (Math.round(rect.height) + paddingY)); 49 | 50 | } 51 | 52 | }; 53 | 54 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "fitter-happier-text", 3 | "version": "0.0.7", 4 | "description": "Fit text to the width of its container", 5 | "main": "index.js", 6 | "homepage": "http://jxnblk.github.com/fitter-happier-text", 7 | "repository": { 8 | "type": "git", 9 | "url": "https://github.com/jxnblk/fitter-happier-text.git" 10 | }, 11 | "bugs": { 12 | "url": "https://github.com/jxnblk/fitter-happier-text/issues" 13 | }, 14 | "author": "Brent Jackson", 15 | "license": "MIT", 16 | "scripts": { 17 | "start": "gulp compile" 18 | }, 19 | "devDependencies": { 20 | "gulp": "^3.8.8", 21 | "gulp-browserify": "^0.5.0", 22 | "gulp-rename": "^1.2.0", 23 | "gulp-uglify": "^1.0.1", 24 | "gulp-cheerio": "^0.3.2", 25 | "gulp-dom": "^0.1.0" 26 | } 27 | } 28 | --------------------------------------------------------------------------------