Small JavaScript Library For Text Auto Resizing – textFit

Category: Javascript , Text | June 18, 2019
Author: STRML
Views Total: 2,534
Official Page: Go to website
Last Update: June 18, 2019
License: MIT

Preview:

Small JavaScript Library For Text Auto Resizing – textFit

Description:

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

Basic usage:

Load the textFit.js in your document.

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

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>

Enable the text auto resizing

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

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:

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

You Might Be Interested In:


Leave a Reply