fitext

v1.4.4

Published

3 years ago

Resizes text elements proportionally to fit any element

Downloads

0High
0Medium
0Low

pedrozorus

fit text javascript html css resize adapt responsive textfit fittext

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.

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

License

This project is under ISC License.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

Table of contents