Performant, fully fluid headings
HTML JavaScript
Latest commit 56e7d63 Mar 1, 2016 @jxnblk 0.0.7
Permalink
Failed to load latest commit information.
dist Rebuild Feb 29, 2016
.gitignore Adds a .gitignore file Jun 22, 2015
README.md Adjust readme Sep 23, 2014
gulpfile.js Basic Firefox support Sep 16, 2014
index.html Adds font stack to improve #18 Jun 22, 2015
index.js Adds support for getBoundingClientRect Feb 6, 2016
package.json 0.0.7 Feb 29, 2016

README.md

Fitter Happier Text

Performant, fully fluid headings


Usage

Include dist/fitter-happier-text.js in your project or install from NPM:

npm install fitter-happier-text

(or download it https://github.com/jxnblk/fitter-happier-text/archive/0.0.1.zip)

Pass it a nodelist.

var nodes = document.querySelectorAll('[data-fitter-happier-text]');
fitterHappierText(nodes);

Fitter Happier Text replaces each node with an SVG text node and sets the viewBox attribute based on its width and height.

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.

fitterHappierText(nodes, { baseline: 14, paddingY: 2 });

Browser support:

http://caniuse.com/#feat=svg

Please note: I do not plan on adding any SVG polyfills to handle old browsers.


MIT License