README
adaptable-text
Adapt font size to a specified width.
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
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
Object
Options : 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.