Adaptable-text NPM

adaptable-text

Adapt font size to a specified width using either binary search or linear steps.

Linear steps works best for small adjustments (eg. on resize) while binary search is most efficient when the expected font-size change is big.

Installation

npm install adaptable-text

Usage

import AdaptableText from "adaptable-text";

const textToAdapt = new AdaptableText(document.querySelector(".TextToAdapt"), {
  step: 0.1,
  minFontSize: 10,
  width: null,
});
textToAdapt.init();

// Adapt
const adapt = () => {
  textToAdapt.setWidth();
  textToAdapt.adapt();
};

// Listen for a resize event
window.addEventListener("resize", adapt);

// Kick off
adapt(true);

API

Classes

Typedefs

AdaptableText

Kind: global class

AdaptableText

new AdaptableText(element, options)

Creates an instance of AdaptableText.

Param	Type
element	HTMLElement
options	Options

adaptableText.init()

Initialise the adaptor.

Kind: instance method of AdaptableText

adaptableText.setWidth()

Set the desired width for adaptation from options.width or getBoundingClientRect().width

Kind: instance method of AdaptableText

adaptableText.adapt(useBinarySearch)

Adapt font size to a specified width.

Kind: instance method of AdaptableText

Param	Type
useBinarySearch	boolean

Options : object

Kind: global typedef Properties

Name	Type	Default	Description
step	number	0.5	The step used by the generator to calculate the width of the element.
minFontSize	number	0	A minimum font size for the element (max would be the size defined in a stylesheet retrieved by `window.getComputedStyle(this.element)`).
width	number	"null"	A maximum width for the container.