https://github.com/bartveneman/spanner.js
Plain javascript kerning tool. Mind you: Spanner.js is *fast*
https://github.com/bartveneman/spanner.js
Last synced: 11 months ago
JSON representation
Plain javascript kerning tool. Mind you: Spanner.js is *fast*
- Host: GitHub
- URL: https://github.com/bartveneman/spanner.js
- Owner: bartveneman
- Created: 2013-07-24T08:01:09.000Z (almost 13 years ago)
- Default Branch: master
- Last Pushed: 2014-08-04T10:01:11.000Z (almost 12 years ago)
- Last Synced: 2025-04-10T23:14:22.836Z (about 1 year ago)
- Language: JavaScript
- Homepage: http://bveneman.nl/2013/08/03/introducing-spannerjs-letteringjs-on-steroids/
- Size: 306 KB
- Stars: 28
- Watchers: 3
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Spanner.js: wrap your text
[](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
````
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
text
another
````
This example shows spanner being used in a try-catch block.
````javascript
spanner( document.getElementsByClassName("clazz") );
````
Spanner gives you this:
````html
t
e
x
t
a
n
o
t
h
e
r
````
### 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
Going nuts here dude
````
````javascript
spanner( document.getElementById("kern-me-plz") );
````
Output:
````html
````
### 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
text
here
plz
````
````javascript
spanner( document.querySelector("#example-3") );
````
Spanner.js will do the counting for you:
````html
t
e
x
t
h
e
r
e
p
l
z
````
## 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. ;)