Break Text Into Characters, Words, Or Lines – vanilla-lettering.js

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>