davatron5000/Lettering.js — pull request #45 by alienresident (2013-11-08 04:37:29+00:00)
Title: Added custom data attributes, character escape function, and character class for kerning pairs

### Changes to LetteringJS

* Copies the text to custom data attributes of the span.
* Uses the method to create data attribute i.e. `data-char`, `data-word` and `data-line`
* Escapes the text before copying it using an 'escape' function. Makes sure that common HTML attributes are properly escaped: quotation marks, ampersands, less than or greater than symbols.
* Only if the 'char' method is being used it add a addition class with the letter value. Adds a class `char - item value` _i.e._ If the letter is `a` it's adds a class of `char-a`.
* you can escape non-alphanumeric characters in css using `\` i.e `class="char-&"` can be styled `.char-\&` see [CSS character escape sequences](http://mathiasbynens.be/notes/css-escapes) for more details.
* This allows you create kerning pairs. You can create kerning pair rules for all the character combos. You won't need to know the content beforehand. Use case could be on a CMS where you won't know the headings beforehand but want strict kerning rules.

### Use cases (codepens)
Collection of examples [LetteringJS Collection](http://codepen.io/collection/LjIwo)

* [Text effects](http://codepen.io/alienresident/pen/mhqrj) using Custom Data Attributes on characters.
* [Layered Type](http://codepen.io/alienresident/pen/LvqcI) using Custom Data Attributes on words.
* [Kerning Pairs](http://codepen.io/alienresident/pen/tFylB) using extra class.

### Incorporates Ideas/Work from Other Pull Requests

\#41 [Add a character-specific class to letters](https://github.com/davatron5000/Lettering.js/pull/41)
\#26 [Add data-content='item' attribute to the generated span tags](https://github.com/davatron5000/Lettering.js/pull/26)
\#6 [Added additional classes](https://github.com/davatron5000/Lettering.js/pull/6)

I am sure I have missed something and this approach may be overly simplistic.

Thanks,
Mark