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)

HTML:

<h1>foo</h1>

JavaScript:

const charming = require('charming')

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

Boom:

<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>
</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.
• 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')

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

MIT