Introducing Spanner.js - Lettering.js on steroids
As Lettering.js uses strings or innerHTML to apply the wrapping, Spanner.js takes a DOM based approach. This presents an improvement right away: Spanner.js is capable of dealing with inline tags in your targeted element(s), such as
<em> for example.
Another difference is that Spanner.js is framework independent, whereas Lettering.js is a jQuery plugin. So there’s no overhead when using Spanner.js for your kerning.
Spanner.js works at blazing speeds, as tests on JSPerf.com show. According to these tests Spanner.js is up to 26 times faster!
How to use
Using Spanner.js is quite easy. After including Spanner.js at the bottom of your page, there is a globally available function called spanner, which you can use to apply the spanning to your element(s).
<!-- lots of other stuff here -->
Select context and apply spanning:
And voila, you’re done! The resulting html should be like this:
View an example on CodePen.
Drawbacks of Spanner.js
Yes, there are some drawbacks. Lettering.js is capable of splitting your content into words or lines and add classes accordingly. I haven’t added these functionalitites to Spanner.js yet, but might do that in the future. But is you’re in a forking mood, please have a go yourself!