Feature: Adding the letter to the class

[Boldewyn]

The plugin could be extended in the following way: To the char# class, add also a letter-X class, where X is the content of the span.

Example:

Current result:

<span class="char1">A</span>

Proposed result:

<span class="char1 letter-A">A</span>

Side effects: Whitespace must be addressed specially.

Advantages: In the CSS you could address all 'A's at once, like, e.g., doing baseline shifting.

[davatron5000]

Great idea. Something similar was mentioned in the blog comments. It's not without its challenges (i.e. apostrophes and other punctuation), but my brain is turning on this. Will likely make it into the next version with something like: $(".fancy_title").lettering('letterize'); ...

but don't quote me on that. :)

[Boldewyn]

Apostrophes shouldn't be an issue, since there are no quotes to escape in the DOM ;-). And in the stylesheets, there are escape mechanisms. However, metaclasses, like letter-punctuation or so could prove useful.

Apart from that: Thanks for the cool plugin!

[roborourke]

My fork of the plugin has this feature plus a few others. Take a look.

It also supports non alpha-numeric characters by way of escaping the characters and then replacing the % sign with the letter u meaning an ampersand would get the class name .char-u26 or if using the words method .word-u26. Spaces are .char-u20 etc..

[scottmackenzzz]

@sanchothefat - Perfect! Save my day.

[ianthedev]

Please also consider adding a class for each word:

<p>
    <span class="word1 lorem">Lorem</span>
    <span class="word2 ipsum">ipsum</span>
    <span class="word3 dolor">dolor</span>
    <span class="word4 sit">sit</span>
    <span class="word5 amet">amet</span>
</p>

[davatron5000]

If you need this functionality, check out @sanchothefat's fork https://github.com/sanchothefat/Lettering.js

I'm personally not convinced that after a few years this needs to go into core.

If you need this sorta functionality, you can hack it in (with mixed results), like so:

$('#mything').lettering('words').children('span').each( function(){ 
  $(this).addClass($(this).text().toLowerCase()); 
});

[drawcard]

Sorry davatron5000, I deleted my old comment when I realised it's probably not necessary either - but I like your solution anyhow :)