Lettering.js in vanilla JavaScript.
JavaScript
Latest commit 2cd1232 Feb 2, 2015 @yuanqing 1.0.1

README.md

Charming.js npm Version Build Status Coverage Status

Lettering.js in vanilla JavaScript.

  • Optionally change the inserted DOM element (defaults to span), or change or remove the class prefix (defaults to char)
  • Just 0.53 KB minified, or 0.37 KB minified and gzipped

Usage

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.

API

charming(elem [, opts])

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

Installation

Install via npm:

$ npm i --save charming

Install via bower:

$ bower i --save yuanqing/charming

To 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>

Changelog

  • 1.0.0
    • Initial release

License

MIT