https://github.com/sarmaged/stretch-font
Stretch Font: The utility dynamically adjusts the font size based on the width and height of the container
https://github.com/sarmaged/stretch-font
css fluid font font-size front-end i18n javascript js mobile responsive rotate screen-size screens stretch stretch-font typography
Last synced: 5 months ago
JSON representation
Stretch Font: The utility dynamically adjusts the font size based on the width and height of the container
- Host: GitHub
- URL: https://github.com/sarmaged/stretch-font
- Owner: Sarmaged
- License: mit
- Created: 2023-04-19T01:53:00.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-07-03T23:43:28.000Z (over 2 years ago)
- Last Synced: 2025-08-05T04:04:53.534Z (5 months ago)
- Topics: css, fluid, font, font-size, front-end, i18n, javascript, js, mobile, responsive, rotate, screen-size, screens, stretch, stretch-font, typography
- Language: JavaScript
- Homepage:
- Size: 244 KB
- Stars: 5
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Stretch Font
[][npm-link]
[][npm-link]
[][github-link]
The Utility Dynamically
Adjusts the font size depending on the width and height of the container.
This plugin was created in order not to write CSS [Media query] rules for each screen when you have many languages and you can switch them dynamically.
### Support
- 🥶 Freeze text in container
- 🤩 Watches when elements are added
- 🔥 Hot text replacement (i18n)
- 🖥 Any change in the width and height of the parent element
- 📱 Rotate
- 📝 Multiline
- ✅ CSS Animation
- ✅ CSS Transition
## [See and try... 💫](https://sarmaged.github.io/stretch-font/)
## Installation
```bash
npm install stretch-font
```
```bash
yarn add stretch-font
```
## Simple usage
#### For ES Module
```javascript
import 'stretch-font/style.css'
import stretchFont from 'stretch-font'
// Run only once if you didn't use "root"
// If you've used root many times, it should be different
stretchFont()
```
#### OR for HTML
```html
stretchFont()
```
## Usage
### Freeze
Perfect for inline elements (i18n)
As if freezing the text inside the container
```vue
{{ $t("done") }}
...
{{ $t("message") }}
```
When you change the language, the text takes on the original block width and is not stretched. In this case, the font may increase or decrease depending on how long the text will be.
### Stretch [ X & Y ]
Perfect for dynamically block elements
When you need the text to be dynamically calculated from the width and height of the block
```vue
{{ $t("message") }}
```
[Link see and try [stretch]](https://sarmaged.github.io/stretch-font/#/stretch)
### Stretch [ X ]
Perfect for Block elements / CSS Animations / Transition
Stretches the text only to the width of the container.
```html
Some text...
```
### Stretch [ Y ]
Perfect for Block elements
Stretches the text only to the height of the container.
```html
Some text...
```
### Stretch [ min ] = n
[Link see and try [min / max]](https://sarmaged.github.io/stretch-font/#/stretch-min-max)
Used for all elements
```html
Font size cannot be less than 10px
```
### Stretch [ max ] = n
Used for all elements
```html
Font size cannot be larger than 20px
```
## Options
### useStretchFont(root, className)
```
// defaults
root = document
className = "stretch-font"
```
## Mistakes
⚠️ Do not apply styles and classes to the "stretch-font" block or inline element
```html
🚫 Incorrect
...
✅ Correct
...
```
```html
🚫 Incorrect
... class fz100 - it's font-size: 100px ...
✅ Correct
...
```
## License [](https://github.com/Sarmaged/stretch-font/blob/main/LICENSE)
Distributed under the MIT License. See `LICENSE` for more information.
[npm-link]: https://www.npmjs.com/package/stretch-font
[github-link]: https://github.com/Sarmaged/stretch-font