DOCSEARCHbyAlgolia
Submit Docs

fitty

repository·gh-pages·Indexed 26 days ago

https://github.com/rikschennink/fitty

A JavaScript library (version 2.4.2) that snugly resizes text to fit its parent container. It provides options for minSize, maxSize, multiLine wrapping, and mutation observation, along with instance methods like fit(), freeze(), unfreeze(), and unsubscribe() to control the resizing behavior.

Tokens
631
Snippets
4
Records
5
Agent score
37%

What's inside fitty

  2. Use Fitty to scale text

    gh-pages

    To use Fitty, pass an element reference or a query selector to the fitty function. For optimal performance, include the script just before the closing </body> element.

    If you pass a query selector, it returns an array of Fitty instances. If you pass a single element reference, it returns a single Fitty instance.

    <div id="my-element">Hello World</div>

<script src="fitty.min.js"></script>
<script>
    fitty('#my-element');
</script>

  3. Configure Fitty options

    gh-pages

    The fitty method accepts an options object to customize behavior:

    OptionDefaultDescription
    minSize16The minimum font size in pixels
    maxSize512The maximum font size in pixels
    multiLinetrueWrap lines when using minimum font size
    observeMutationsMutationObserverInitRescale when element contents is altered. Defaults to { subtree: true, childList: true, characterData: true } if supported.

    Example usage:

    fitty('#my-element', {
    minSize: 12,
    maxSize: 300,
});

  4. Fitty Instance Methods and Properties

    gh-pages

    Each Fitty instance provides methods to control resizing and properties to access the underlying element.

    Methods:

    • fit(options): Force a redraw of the current fitty element. Use { sync: true } for a synchronous refit.
    • freeze(): Stop updating this fitty on changes.
    • unfreeze(): Resume updates to this fitty.
    • unsubscribe(): Remove the fitty element from the redraw loop and restore it to its original state.

    Properties:

    • element: Reference to the related DOM element.

    Example:

    var fitties = fitty('.fit');

// get element reference of first fitty
var myFittyElement = fitties[0].element;

// force refit
fitties[0].fit();

// force synchronous refit
fitties[0].fit({ sync: true });

// stop updating this fitty and restore to original state
fitties[0].unsubscribe();