fit-fontsize

Small library for fitting text perfectly into it’s container.

Demo

Install

Install using npm

npm install -S fit-fontsize

Install using bower

bower install fit-fontsize

Usage

Html only

<div style="height: 200px; width: 200px; border: 1px solid black;">
    <span fit-fontsize>Lorem ipsum dolor sit amet</span>
</div>

Css like properties can be added to the attribute

<div style="height: 200px; width: 200px; border: 1px solid black;">
    <span fit-fontsize="type: height; ifParentBigger: false">Lorem ipsum dolor sit amet</span>
</div>

Javascript

<div style="height: 200px; width: 200px; border: 1px solid black;">
    <span id="element">Lorem ipsum dolor sit amet</span>
</div>
<script>
    fit.apply(document.getElementById('element'));
</script>

Fit only with the width of the parent and also watch for changes.

<div style="height: 200px; width: 200px; border: 1px solid black;">
    <span id="element">Lorem ipsum dolor sit amet</span>
</div>
<script>
    fit.watch(document.getElementById('element'), { type: 'width' });
</script>

Each time #element changes it will recalculate it’s font-size in order to fit.

API

Fit

Kind: global class

• Fit
  • new Fit(attribute)
  • .apply(element, options)
  • .watch(element, options) ⇒ number
  • .stop(index)

new Fit(attribute)

fit.apply(element, options)

Resize

Kind: instance method of Fit

Example

fit.apply(document.getElementById('elem'), { type: 'width' });

fit.watch(element, options) ⇒ number

Calls apply each time the element changes

Kind: instance method of Fit
Returns: number - Id of the watcher
See: #apply

Example

fit.watch(document.getElementById('elem'), { type: 'height' }); // 0

fit.stop(index)

Stops a watcher

Kind: instance method of Fit

Example

fit.stop(0);