Lettering.js in vanilla JavaScript.
- Supports changing the inserted DOM element (defaults to
span
), or changing or removing the class prefix (defaults tochar
) - Supports passing in a regular expression to control how the contents of the element are wrapped
- 0.43 KB gzipped
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.
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