KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#dsh #dsh-plugin #typescript #developer-tools #claude-code #ai-agent #codex #deepseek-harness #ai-agents #cli #react #mcp

Spanner.js

★ 28 Open GitHub ↗

Plain javascript kerning tool. Mind you: Spanner.js is *fast*

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Spanner.js: wrap your text

[![Code Climate](https://codeclimate.com/github/bartveneman/Spanner.js/badges/gpa.svg)](https://codeclimate.com/github/bartveneman/Spanner.js)

Spanner.js is a simple way to wrap your text in ``s for kerning, or other typographic effects. Spanner.js wraps the letters in your text in ``s with a class `char` appended by the number of the letter, for example `char1`. __Mind you__, counting starts at 1 instead of 0;

Spanner.js is a jQuery-free rip-off from @davatron5000 's [lettering.js](https://github.com/davatron5000/Lettering.js).

## Usage
Spanner.js is registered as a global function, so all you have to do is call lettering with a valid selector as argument. If no valid selector is recognized, it throws an error, so be sure to place the function call inside a try-catch block.

Include spanner in your document, preferrably at the bottom:

````html
<script src="spanner.js"></script>
````

And call the lettering function from your application:

````javascript
try {
	spanner( selector );
} catch (e) {
	console.warn(e); // element not found or not eligible;
}
````

## Examples

### Using a basic selector

````html
<div class="clazz">text</div>
<div class="clazz">another</div>
````

This example shows spanner being used in a try-catch block.

````javascript
spanner( document.getElementsByClassName("clazz") );
````

Spanner gives you this:

````html
<div class="clazz">
	t
	e
	x
	t
</div>
<div class="clazz">
	a
	n
	o
	t
	h
	e
	r
</div>
````

### Using inline tags
Spanner.js is able to recognize inline tags one level deep. So you can use ``, ``, ``, `` or even `a` inside the element you want to apply lettering to. Supported tags:

* a 
* abbr
* b 
* bdo
* cite
* dfn
* em 
* i 
* kbd
* q
* samp
* small
* strong 
* sub
* sup

````html
<div id="kern-me-plz">Going nuts here <a href="">dude</a></div>
````

````javascript
spanner( document.getElementById("kern-me-plz") );
````

Output:

````html
<div id="kern-me-plz">
	G
	o
	i
	n
	g
	 
	
		n
		u
		t
		s
	
	
	
		h
		e
		r
		e
	
	
	<a href="">
		d
		u
		d
		e
	</a>
</div>
````

### Using the Line Break Element
Spanner.js is capable of dealing with the Line Break Element. It splits up the words before and after the break element and it continues the char count.

````html
<div id="example3">text here plz</div>
````

````javascript
spanner( document.querySelector("#example-3") );
````

Spanner.js will do the counting for you:

````html
<div id="example-3">
	t
	e
	x
	t
	 
	h
	e
	r
	e
	 
	p
	l
	z
</div>
````

## Known issues
The one thing Spanner.js can't handle is, er, ``s. It will not split the text inside the span, but leave the whole tag alone. You could use it as a feature: using a span inside your element will prevent it from having Spanner applied ;-)

## Test
Tests are available in the [test page](test.html).

## Credits
Thanks to [Phil Green](https://github.com/ShirtlessKirk) for pointing out _many_ jslint errors and some really useful optimalisations.
Many kudos to Dave Rupert for creating the original version, called [Lettering.js](https://github.com/davatron5000/Lettering.js).

## jQuery-free!
You don't need jQuery for _everything_. No, really, you don't. ;)

Spanner.js

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README