fancy-textfill's Introduction

fancy-textfill

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-height`s are assumed to be relative to the current `font-size`	`false`

How does it compare to...

jquery-textfill

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

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.

fancy-textfill's People

Contributors

Stargazers

Watchers

fancy-textfill's Issues

How to import as ES6 module

Hi can you help me import this module as ES6? I'm using Vue.js. ie:

import fancyTextFill from 'fancy-textfill'

Thanks

Downloading fancy-text-fill.js file

Where can I find the fancy-text-fill.js file to download directly without using npm?

Thanks!

require("jquery")

Hello,

you require jQuery with

require("jQuery");

instead of

require("jquery");

and so automatic, recursive resolving doesn't work, because the official jquery package is "jquery" and not "jQuery", which is outdated.

Cheers
Tom

Text falls out of container

The entire purpose of this library is to keep the text inside the container, yet it falls outside of the container in the example.

This happens because the font size is rounded to the nearest whole number, I suggest rounding it down before setting it.

Recommend Projects

fazouane-marouane / fancy-textfill Goto Github PK