Lettering.js in vanilla JavaScript.

• Optionally change the inserted DOM element (defaults to span), or change or remove the class prefix (defaults to char)
• Just 0.53 KB minified, or 0.35 KB minified and gzipped

Editable demo (CodePen)

HTML:

<h1>foo</h1>

JavaScript:

const charming = require('charming')

const element = document.querySelector('h1')
charming(element)

Boom:

<h1>
  <span class="char1">f</span>
  <span class="char2">o</span>
  <span class="char3">o</span>
</h1>

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.

const charming = require('charming')

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

charming(element, {
  tagName: 'b', // defaults to 'span'
  classPrefix: 'letter' // defaults to 'char'
})

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

charming(element, {
  classPrefix: false
})

Install via yarn:

$ yarn add charming

Or npm:

$ npm install --save charming

MIT