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

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

Stretch [ X & Y ]

<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 ]

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

Stretch [ Y ]

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

Stretch [ min ] = n

Link see and try [min / max]

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

Stretch [ max ] = n

<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

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