adaptable-text

Adapt font size to a specified width.

Usage no npm install needed!

<script type="module">
  import adaptableText from 'https://cdn.skypack.dev/adaptable-text';
</script>

README

adaptable-text

npm version stability-stable npm minzipped size dependencies types Conventional Commits styled with prettier linted with eslint license

Adapt font size to a specified width.

paypal coinbase twitter

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
requestIdleCallback(() => {
  adapt();
});

API

Classes

AdaptableText

Typedefs

Options : Object

AdaptableText

Kind: global class

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()

Adapt font size to a specified width

Kind: instance method of AdaptableText

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 A maximum widht for the container..

License

MIT. See license file.