Awesome
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
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 andaria-hidden
attributes on each of the inserted DOM elements.
API
const charming = require('charming')
charming(element [, options])
element
is a DOM elementoptions
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}`
}
})
Installation
$ yarn add charming