https://github.com/jongacnik/interspace

Interspace is a jQuery plugin which allows for sub-pixel finesse over letter-spacing for typophiles.
https://github.com/jongacnik/interspace

Last synced: 8 months ago
JSON representation

Interspace is a jQuery plugin which allows for sub-pixel finesse over letter-spacing for typophiles.

• Host: GitHub
• URL: https://github.com/jongacnik/interspace
• Owner: jongacnik
• Created: 2013-04-03T08:26:12.000Z (about 13 years ago)
• Default Branch: master
• Last Pushed: 2013-04-03T22:18:07.000Z (about 13 years ago)
• Last Synced: 2025-02-12T18:54:25.258Z (over 1 year ago)
• Language: JavaScript
• Homepage: http://jongacnik.com/subs/interspace/
• Size: 125 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
Interspace

==========

Interspace is a [jQuery][1] plugin which allows for sub-pixel finesse over letter-spacing for typophiles.

  

It does this by wrapping every character within the selected element in a `` and applies a specified right margin. It also supports textnodes which include childnodes, so it shouldn't break your DOM.

**Important!** Interspace only works on browsers that support sub-pixel measurements. This is current stable builds of Firefox and Chrome, as well as WebKit nightly. Hopefully we will see the support in Safari stable soon!

Options

-------

    spacing: 0.2,    // float, number of pixels between each character

    applyCSS: true,  // bool, whether interspace should apply css (set false to specify value in your css)

    skipSpaces: true // bool, whether spaces should also be affected by interspace

Usage

-----

Using Interspace with no options will add a letter-spacing value of 0.2px to all text within our element.

    
Interspace is atomic!


    $('h1').interspace();

Which would result in:

    Int...

We can adjust the letter-spacing by setting our `spacing` option:

    
Interspace is atomic!


    $('h1').interspace({spacing: 0.8});

By default Interspace skips spaces. This is so you may adjust word-spacing with css to optimize performance. If you would like spaces to also be affected by interspace, simply set the `skipSpaces` option to false:

    
Interspace is atomic!


    $('h1').interspace({skipSpaces: false});

By default Interspace also applies the letter-spacing value for us inline. We can turn this off so the behavior of Interspace is merely wrapping all characters in a ``. By setting the `applyCSS` option to false, Interspace will **not** affect letter-spacing. This allows you to specify the value in your own CSS by targeting the `intrspc` class.

	

	h1 .intrspc { margin-right: 0.2px; }

	

    
Interspace is atomic!


    $('h1').interspace({applyCSS: false});

    

Support

-------

As written above, Interspace only works in browsers that support sub-pixel measurements. If we are lucky we will get to see sub-pixel values worked into letter-spacing soon! In the meantime I am going to be looking for a workaround.

Word to the Wise

----------------

This plugin is fairly ridiculous! While it indeed gives you precise tracking it does so at a cost. Semantically this thing wreaks havoc. There are also huge performance concerns; this thing is literally wrapping every character in a `span` and styling it! In many cases this will be ok (headers, captions, text-lightweight sites, etc) but just be wise. With great power comes great typesetting…

[1]:http://jquery.com/