For a given dom_element_with_text, width and height, this library computes the maximum dom_element_with_text.style.fontSize for which the width and height of dom_element_with_text are smaller than width and height.

In other words, if you want a text to fit within a container while the fontSize being maximized, then this library is for you.

Usage

<span id='text'>make_me_big</span>
<script src='http://brillout.github.io/set-text-dimensions/index.js'></script>
<script>
    var dom_element_with_text = document.getElementById('text');

    var computation =
        set_text_dimensions(
            dom_element_with_text, // text element
            400, // maximum width
            100); // maximum height

    computation.fontSize; // computed fontSize such that
                          // fontSize is max while `width<=400 && height<=100`

    dom_element_with_text.style.fontSize = computation.fontSize + 'px';
</script>

This code on JSFiddle

Live Demo

A more interesting demo on brillout.github.io/set-text-dimensions

Used By

timer-tab.com

msgtab.brillout.com

clocktab.com

Credits

Joachim Breitner for the approximation idea