node package manager


ender based library for littering text with span markup, based on Lettering.js

Littering - a less elegant javascript span injector

Littering is an ender based variation of Lettering.js. Where lettering.js injects positional classes for styling chars/words/lins, Littering accepts functions to determine which classes to apply to which elements.

Check the examples at

Get littering by including it in your ender build

ender add littering

Littering mimics the same api as Lettering.js for the base functionality of decorating chars/words/lines with their position.

$("#demo1 h1").littering();
$("#demo2 h1").littering('words');
$("#demo3 p").littering('lines');
$("#demo4 h1").littering('words').children("span").littering();
$("#demo5 h1").littering().children("span").css({'display':'inline-block', '-webkit-transform':'rotate(-25deg)'});

In addition to simply numbering elements, littering accepts custom formatter functions to allow arbitrary substitution of elements and complex class setting.

$("#demo6 h1").littering('chars',function(){return 'a'});`
$("#demo7 h1").littering('chars',function(item,i){
  var str = item.charCodeAt(0) > 64 && item.charCodeAt(0) < 91 ? " upper" : "" ;
  return '<span class="char'+(i+1)+str+'">'+item+'</span>';

0.0.2 - Enable and add examples for passed formatter functions. 0.0.1 - Replicate Lettering.js functionality running on ender.

Inspiration and some (ok, a bunch of) code (examples/index.html, the injector func) pinched from the excellent Lettering.js.

Released under the WTFPL license