stretch-font

Stretch Font

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... 💫

Installation

npm install stretch-font

yarn add stretch-font

Simple usage

For ES Module

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

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/stretch-font/style.min.css">
<script src="https://cdn.jsdelivr.net/npm/stretch-font/stretch-font.min.js"></script>
<script>stretchFont()</script>

Usage

Freeze

Perfect for inline elements (i18n)
As if freezing the text inside the container

<button class="stretch-font">{{ $t("done") }}</button>
...
<span class="stretch-font">{{ $t("message") }}</span>

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

<div class="SOME_DYNAMICALLY_BLOCK" :style="{ width: x + 'px', height: y + 'px' }">
  <div class="stretch-font" data-stretch>
    {{ $t("message") }}
  </div>
</div>

Link see and try [stretch]

Stretch [ X ]

Perfect for Block elements / CSS Animations / Transition
Stretches the text only to the width of the container.

<div class="stretch-font" data-stretch-x>Some text...</div>

Stretch [ Y ]

Perfect for Block elements
Stretches the text only to the height of the container.

<div class="stretch-font" data-stretch-y>Some text...</div>

Stretch [ min ] = n

Link see and try [min / max]

Used for all elements

<div class="stretch-font" data-stretch-min="10">
  Font size cannot be less than 10px
</div>

Stretch [ max ] = n

Used for all elements

<div class="stretch-font" data-stretch-max="20">
  Font size cannot be larger than 20px
</div>

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

🚫 Incorrect
<div class="stretch-font" style="font-size: 100px"> ... </div>

✅ Correct
<div style="font-size: 60px;">
  <div class="stretch-font">
    ...
  </div>
</div>

🚫 Incorrect
<div class="stretch-font fz100">
  ... class fz100 - it's font-size: 100px ...
</div>

✅ Correct
<div class="fz100">
  <div class="stretch-font">
    ...
  </div>
</div>

License

Distributed under the MIT License. See LICENSE for more information.