1.6.0 ā¢ Published 10 months ago
stretch-font v1.6.0
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>
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
<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.
1.6.0
10 months ago
1.5.5
12 months ago
1.5.4
12 months ago
1.5.3
12 months ago
1.5.2
12 months ago
1.5.1
12 months ago
1.5.0
12 months ago
1.4.0
1 year ago
1.3.8
1 year ago
1.3.7
1 year ago
1.3.6
1 year ago
1.3.5
1 year ago
1.3.4
1 year ago
1.3.3
1 year ago
1.3.2
1 year ago
1.3.1
1 year ago
1.3.0
1 year ago
1.2.0
1 year ago
1.1.1
1 year ago
1.1.0
1 year ago
1.0.3
1 year ago
1.0.2
1 year ago
1.0.1
1 year ago
1.0.0
1 year ago