Author: | wize-wiz |
---|---|
Views Total: | 136 views |
Official Page: | Go to website |
Last Update: | August 4, 2022 |
License: | MIT |
Preview:

Description:
This is the vanilla JavaScript version of the Lettering.js jQuery plugin, which enables you to break text into characters, words, or lines.
How to use it:
1. Load the vanilla-lettering.js library in the document.
<script src="./vanilla-lettering.js"></script>
2. Break text into characters:
<span class="letterchars">Break text into characters.</span>
document.Tools.lettering('.letterchars');
<!-- Output --> <span class="letterchars"> <span class="char1">B</span> <span class="char2">r</span> <span class="char3">e</span> <span class="char4">a</span> <span class="char5">k</span> <span class="char-space"></span> <span class="char7">t</span> <span class="char8">e</span> <span class="char9">x</span> <span class="char10">t</span> <span class="char-space"></span> <span class="char12">i</span> <span class="char13">n</span> <span class="char14">t</span> <span class="char15">o</span> <span class="char-space"></span> <span class="char17">c</span> <span class="char18">h</span> <span class="char19">a</span> <span class="char20">r</span> <span class="char21">a</span> <span class="char22">c</span> <span class="char23">t</span> <span class="char24">e</span> <span class="char25">r</span> <span class="char26">s</span> <span class="char27">.</span> </span>
3. Break text into words:
<span class="letterwords">Break text into words.</span>
document.Tools.lettering('.letterwords', 'words');
<!-- Output --> <span class="letterwords"> <span class="word1">Break</span> <span class="word2">text</span> <span class="word3">into</span> <span class="word4">words.</span> </span>
4. Break words into characters.
<span class="letterwordchars">Break words into characters</span>
document.Tools.lettering('.letterwordchars', 'wordchars');
<!-- Output --> <span class="letterwordchars"> <span class="word1"> <span class="char1">B</span> <span class="char2">r</span> <span class="char3">e</span> <span class="char4">a</span> <span class="char5">k</span> </span> <span class="word2"> <span class="char1">w</span> <span class="char2">o</span> <span class="char3">r</span> <span class="char4">d</span> <span class="char5">s</span> </span> <span class="word3"> <span class="char1">i</span> <span class="char2">n</span> <span class="char3">t</span> <span class="char4">o</span> </span> <span class="word4"> <span class="char1">c</span> <span class="char2">h</span> <span class="char3">a</span> <span class="char4">r</span> <span class="char5">a</span> <span class="char6">c</span> <span class="char7">t</span> <span class="char8">e</span> <span class="char9">r</span> <span class="char10">s</span> </span> </span>
5. Break text into lines.
<span class="letterlines">Break text into lines 1.<br/>Break text into lines 2.</span>
document.Tools.lettering('.letterlines', 'lines');
<!-- Output --> <span class="letterlines"> <span class="line1">Break text into lines 1.</span> <span class="line2">Break text into lines 2.</span> </span>
6. You’re also allowed to specify the mode using the HTML data
attribute:
<span data-lettering="lines">Break text into lines 1.<br/>Break text into lines 2.</span>