fancy-textfill

Fast implementation for resizing text to fill its container.

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
fancy-textfill
1.2.54 years ago6 years agoMinified + gzip package size for fancy-textfill in KB

Readme

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. :metal: Demo

Install

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

Example

```html
Hello darkness, my old friend.
I've come to talk with you again.
``` You can either use it on bare dom elements or on jquery objects. ```js // 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: ```js // Without jquery import { fillParentContainer } from 'fancy-textfill'; // Or const { fillParentContainer } = require('fancy-textfill'); fillParentContainer(el, { minFontSize: 6, maxFontSize: 26 }); ``` ```js // 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

```bash
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.