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.

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 custom data attributes, character escape function, and character class for kerning pairs #45

Open
wants to merge 8 commits into
base: master
Choose a base branch
from

Conversation

alienresident
Copy link

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

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

Added `item` to "data-character" a custom HTML 5 data attribute of the span. This can then be called by pseudo elements using `content: attr(data-character);`.

This works for my [use case](http://codepen.io/alienresident/pen/mhqrj) but I think it would be more useful to add `data-{method}="'+item+'"`. So you could have data-character, data-word, data-line attributes depending on what method(s) you used. I am not sure how to do this.... 

It may also be useful to call this only if you want this by calling an additional argument. 

Thoughts?
Added +item+ as a custom data attribute for pseudo element magic. Added
+item+ as a class so you can create kerning pair rules
If statement to figure out the method. If it's 'char' it's adds a class
char - item value i.e.  If the letter is 'a' it's adds a class of
'char-a'.
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.
@davatron5000
Copy link
Owner

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?

From Dave Rupert's comment of the PR we don't need the extra char-* we
can use [data-char="*"] instead. Brillant!
@alienresident
Copy link
Author

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
Copy link
Owner

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
Copy link
Author

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
Copy link
Owner

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
Copy link
Owner

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

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants