Fragment Fit Text
Fragment Fit Text is a small utility that makes a text fit in a container. Using Font Face Observer we are able to wait until the font is loaded to calculate the correct size.
You can also define if the text should fit in one line, and the min and max size of the text.
How to use
Import the file fragmentFitText.js
or fragmentFitText.min.js
. Using CSS, define the properties of the container element. Then, create an instance of the FitText
object.
var fragmentFitText = new FitText()
If you want to auto-add elements to Fit Text, you can pass a selector to the FitText object, for example:
var fragmentFitText = new FitText('[fit-text]')
Otherwise, to add elements you’ll have to use the add
method:
fragmentFitText.add('.text3', 'default', 10, 20, 1);
where the first parameter is the selector for the element, the second defines the type of content fit, the third the min size, the fourth the max size and the fifth line height.
Keep in mind that the element attributes type, min-size=“X”, max-size=“Y” and line-height="Z" will override these parameteres.
Types
- default will make the content fit within the width and height limits
- oneline-width will make the content fit within the width of the element, always using one line
- oneline-height will make the content fit within the width of the element, always using one line
Finally, you have to call the run
method of the object. You can pass a string
or an array
with the names of the fonts that need to be loaded before executing the code.
The second argument for the run function is a callback.
fragmentFitText.run(['Permanent Marker', 'Pacifico'], () => {})
Installation
If you're using npm you can install Font Face Observer as a dependency:
$ npm install fragment-fit-text
If you're not using npm, grab fragmentFitText.js
or fragmentFitText.min.js
and include it in your project.
License
Fragment Fit Text is licensed under the MIT License. Developed by Fragment Agency in 2018