adaptable-text

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

AdaptableText

Typedefs

Options : object

AdaptableText

Kind: global class

• AdaptableText
  • new AdaptableText(element, [options])
  • .init()
  • .setWidth()
  • .adapt([useBinarySearch])

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.

License

MIT. See license file.

Changelog

3.2.0 (2024-01-27)

Features

• add support for binary search adaptation (2874af2)