Added custom data attributes, character escape function, and character class for kerning pairs

[alienresident]

Changes to LetteringJS

• Copies the text to custom data attributes of the span.
  • Uses the method to create data attribute i.e. data-char, data-word and data-line
• Escapes the text before copying it using an 'escape' function. Makes sure that common HTML attributes are properly escaped: quotation marks, ampersands, less than or greater than symbols.
• Only if the 'char' method is being used it add a addition class with the letter value. Adds a class char - item value i.e. If the letter is a it's adds a class of char-a.
  • you can escape non-alphanumeric characters in css using \ i.e class="char-&" can be styled .char-\& see CSS character escape sequences for more details.
  • This allows you create kerning pairs. You can create kerning pair rules for all the character combos. You won't need to know the content beforehand. Use case could be on a CMS where you won't know the headings beforehand but want strict kerning rules.

Use cases (codepens)

Collection of examples LetteringJS Collection

• Text effects using Custom Data Attributes on characters.
• Layered Type using Custom Data Attributes on words.
• Kerning Pairs using extra class.

Incorporates Ideas/Work from Other Pull Requests

#41 Add a character-specific class to letters
#26 Add data-content='item' attribute to the generated span tags
#6 Added additional classes

I am sure I have missed something and this approach may be overly simplistic.

Thanks,
Mark

[davatron5000]

Thanks for this commit. Really pulling things together. Let's figure this out b/c there's quite a few requests that do the same thing but they've all become a little too complex.

char-* classes

The .char- class seems a bit redundant. It seems you could style kerning pairs with a simple:

/* Edit: Updated example. It's too early. Need more coffee */
[data-char="a"] + [data-char="b"] {
  /* do something */
}

Escaped characters

* Does escaping `&` mean that we'd end up with `char-&` or `char-&`? What's the best behavior? * Is escaping `&` sort of an XHTML thing?

EDIT: Re-re-read and looked at your char-\& example. Suppose that's fine but explaining escaped chars might be sorta difficult to designer'y types.

• Do we need quotes?

Non-latin languages

I think you've solved it the best with a limited escape set, but are we sure this problem is solved fairly well?

Next steps

What might make sense is schedule this for a v0.7 branch. We can even go so far as to write some tests to make sure features, etc are preserved. Sound good?

[alienresident]

Hi Dave,
Thanks for the quick feedback I've made some quick changes.

Removed the .char- classes and the if statement.

Removed the unnecessary .char- classes and the if statement. I also updated the Kerning Pairs demo using the [data-char="a"] + [data-char="b"]. Great idea and it's so elegant.

Escape Characters

The escape function in the JS just escapes the copied text so that it doesn't break the html when copied to the data attribute.
Without the .char- classes you no longer need to do the hacky css escapes .char-\& you can use [data-char="&"] the quotes around escape the & already (without the quotes you need to [data-char=\&]) Here's a codepen demoing the escape characters.

• You DO need to escape the " quote [data-char="\""].
• Need to come up with a solution for space character [data-char=" "] or [data-char="\ "] doesn't work.

Non-latin languages and Next Steps

Needs a lot more testing for non-latin characters!
v0.7 branch makes sense. Let me know how I can help!

[davatron5000]

Need to come up with a solution for space character [data-char=" "] or [data-char="\ "] doesn't work.

It might be a v1 thing since it breaks current functionality, but maybe not-wrapping spaces is a better solution. I know we've run into it not producing the correct results: http://fishslapsababy.com/2013/01/09/stuff-with-friends/ (it's a blog for kids, go easy 😄) might make sense to deprecate wrapping spaces.

EDIT: On second thought, removing space-wrapping may actually break kerning pairs since two words would be next to each other. 😦

[alienresident]

I was breaking the space character!

In the escape function I was breaking the space character!
.replace(/ /g, ' ') was removed from line 20
I was changing space to   (which isn't the right character anyway). Now [data-char="\ "] works. I updated the codepen.

[davatron5000]

Opened up example/index.html

<div id="demo3" class="demo">
  <p>
    <span class="line1" data-line="This is an amazing">This is an amazing</span>
    <span class="line2" data-line=" Revolution in Typography. "> Revolution in Typography. </span>
    <span class="line3" data-line=" The possibilities are endless: "> The possibilities are endless: </span>
    <span class="line4" data-line=" Coloring, Vertical spacing, and Kerning."> Coloring, Vertical spacing, and Kerning.</span>
    </p>
</div>

Looks like we might have to $.trim() some whitespace from in the lettering('lines') method. This actually came up in #42 as well. So let's add that to the milestone. Get that wrapped up in a separate commit.

[davatron5000]

Bookmarking: Escape function from #7 might be useful here for a complete escaping setup (if we still need it in the data-char attribute)

Lettering.js/jquery.lettering.js

Lines 14 to 30 in 80d53da

	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;
	}