Letterify
Inspired by lettering.js - a commonJS, browserifiable module for doing radical web typography
What's different here?
There are quite a few packages available that will split text into a series of spans. letterify
has one enhancement - it adds a custom attribute to the created spans which is the content inside it. This means that you can target particular letters, or letter pairs, other combinations etc, with css.
As an example, this means you can kern letter pairs quite easily in css, like so:
<style type="text/css">
[data-letter="Y"] + [data-letter="o"] {
letter-spacing: -0.1rem;
}
</style>
<!-- before -->
<h1>Yo</h1>
<!-- after letterifying -->
<h1 class="letterified-parent">
<span data-letter="Y" class="letterified">Y</span>
<span data-letter="o" class="letterified">o</span>
</h1>
<!-- Whitespace above is just for clarity here, in the document there is no additional whitespace -->
You can see a more elaborated demo on codepen, combining fades and animations.
API
var letterify = ; // transforms all textcontent in H1 tags in the document to be a series of spans// where each span has an attribute for the letter it contains; // using custom options var heading = document; // or something ;
The parentClass css class is removed before transformation, and re-applied once content has been changed.
Content is found via the textContent
attribute of an element.
Original content is entirely removed, and replaced by <span>
s.