fillFont.js

fillFont.js

/**
 * fillFont.js
 * Copyright © 2016 Alex Brombal
 *
 * Resizes an element's font size to fill its parent container.
 *
 * Usage:
 *
 * 1. Include this file on your page, after jQuery.
 *
 * 2. Place your text inside an inline or inline-block element and add a "data-fill-font" attribute to it
 *    (e.g. <span data-fill-font>).
 *
 * 3. Place the inline element inside any element that has a well-defined width (it does not need to be a specific
 *    pixel-width; i.e., it can be based on the viewport).
 *
 * 4. Add the following code, anywhere in the DOM after the text element:
 *      <script>
 *          FillFont.init();
 *      </script>
 *
 *    This code does not need to be within $.ready, but you may call it at any time to initialze text elements.
 *
 *    You may pass in a css selector or element that specifies the parent containing any data-fill-font elements.
 *    (The default uses 'body' to search the whole document).
 *
 *
 * Example:
 *
 * <script src="/path/to/fillFont.js"></script>
 *
 * <div style="width: 400px">
 *     <span data-fill-font>Lorem ipsum dolor</span>
 *     <span data-fill-font>sit amet</span>
 * </div>
 *
 * <script>
 *     FillFont.init();
 * </script>
 */
var FillFont = {

    _interval: null,

    init: function(el) {
        var $el = $('[data-fill-font]', el || 'body').addBack('[data-fill-font]');

        setTimeout(function() {
            FillFont._interval = setInterval(FillFont._apply.bind(this, $el), 10);
        });

        $(window).on('resize', function() {
            clearInterval(FillFont._interval);
            FillFont._interval = setInterval(FillFont._apply.bind(this, $el), 10);
        });
    },

    _apply: function($el) {
        var noChanges = true;
        $el.css('visibility', 'hidden');
        $el.each(function() {
            var $this = $(this);
            var fontSize = 32;

            var parentWidth = Math.round($this.parent().width());
            var actualWidth = Math.round($this.innerWidth());

            if (parentWidth == actualWidth)
                return;

            $this.css({
                'font-size': fontSize + 'px',
                'white-space': 'nowrap'
            });

            while (actualWidth = Math.round($this.innerWidth()), actualWidth < parentWidth)
                $this.css('font-size', (fontSize *= 2) + 'px');

            var jump = fontSize;
            var attempts = 20;
            while (attempts-- > 0 && (actualWidth = Math.round($this.innerWidth()), actualWidth != parentWidth))
            {
                jump = Math.abs(jump) / 2 * (actualWidth > parentWidth ? -1 : 1);
                fontSize += jump;
                $this.css('font-size', fontSize + 'px');
                noChanges = false;
            }
        });

        if (noChanges)
        {
            $el.css('visibility', 'visible');
            FillFont._interval = clearInterval(FillFont._interval);
        }
    }
};