This usage guide will get you off the ground, and show you how simple it can be to use typesetting.js
For a full usage guide including scenarios and examples, please refer to the Wiki.
Getting started with typesetting.js is as simple as
<script> tags just before the </body> tag)
Version 1.2 will not have a third party dependancy on Sizzle, and will function the exact same as the current version. So upgrading from 1.1 to 1.2 will be a breeze.
There are three methods available for you to work with in typesetting.js
The letters() method will parse all elements returned by the selector search and wrap each child character with a <span> tag. The default className applied to the new element is chari (where 'i' is the index of the character, starting with one '1').
Example:
<h1 class="title-text">Hello World!</h1>
<script>
typesetting.letters('.title-text');
</script>
Outputs:
<h1 class="title-text"> <span class="char1">H</span> <span class="char2">e</span> <span class="char3">l</span> <span class="char4">l</span> <span class="char5">o</span> <span class="char6"></span> <span class="char7">W</span> <span class="char8">o</span> <span class="char9">r</span> <span class="char10">l</span> <span class="char11">d</span> <span class="char12">!</span> </h1>
The words() method will parse all elements returned by the selector search and wrap each child word (seperated by a space ' ') with a <span> tag. The default className applied to the new element is wordi (where 'i' is the index of the word, starting with one '1').
It is important to note, by default all whitespaces between words are removed. This can be overrode by the 'after' option.
Example:
<h1 class="title-text">Hello Type Setting Dot JS</h1>
<script>
typesetting.words('.title-text');
</script>
Outputs:
<h1 class="title-text"> <span class="word1">Hello</span> <span class="word2">Type</span> <span class="word3">Setting</span> <span class="word4">Dot</span> <span class="word5">JS</span> </h1>
The lines() method will parse all elements returned by the selector search and wrap each child line (seperated by a <BR> tag) with a <span> tag. The default className applied to the new element is linei (where 'i' is the index of the line, starting with one '1').
Example:
<p class="gnr-text">Welcome to the jungle,<br \>We take it day by day.</p>
<script>
typesetting.lines('.gnr-text');
</script>
Outputs:
<p class="gnr-text"> <span class="line1">Welcome to the jungle,</span> <span class="line2">We take it day by day.</span> </p>
in progress... check back soon.
This option allows you to change the default classname for the <span> element when the typesetting method is applied.
Example:
<h1 class="title-text">Hello World!</h1>
<script>
typesetting.letters('.title-text', {
baseClass: 'foo'
});
</script>
Outputs:
<h1 class="title-text"> <span class="foo1">H</span> <span class="foo2">e</span> <span class="foo3">l</span> <span class="foo4">l</span> <span class="foo5">o</span> <span class="foo6"></span> <span class="foo7">W</span> <span class="foo8">o</span> <span class="foo9">r</span> <span class="foo10">l</span> <span class="foo11">d</span> <span class="foo12">!</span> </h1>
The baseClass option only accepts strings, and can be applied in conjunction with any of the other options.
The after option lets you control what the Injector inserts after the <span> element before it returns it to the document.
Example:
<h1 class="title-text">Hello Type Setting Dot JS</h1>
<script>
typesetting.words('.title-text', {
after: ' ' // or ' '
});
</script>
Outputs:
<h1 class="title-text"> <span class="word1">Hello</span> <span class="word2">Type</span> <span class="word3">Setting</span> <span class="word4">Dot</span> <span class="word5">JS</span> </h1>
The after option accepts strings, and can be applied in conjunction with any of the other options.
The reset option controls the numeric value appended to the classname for the <span> element. Specifically this option lets you set the limit upon which the numeric value resets back to one (1).
Example:
<p class="para-text">
Never gonna give you up<br />
Never gonna let you down<br />
Never gonna run around and desert you<br />
Never gonna make you cry<br />
Never gonna say goodbye<br />
Never gonna tell a lie and hurt you
</p>
<script>
typesetting.lines('.para-text', {
reset: 3
});
</script>
Outputs:
<p class="para-text"> <span class="line1">Never gonna give you up</span> <span class="line2">Never gonna let you down</span> <span class="line3">Never gonna run around and desert you</span> <span class="line1">Never gonna make you cry</span> <span class="line2">Never gonna say goodbye</span> <span class="line3">Never gonna tell a lie and hurt you</span> </p>
The reset option accepts numeric values, and cannot be applied in conjunction with runner.
The runner option functions almost exactly the same as the reset option. However instead of resetting the value once the limit is hit, the numeric value appeneded to the classname starts to decline back to one (1) then increase back to the limit.
Example:
<p class="para-text">
Never gonna give you up<br />
Never gonna let you down<br />
Never gonna run around and desert you<br />
Never gonna make you cry<br />
Never gonna say goodbye<br />
Never gonna tell a lie and hurt you
</p>
<script>
typesetting.lines('.para-text', {
runner: 3
});
</script>
Outputs:
<p class="para-text"> <span class="line1">Never gonna give you up</span> <span class="line2">Never gonna let you down</span> <span class="line3">Never gonna run around and desert you</span> <span class="line2">Never gonna make you cry</span> <span class="line1">Never gonna say goodbye</span> <span class="line2">Never gonna tell a lie and hurt you</span> </p>
The runner option accepts numeric values, and cannot be applied in conjunction with reset.