Never-ending Pumpkin Mulch

    fancy-textfill
    TypeScript icon, indicating that this package has built-in type declarations

    1.2.5 • Public • Published

    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.

    Keywords

    none

    Install

    npm i fancy-textfill

    DownloadsWeekly Downloads

    692

    Version

    1.2.5

    License

    MIT

    Unpacked Size

    39.1 kB

    Total Files

    33

    Last publish

    Collaborators

    • fazouane-marouane