FancyTextFill
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 --><!-- Or you can use it without jquery, by using https://unpkg.com/fancy-textfill/dist/fancy-text-fill.js --><!-- Example setup --> 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.
// Without jquerydocument ;// With jquery;
You can also use it as a module. You can import it like so:
// Without jquery;// Or const { fillParentContainer } = require('fancy-textfill');;
// as a jquery plugin;// Or require('fancy-textfill/es2015/jquery.plugin');;
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...
Performance! fancy-TextFill implements the same features while being way faster than the original jquery plugin.
BigText doesn't support multiple lines.
Unit tests
# Run chrome driver chromedriver --port=4444 --url-base=wd/hub# In another console npm run build:devnpm run test
License
This code is licensed under the MIT License. See file LICENSE for more details.