Lettering.js in vanilla JavaScript
npm install 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
HTML:
``html`foo
JavaScript:
`js
const charming = require('charming')
const element = document.querySelector('h1')
charming(element)
`
Boom:
`html`
- 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.
`js`
const charming = require('charming')
- element is a DOM elementoptions
- is an optional configuration object
Use options.tagName to change the tag name of the wrapper element:
`js`
charming(element, {
tagName: 'b'
})
Use options.setClassName to change the class name on each wrapper element:
`jsindex-${index} letter-${letter}
charming(element, {
setClassName: function (index, letter) {
return `
}
})
Use options.split to control how the contents of the element are wrapped:
`jsword-${index}
charming(element, {
split: function (string) {
return string.split(/(\s+)/)
},
setClassName: function (index) {
return `
}
})
`sh``
$ yarn add charming