Fitter, happier text. Apply text styles based on the shape of the text. Useful to apply styles based on a design system.
const textFit = require('text-fit')
const vdom = require('virtual-dom')
const hyperx = require('hyperx')
const hx = hyperx(vdom.h)
const text = 'The quick brown fox jumped over the lazy dog'
const styles = textFit(text, {
scale: [
{ 'font-size': 24 },
{ 'font-size': 32, max: 30 },
{ 'font-size': 48, max: 15 }
]
})
const tree = hx`
<h1 styles=${styles}>${text}</h1>
`
document.body.appendChild(vdom.create(tree))
Take a string, analyze the length, and determine the font size based on a scale. Takes the following options:
- opts.scale: pass in a scale of values to be set. Determines based on
.max
if the values should be applied on the text.
$ npm install text-fit