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