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)

Param	Type	Default	Description
attribute	string	'fit-fontsize'	Attribute that will be used to select the element that sould be fitted

fit.apply(element, options)

Resize

Kind: instance method of Fit

Param	Type	Default	Description
element	object		The DOM element that needs the font to be resized so that it will fit it's container
options	object		Resizing options
[options.type]	'both' | 'width' | 'height'	'both'	Type of the resize.
[options.ifParentBigger]	boolean	true	Resize text bigger until it fits perfectly
[options.ifParentSmaller]	boolean	true	Resize text smaller until it fits perfectly

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

Param	Type	Description
element	object	Same as the apply method
options	object	Same as the apply method

Example

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

fit.stop(index)

Stops a watcher

Kind: instance method of Fit

Param	Type	Description
index	number	Id of the watcher

Example

fit.stop(0);