Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added additional classes #6

Closed
wants to merge 8 commits into from
Closed

Added additional classes #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
5f3739f
Updated to add letter, word and line based classes
lukemorton Sep 20, 2010
c88dab4
Update script src in examples/index.html
lukemorton Sep 20, 2010
f6ba2c3
Updated README, and added char_ for space characters
lukemorton Sep 20, 2010
cd4254d
Updated README text
lukemorton Sep 20, 2010
89e6a48
Added full character support
lukemorton Sep 21, 2010
5e199ff
Reverted README
lukemorton Sep 21, 2010
bed5b48
Wooops, put README content where it needs to be
lukemorton Sep 21, 2010
80d53da
Fixed braces to match normal JS conventions
lukemorton Sep 21, 2010
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,15 @@ We'll start with some really basic markup:
<h1 class="fancy_title">Some Title</h1>

After including jQuery, [download and include the minified version of Lettering.js](http://github.com/davatron5000/Lettering.js/downloads), then a script block with the magical `.lettering()` method:

<script src="path/to/jquery-1.4.2.min.js"></script>
<script src="path/to/jquery.lettering.min.js"></script>
<script>
$(document).ready(function() {
  $(".fancy_title").lettering();
$(".fancy_title").lettering();
});
</script>

The resulting code will churn your `.fancy_title` and output the following:

<h1 class="fancy_title">
Expand Down Expand Up @@ -48,7 +48,7 @@ Here's an example of the `.lettering('words')` method:

<script>
$(document).ready(function() {
  $(".word_split").lettering('words');
$(".word_split").lettering('words');
});
</script>

Expand All @@ -70,7 +70,7 @@ Once word wrapping was complete, we noticed the need for yet another method, one

<script>
$(document).ready(function() {
  $(".line_split").lettering('lines');
$(".line_split").lettering('lines');
});
</script>

Expand Down Expand Up @@ -100,4 +100,4 @@ As with any kind of Javascript, have a fall back plan in case the user doesn't h
Web performance patterns advise that you put Javascripts at the bottom of your page before your `</body>` tag. There is an unfortunate side effect where you may experiences a [FOUT (Flash of Unstyled Text)](http://paulirish.com/2009/fighting-the-font-face-fout/) when you're manipulating your text after the DOM has loaded. Unfortunately, we found the best solution to avoid/minimize the FOUT caused by this plugin is to put your scripts (jQuery, Lettering.js) in the document `<head>`. On the one hand, your page will load slower. On the other hand, a flash/restyling makes your site feel slow. Users might ultimately feel the site is faster if they don't see the FOUT.

## Download, Fork, Commit, Please.
We really want Lettering.js to be a quality helper for web typography. If you have any feedback or suggestions, please leave those over on the Github. We're excited about typography on the web and want to help make it print quality.
We really want Lettering.js to be a quality helper for web typography. If you have any feedback or suggestions, please leave those over on the Github. We're excited about typography on the web and want to help make it print quality.
26 changes: 13 additions & 13 deletions examples/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@

<meta name="viewport" content="width=device-width; initial-scale=1.0">
<link rel="stylesheet" href="style.css" type="text/css" media="screen"></link>

<style type="text/css" media="screen">
.demo {
padding: 50px;
Expand All @@ -27,7 +27,7 @@
line-height:1.5;
text-align:center;
}

.demo h1 { font-size:72px; text-transform:uppercase; margin-bottom:0px;}
.char2,
#demo2 .word2,
Expand All @@ -44,7 +44,7 @@
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="../jquery.lettering.js"></script>
<script>
$(document).ready(function() {
$(document).ready(function() {
$("#demo1 h1").lettering();
$("#demo2 h1").lettering('words');
$("#demo3 p").lettering('lines');
Expand All @@ -58,12 +58,12 @@
<body>

<div id="container">
<header>
<header>
<h1 id="thebrand">Lettering.JS</h1>
<p>The following are some hokey examples of how you can implement LETTERING.JS.
</header>
<article id="main">
</header>

<article id="main">
<section id='lettering-demo'>
<h2>Letters</h2>
<h4>The HTML</h4>
Expand All @@ -82,7 +82,7 @@ <h4>The Result</h4>
<div id="demo1" class="demo">
<h1>Rainbow</h1>
</div>

</section>

<section id='words-demo'>
Expand Down Expand Up @@ -124,12 +124,12 @@ <h1>WOOOoo!</h1>
</div>
</section>

</article>
<footer>
</article>

<footer>
<p>&copy;2010 Dave Rupert <a href="http://daverupert.com">http://daverupert.com</a>
</footer>
</footer>
</div>

</body>
</html>
</html>
24 changes: 21 additions & 3 deletions jquery.lettering.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,16 +11,34 @@
* Date: Mon Sep 20 17:14:00 2010 -0600
*/
(function($){
function encode(item) {
var letterKlass = '';
var numEntities = [160,161,162,163,164,165,166,167,168,169,170,171,172,173,174,175,176,177,178,179,180,181,182,183,184,185,186,187,188,189,190,191,192,193,194,195,196,197,198,199,200,201,202,203,204,205,206,207,208,209,210,211,212,213,214,215,216,217,218,219,220,221,222,223,224,225,226,227,228,229,230,231,232,233,234,235,236,237,238,239,240,241,242,243,244,245,246,247,248,249,250,251,252,253,254,255,34,38,60,62,338,339,352,353,376,710,732,8194,8195,8201,8204,8205,8206,8207,8211,8212,8216,8217,8218,8220,8221,8222,8224,8225,8240,8249,8250,8364,402,913,914,915,916,917,918,919,920,921,922,923,924,925,926,927,928,929,931,932,933,934,935,936,937,945,946,947,948,949,950,951,952,953,954,955,956,957,958,959,960,961,962,963,964,965,966,967,968,969,977,978,982,8226,8230,8242,8243,8254,8260,8472,8465,8476,8482,8501,8592,8593,8594,8595,8596,8629,8656,8657,8658,8659,8660,8704,8706,8707,8709,8711,8712,8713,8715,8719,8721,8722,8727,8730,8733,8734,8736,8743,8744,8745,8746,8747,8756,8764,8773,8776,8800,8801,8804,8805,8834,8835,8836,8838,8839,8853,8855,8869,8901,8968,8969,8970,8971,9001,9002,9674,9824,9827,9829,9830];
var htmlEntities = ['nbsp','iexcl','cent','pound','curren','yen','brvbar','sect','uml','copy','ordf','laquo','not','shy','reg','macr','deg','plusmn','sup2','sup3','acute','micro','para','middot','cedil','sup1','ordm','raquo','frac14','frac12','frac34','iquest','agrave','aacute','acirc','atilde','Auml','aring','aelig','ccedil','egrave','eacute','ecirc','euml','igrave','iacute','icirc','iuml','eth','ntilde','ograve','oacute','ocirc','otilde','Ouml','times','oslash','ugrave','uacute','ucirc','Uuml','yacute','thorn','szlig','agrave','aacute','acirc','atilde','auml','aring','aelig','ccedil','egrave','eacute','ecirc','euml','igrave','iacute','icirc','iuml','eth','ntilde','ograve','oacute','ocirc','otilde','ouml','divide','Oslash','ugrave','uacute','ucirc','uuml','yacute','thorn','yuml','quot','amp','lt','gt','oelig','oelig','scaron','scaron','yuml','circ','tilde','ensp','emsp','thinsp','zwnj','zwj','lrm','rlm','ndash','mdash','lsquo','rsquo','sbquo','ldquo','rdquo','bdquo','dagger','dagger','permil','lsaquo','rsaquo','euro','fnof','alpha','beta','gamma','delta','epsilon','zeta','eta','theta','iota','kappa','lambda','mu','nu','xi','omicron','pi','rho','sigma','tau','upsilon','phi','chi','psi','omega','alpha','beta','gamma','delta','epsilon','zeta','eta','theta','iota','kappa','lambda','mu','nu','xi','omicron','pi','rho','sigmaf','sigma','tau','upsilon','phi','chi','psi','omega','thetasym','upsih','piv','bull','hellip','prime','prime','oline','frasl','weierp','image','real','trade','alefsym','larr','uarr','rarr','darr','harr','crarr','larr','uarr','rarr','darr','harr','forall','part','exist','empty','nabla','isin','notin','ni','prod','sum','minus','lowast','radic','prop','infin','ang','and','or','cap','cup','int','there4','sim','cong','asymp','ne','equiv','le','ge','sub','sup','nsub','sube','supe','oplus','otimes','perp','sdot','lceil','rceil','lfloor','rfloor','lang','rang','loz','spades','clubs','hearts','diams'];

for (var i = 0; i < item.length; i++) {
var c = item.charAt(i);
var cC = c.charCodeAt();

if (c < "0" || c > "~" || (c > "9" && c < "A") || (c > "Z" && c < 'a')) {
c = htmlEntities[numEntities.indexOf(cC)] || cC;
}

letterKlass += c;
}
return letterKlass;
}

function injector(t, splitter, klass, after) {
var a = t.text().split(splitter), inject = '';
if (a.length) {
$(a).each(function(i, item) {
inject += '<span class="'+klass+(i+1)+'">'+item+'</span>'+after;
inject += '<span class="'+klass+(i+1)+' '+klass+'-'+encode(item)+'">'+item+'</span>'+after;
});
t.empty().append(inject);
}
}

var methods = {
init : function() {

Expand All @@ -37,7 +55,7 @@
});

},

lines : function() {

return this.each(function() {
Expand Down