Get started

A single file gets you up and running:

<script src="https://cdn.jsdelivr.net/gh/malarkey/splinter@main/splinter-min.js"></script>

or download .zip

Demo sandbox to experiment with Splinter.

Using Splinter

To activate Splinter, add the data-split="toon" attribute to elements you want to split:

<h2 data-split="toon">Hum Sweet Hum</h2>

Splinter takes the initial content of the splintered element and adds it as an aria-label attribute to help maintain accessibility:

<h2 data-split="toon" aria-label="Hum Sweet Hum">
 <span class="toon-char" aria-hidden="true">H</span>
 <span class="toon-char" aria-hidden="true">u</span>
 <span class="toon-char" aria-hidden="true">m</span>
</h2>

Splinter separates each word into individual letters and wraps them in a span element with a toon-char class and aria-hidden attributes applied:

<span class="toon-char" aria-hidden="true">H</span>
<span class="toon-char" aria-hidden="true">u</span>
<span class="toon-char" aria-hidden="true">m</span>

Lines of text separated by <br> elements are wrapped in a span element with a toon-line class attribute applied:

<h2 data-split="toon" aria-label="Hum Sweet Hum">
 <span class="toon-line">
  <span class="toon-char" aria-hidden="true">H</span>
  <span class="toon-char" aria-hidden="true">u</span>
  <span class="toon-char" aria-hidden="true">m</span>
 </span>
 <br>
 [……]
</h2>

Like this project? Tip me a fiver.