Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/alexcambose/fit-fontsize
Small library for fitting text perfectly into it's container.
https://github.com/alexcambose/fit-fontsize
box containers css css-selector fit font font-size javascript javascript-library text
Last synced: 20 days ago
JSON representation
Small library for fitting text perfectly into it's container.
- Host: GitHub
- URL: https://github.com/alexcambose/fit-fontsize
- Owner: alexcambose
- License: mit
- Created: 2018-04-14T20:22:31.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2018-04-16T17:59:59.000Z (almost 7 years ago)
- Last Synced: 2024-11-15T18:10:17.123Z (3 months ago)
- Topics: box, containers, css, css-selector, fit, font, font-size, javascript, javascript-library, text
- Language: JavaScript
- Homepage: https://alexcambose.github.io/fit-fontsize/
- Size: 12.7 KB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# fit-fontsize
Small library for fitting text perfectly into it's container.
[**Demo**](https://alexcambose.github.io/fit-fontsize/)
## Install
Install using [npm](https://www.npmjs.com/package/fit-fontsize)
```
npm install -S fit-fontsize
```
Install using [bower](https://bower.io/)
```
bower install fit-fontsize
```
## Usage
### Html only
```html
Lorem ipsum dolor sit amet
```
Css like properties can be added to the attribute
```html
Lorem ipsum dolor sit amet
```
### Javascript
```html
Lorem ipsum dolor sit amet
fit.apply(document.getElementById('element'));
```
Fit only with the width of the parent and also watch for changes.
```html
Lorem ipsum dolor sit amet
fit.watch(document.getElementById('element'), { type: 'width' });
```
Each time *#element* changes it will recalculate it's font-size in order to fit.
## API
## Fit
**Kind**: global class
* [Fit](#Fit)
* [new Fit(attribute)](#new_Fit_new)
* [.apply(element, options)](#Fit+apply)
* [.watch(element, options)](#Fit+watch) ⇒ number
* [.stop(index)](#Fit+stop)
### new Fit(attribute)
| Param | Type | Default | Description |
| --- | --- | --- | --- |
| attribute | string | 'fit-fontsize' | Attribute that will be used to select the element that sould be fitted |
### fit.apply(element, options)
Resize
**Kind**: instance method of [Fit](#Fit)
| Param | Type | Default | Description |
| --- | --- | --- | --- |
| element | object | | The DOM element that needs the font to be resized so that it will fit it's container |
| options | object | | Resizing options |
| [options.type] | 'both' \| 'width' \| 'height' | 'both' | Type of the resize. |
| [options.ifParentBigger] | boolean | true | Resize text bigger until it fits perfectly |
| [options.ifParentSmaller] | boolean | true | Resize text smaller until it fits perfectly |
**Example**
```js
fit.apply(document.getElementById('elem'), { type: 'width' });
```
### fit.watch(element, options) ⇒ number
Calls apply each time the element changes
**Kind**: instance method of [Fit](#Fit)
**Returns**: number - Id of the watcher
**See**: [#apply](#apply)
| Param | Type | Description |
| --- | --- | --- |
| element | object | Same as the apply method |
| options | object | Same as the apply method |
**Example**
```js
fit.watch(document.getElementById('elem'), { type: 'height' }); // 0
```
### fit.stop(index)
Stops a watcher
**Kind**: instance method of [Fit](#Fit)
| Param | Type | Description |
| --- | --- | --- |
| index | number | Id of the watcher |
**Example**
```js
fit.stop(0);
```