Skip to content

Apply text styles based on the shape of the text

License

Notifications You must be signed in to change notification settings

stackcss/text-fit

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

text-fit stability

npm version build status test coverage downloads js-standard-style

Fitter, happier text. Apply text styles based on the shape of the text. Useful to apply styles based on a design system.

Usage

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))

API

textFit(text, opts)

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.

Installation

$ npm install text-fit

License

MIT

About

Apply text styles based on the shape of the text

Resources

License

Stars

Watchers

Forks

Packages

No packages published