Lettering.js in vanilla JavaScript

• Supports changing the tag name or class name of the inserted DOM elements
• Supports controlling how the contents of the element are wrapped

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')

• element is a DOM element
• options is an optional configuration object

Use options.tagName to change the tag name of the wrapper element:

charming(element, {
  tagName: 'b'
})

Use options.setClassName to change the class name on each wrapper element:

charming(element, {
  setClassName: function (index, letter) {
    return `index-${index} letter-${letter}`
  }
})

Use options.split to control how the contents of the element are wrapped:

charming(element, {
  split: function (string) {
    return string.split(/(\s+)/)
  },
  setClassName: function (index) {
    return `word-${index}`
  }
})

$ yarn add charming

MIT