Small JavaScript Library For Text Auto Resizing – textFit

Preview:

Description:

textFit is a standalone JavaScript library that automatically and dynamically scales the text to fit inside a fixed-width container. Supports both single or multi-line text.

Basic usage:

1. Load the textFit.js in your document.

<script src="textFit.js"></script>

2. It will make the *text* content inside a container scale to fit the container. The container is required to have a set width and height.

<div class="box" style="width:300px;height:300px">
  Text Here
</div>

3. Enable the text auto resizing

textFit(document.getElementsByClassName('box'));

4. Available options.

textFit(document.getElementsByClassName('box'), {
  // align vertically using css tables
  alignVert: false,
  // set text-align: center
  alignHoriz: false, 
  // not set white-space: no-wrap
  multiLine: false, 
  // disable to turn off automatic multi-line sensing
  detectMultiLine: true, 
  // Min / Max font size
  minFontSize: 6,
  maxFontSize: 80,
  // Re-process already-fit nodes. 
  // Set to 'false' for better performance
  reProcess: true, 
  // Fit text to element width, regardless of text height
  widthOnly: false,
   // if true, textFit will use flexbox for vertical alignment
  alignVertWithFlexbox: false
})

Changelog:

10/18/2022

• v2.4.0

06/18/2019

• Fixes text never having an odd size

07/30/2018

• properly iterate over HTMLCollection objects.
• added alignVertWithFlexbox. This does better vertical alignment