https://github.com/jxnblk/fitter-happier-text

Performant, fully fluid headings
https://github.com/jxnblk/fitter-happier-text

Last synced: 25 days ago
JSON representation

Performant, fully fluid headings

• Host: GitHub
• URL: https://github.com/jxnblk/fitter-happier-text
• Owner: jxnblk
• Created: 2014-09-15T22:16:49.000Z (about 10 years ago)
• Default Branch: master
• Last Pushed: 2018-08-25T23:11:27.000Z (about 6 years ago)
• Last Synced: 2024-05-22T19:31:44.789Z (6 months ago)
• Language: HTML
• Homepage: http://jxnblk.com/fitter-happier-text/
• Size: 82 KB
• Stars: 1,285
• Watchers: 30
• Forks: 54
• Open Issues: 14
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 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.

```js

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.

```js

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