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])
  • .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.