charming's Introduction

charming

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

Usage

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.

API

const charming = require('charming')

charming(element [, options])

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}`
  }
})