Adding total-chars/total-words/total-lines classes to parent elements.

[Abby805]

This adds a class of total-chars-{n} to the element to which lettering() is applied. For example, where previously we would see:

<h1 aria-label="Rainbow">
  <span class="char1" aria-hidden="true">R</span>
  <span class="char2" aria-hidden="true">a</span>
  <span class="char3" aria-hidden="true">i</span>
  <span class="char4" aria-hidden="true">n</span>
  <span class="char5" aria-hidden="true">b</span>
  <span class="char6" aria-hidden="true">o</span>
  <span class="char7" aria-hidden="true">w</span>
</h1>

...now we see:

<h1 class="total-chars-7" aria-label="Rainbow">
  <span class="char1" aria-hidden="true">R</span>
  <span class="char2" aria-hidden="true">a</span>
  <span class="char3" aria-hidden="true">i</span>
  <span class="char4" aria-hidden="true">n</span>
  <span class="char5" aria-hidden="true">b</span>
  <span class="char6" aria-hidden="true">o</span>
  <span class="char7" aria-hidden="true">w</span>
</h1>

This will also add a class of total-words-{n} when lettering('words') is applied, and a class of total-lines-{n} when lettering('lines') is applied.

Reduced test cases: http://codepen.io/Abby805/pen/KVBRqw

[davatron5000]

Thanks for this Abby. Some questions. It doesn't look like you're leveraging .total-chars|words|lines- in your reduced test case. What's the use case for adding this feature? Couldn't it be done outside of the plugin using an .each() statement?

[Abby805]

Hi Dave! Sorry, I thought the test case was just supposed to show that it worked from a purely js standpoint.

The main use case I was envisioning was styling letters into an arch (such as the h1 on http://www.nointernetsalestax.com/), in which case the proper rotation of each letter would depend on the total number of letters. I can also think of scenarios involving color (say you want your first letter to be black and your last to be white, and each letter in between to be a slightly lighter shade of gray - oversimplified example, but you would need to know how many characters there were in order to make it even). I can write these up as demos if you'd like.

It could definitely be done with an .each() statement, but since I could only really envision doing that in conjunction with lettering.js I thought it made more sense to include it (and even if someone doesn't need it, I can't envision any way it would be harmful). But that's your call, of course. :)

[Abby805]

Here's an example of using this functionality to fade a word of unknown length evenly between two colors: http://codepen.io/Abby805/pen/qbMyGZ