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.
npm install adaptable-textimport 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);- Options :
object
Kind: global class
Creates an instance of AdaptableText.
| Param | Type |
|---|---|
| element | HTMLElement |
| [options] | Options |
Initialise the adaptor.
Kind: instance method of AdaptableText
Set the desired width for adaptation from options.width or getBoundingClientRect().width
Kind: instance method of AdaptableText
Adapt font size to a specified width.
Kind: instance method of AdaptableText
| Param | Type |
|---|---|
| [useBinarySearch] | boolean |
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. |
MIT. See license file.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent