🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more
Socket
Book a DemoInstallSign in
Socket

fancy-textfill

Package Overview
Dependencies
Maintainers
1
Versions
9
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

fancy-textfill

Fast implementation for resizing text to fill its container.

1.2.5
latest
Source
npm
Version published
Weekly downloads
85
-51.7%
Maintainers
1
Weekly downloads
 
Created
Source

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

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

NameDescriptionDefault value
minFontSizeMinimal font size (in pixels). The text will shrink up to this value.4
maxFontSizeMaximum 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
maxWidthExplicit width to resize. Defaults to the container's width.null
maxHeightExplicit height to resize. Defaults to the container's height.null
multilineWill only resize to the width restraint when set to falsetrue
explicitLineHeightWhen set to false, line-heights are assumed to be relative to the current font-sizefalse

How does it compare to...

  • jquery-textfill

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:dev
npm run test

License

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

FAQs

Package last updated on 20 Aug 2018

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts