Split Text String Into Individual Characters – Charming.js

Preview:

Description:

Charming.js is a prue ES6 JavaScript library that splits text strings into individual characters wrapped in the corresponding span elements so that you can style them in the CSS. Inspired by the jQuery Lettering.js plugin.

Installation:

# Yarn
yarn add charming
# NPM
$ npm install charming

How to use  it:

Import the charming into your project.

const charming = require('charming')

Initialize the charming library and specify the target text node.

var element = document.querySelector("h1");
charming(element);

This will convert …

<h1>Charming</h1>

Into …

<h1>
  <span class="char1">C</span>
  <span class="char2">h</span>
  <span class="char3">a</span>
  <span class="char4">r</span>
  <span class="char5">m</span>
  <span class="char6">i</span>
  <span class="char7">n</span>
  <span class="char8">g</span>
</h1>

Override the default CSS prefix.

var element = document.querySelector("h1");
charming(element,{
  classPrefix: 'char'
});

Override the default wrapping element.

var element = document.querySelector("h1");
charming(element,{
   tagName: 'span'
});

Changelog:

v3.0.0 (06/29/2019)

• JS & CSS update

v2.2.4 (06/09/2018)

• JS & CSS update