Lettering.js in vanilla JavaScript.
- Optionally change the inserted DOM element (defaults to
span), or change or remove the class prefix (defaults tochar) - Just 0.53 KB minified, or 0.37 KB minified and gzipped
HTML:
<h1>foo</h1>JavaScript:
var element = document.querySelectorAll('h1')[0];
charming(element);Boom:
<h1>
<span class="char1">f</span>
<span class="char2">o</span>
<span class="char3">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.
Pass in an opts object if you want to change the tagName or classPrefix:
charming(element, {
tagName: 'b', // defaults to 'span'
classPrefix: 'letter' // defaults to 'char'
});Set classPrefix to false if you don’t need a class on each wrapper element:
charming(element, {
classPrefix: false
});Install via npm:
$ npm i --save charmingInstall via bower:
$ bower i --save yuanqing/charmingTo use Charming in the browser, include the minified script in your HTML:
<body>
<!-- ... -->
<script src="path/to/charming.min.js"></script>
<script>
// charming available here
</script>
</body>- 1.0.0
- Initial release