Skip to content
Fast implementation for resizing text to fill its container.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src Prevent invisible element from occupying any space Aug 20, 2018
test fix issues with explicit line-heights Feb 15, 2017
.editorconfig
.gitattributes
.gitignore Publish the lib also as a es2015 module Oct 29, 2017
.npmignore fix packaging Feb 12, 2017
CHANGELOG.md release 1.2.5 Aug 20, 2018
LICENSE sample lib Jan 11, 2017
README.md Publish the lib also as a es2015 module Oct 29, 2017
appveyor.yml Update npm token Aug 20, 2018
neutrino.override.js fix the bundling Oct 29, 2017
package.json release 1.2.5 Aug 20, 2018
tsconfig.json fix the bundling Oct 29, 2017
yarn.lock fix the bundling Oct 29, 2017

README.md

FancyTextFill

npm license

Fast implementation for resizing text to fill its container. It computes the optimal font-size needed to match a text to specific width and height. It's also available as a jquery plugin.

It's really fast. See for yourself. 🤘 Demo

Install

npm install --save fancy-textfill
# or you can use yarn (yarn add fancy-textfill)

Example

<!-- In case you're using it as a jquery plugin -->
<script src="jquery.min.js"></script>
<script src="https://unpkg.com/fancy-textfill/dist/fancy-text-fill.jQuery.js"></script>
<!-- Or you can use it without jquery, by using https://unpkg.com/fancy-textfill/dist/fancy-text-fill.js -->
<!-- Example setup -->
<style>
  .container {
    width: 200px;
    height: 50px;
  }
  .myText {
    display: block;
  }
</style>
<div class="container">
  <span class="myText">Hello darkness, my old friend.</span>
</div>
<div class="container">
  <span class="myText">I've come to talk with you again.</span>
</div>

You can either use it on bare dom elements or on jquery objects.

// Without jquery
document.getElementsByClassName('myText')
  .forEach(function (el) {
    fancyTextFill.fillParentContainer(el, {
      minFontSize: 6,
      maxFontSize: 26
    });
  });
// With jquery
$('.myText').fancyTextFill({
  minFontSize: 6,
  maxFontSize: 26
});

You can also use it as a module. You can import it like so:

// Without jquery
import { fillParentContainer } from 'fancy-textfill';
// Or const { fillParentContainer } = require('fancy-textfill');
fillParentContainer(el, {
  minFontSize: 6,
  maxFontSize: 26
});
// as a jquery plugin
import 'fancy-textfill/es2015/jquery.plugin';
// Or require('fancy-textfill/es2015/jquery.plugin');
$('.myText').fancyTextFill({
 minFontSize: 6,
 maxFontSize: 26
});

Options

Name Description Default value
minFontSize Minimal font size (in pixels). The text will shrink up to this value. 4
maxFontSize Maximum font size (in pixels). The text will stretch up to this value. If it is null or a negative number (maxFontSize <= 0), the text will stretch to as big as the container can accommodate. 40
maxWidth Explicit width to resize. Defaults to the container's width. null
maxHeight Explicit height to resize. Defaults to the container's height. null
multiline Will only resize to the width restraint when set to false true
explicitLineHeight When set to false, line-heights are assumed to be relative to the current font-size false

How does it compare to...

  1. jquery-textfill

Performance! fancy-TextFill implements the same features while being way faster than the original jquery plugin.

  1. BigText

BigText doesn't support multiple lines.

Unit tests

# Run chrome driver
chromedriver --port=4444 --url-base=wd/hub
# In another console
npm run build:dev
npm run test

License

This code is licensed under the MIT License. See file LICENSE for more details.

You can’t perform that action at this time.