Lettering.js in vanilla JavaScript.
Clone or download
Latest commit eb1b059 Jun 5, 2018
Failed to load latest commit information.
.gitignore Update .gitignore Mar 4, 2018
.travis.yml Use `npx` Mar 4, 2018
CHANGELOG.md Update CHANGELOG.md Jun 5, 2018
LICENSE.md Update year Feb 18, 2018
README.md Update weight Mar 25, 2018
index.js Replace `Node.TEXT_NODE` with number Mar 4, 2018
package.json 2.2.4 Jun 5, 2018
test.js Tweak name of test Feb 12, 2018
yarn.lock Add `husky`, `lint-staged` Jun 5, 2018


charming npm Version Build Status Coverage Status

Lettering.js in vanilla JavaScript.

  • Supports changing the inserted DOM element (defaults to span), or changing or removing the class prefix (defaults to char)
  • Supports passing in a regular expression to control how the contents of the element are wrapped
  • 414 bytes gzipped


Editable demo (CodePen)




const charming = require('charming')

const element = document.querySelector('h1')


<h1 aria-label="foo">
  <span class="char1" aria-hidden="true">f</span>
  <span class="char2" aria-hidden="true">o</span>
  <span class="char3" aria-hidden="true">o</span>
  • Charming also works when the given element contains other (possibly nested) DOM elements; any character that is inside a text node in the given element will be wrapped.
  • For accessibility, Charming adds an aria-label attribute on the given element and aria-hidden attributes on each of the inserted DOM elements.


const charming = require('charming')

charming(element [, options])

Pass in an options object to change the tagName or classPrefix:

charming(element, {
  tagName: 'b',
  classPrefix: 'letter'

Set classPrefix to false if you don’t need a class on each wrapper element:

charming(element, {
  classPrefix: false

Pass in a regular expression on the splitRegex key to control how the contents of the element are wrapped:

charming(element, {
  splitRegex: /(\s+)/,
  classPrefix: 'word'


Install via yarn:

$ yarn add charming

Or npm:

$ npm install --save charming