❤
npm
Sign UpSign In

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

1.4.4 • Public • Published

Fitext is a module which adapts the textual elements so that they are always contained in their parents without ever exceeding whatever the parent height and width. This lightweight library using no-one dependency. You can find a playable demo here.

Logo fitext

Table of contents

  1. Installation
  2. Getting Started
  3. Example
  4. Using a CDN
  5. Options
  6. Performance Checklist
  7. Contributors
  8. License

Installation

$ npm install --save fitext
$ yarn add fitext

Getting Started

HTML :

<body>
    <div class="fit-this-text">
        <h1>Resize your window</h1>
        <h2>Play with responsive 💡</h2>
        <p>Insert a huge lorem ipsum text !</p>
    </div>
</body>

ES6 Modules :

import fitext from 'fitext'
 
fitext(true);

No-module :

<script src='dist/fitext.min.js' defer></script>
<script>
    window.addEventListener('DOMContentLoaded', function() {
        fitext(true);
    });
</script> 

Example

import fitext from 'fitext'
 
 
const EVENTS = ['DOMContentLoaded', 'resize']
 
EVENTS.forEach( e => window.addEventListener( e, fitext ) )
//OR
EVENTS.forEach( e => window.addEventListener( e, () => fitext(true, .25) ) )

In the previous example, we listen to all event that can makes overflow texts from their containers, we prevent all break cases by executing the fitext function.

Using a CDN

  • Minified version :

    • https://cdn.jsdelivr.net/npm/fitext@latest/dist/fitext.umd.js
    • https://cdn.jsdelivr.net/npm/fitext@latest/dist/fitext.cjs.js
    • https://cdn.jsdelivr.net/npm/fitext@latest/dist/fitext.esm.js

  • Original version :

    • https://cdn.jsdelivr.net/npm/fitext@latest/src/fitext.js

  • For specific files or enhanced configuration you can go here.

Options

You can pass options in fitext. Allowed values are as follows :

Name Type Default Description
wideable { Boolean } false Enables the font-size enlarger. More
stagger { Float } 1 Change stagger value. More

- wideable :

This option enlarges the font size above the font size established before executing the `fitext` function.
The default behavior of this options limits the font-size to the font-size established before the function execution.

- stagger :

This option increments or decrements the current font-size by the number of pixels desired.
The smaller the value, the beautiful the change but may cause performance issues.

Performance Checklist

Good to know : Fitext is a very lightweight module : Less than 1 kB !

To increase fitext performances :

  • Try to use relative font-size wherever possible.
  • If you targeting a parent element all child are already taken in account, don't execute a fitext function on them.
  • Try to avoid get too much containers into the fittable elements.
  • Don't use a CSS font-size transition, prefer stagger option usage.

Contributors

Pierre Darrieutort
Pierre Darrieutort
Core 		Jape Photography
Jape
Branding 		Mathieu Daix
Mathieu Daix
Design 		Abhishek Shende
Abhishek Shende
Klap Integration

License

This project is under ISC License.

Readme

Keywords

Package Sidebar

Install

npm i fitext

Repository

github.com/pierredarrieutort/fitext

Homepage

github.com/pierredarrieutort/fitext#readme

Weekly Downloads

8

Version

1.4.4

License

ISC

Unpacked Size

12.1 kB

Total Files

8

Last publish

Collaborators

  • pedrozorus
Try on RunKit
Report malware