Add a character-specific class to letters

[alertmybanjos]

It can be useful to kern every instance of certain letter combinations. With these extra classes, you can apply broad css rules. For example, to consistently tighten the space between the characters "A" and "W" in headlines, you could use the css rule .char-a + .char-w { margin-left:-2px; }

[davatron5000]

Looks pretty good. Have you put any thought into non-Latin languages?

– Dave

On Sep 5, 2013, at 10:18 PM, Jason Tremblay notifications@github.com wrote:

It can be useful to kern every instance of certain letter combinations. With these extra classes, you can apply broad css rules. For example, to consistently tighten the space between the characters "A" and "W" in headlines, you could use the css rule .char-a + .char-w { margin-left:-2px; }

You can merge this Pull Request by running

git pull https://github.com/alertmybanjos/Lettering.js master
Or view, comment on, or merge it at:

#41

Commit Summary

Add a character-specific class to enable kerning combinations
File Changes

M jquery.lettering.js (7)
Patch Links:

https://github.com/davatron5000/Lettering.js/pull/41.patch
https://github.com/davatron5000/Lettering.js/pull/41.diff

[alertmybanjos]

I hadn't thought about non-latin characters when I started tweaking. After submitting the pull request though, I went back and looked at some of the older issues and realized this enhancement idea has come up before, several times. After doing a little research, I'd say there are a few options:

1. simply allow non-latin characters in the class names, as described here: http://css-tricks.com/unicode-class-names/
2. somehow encode non-latin characters and construct a class name from that — either using arrays as in Full character support #7 from three years ago, or using a native function like encodeURIComponent()

I haven't tested the first option thoroughly and couldn't quickly find info about browser support for unicode in css/html, so I'm not sure if it's viable.

But the second would work well enough, and I'd like to at least have that in my branch.

[alertmybanjos]

Now adding classes using the encodeURIComponent() function for anything other than alphanumeric characters (or the special case of single-quote character). I stripped out the '%' from the encoded characters to keep the class names valid.

For example:

• z gets class char-z
• $ gets class char-24
• ä gets class char-C3A4
• あ gets class char-E38182

I don't really like that char-24 is so similar to char24... that could be a little confusing.

[davatron5000]

Hrmmm....
char24 and char-24 would get confusing. And char-E38182 seems less than optimal since I doubt most people know the unicode address of various characters.

Maybe data-char attributes are a better way? We'd still have to just have to escape/replace a few characters ", ', /, \, and space (?) probably. This gets us a bit into the security realm, not the funnest place on earth.

[alertmybanjos]

Per your suggestion, I messed around with data-char attributes. If I'm reading the spec correctly, the only characters that need special treatment are the ampersand and the double-quote. (see http://www.whatwg.org/specs/web-apps/current-work/multipage/syntax.html#attributes-0)

The attributes get added like so:

• data-char="z" — latin characters are ok
• data-char="あ" — unicode characters are ok
• data-char=" " — the space is ok
• data-char="' — single-quotes are ok
• data-char="\" — backslash is ok
• data-char="&" — ampersands get encoded
• data-char='"' — double-quotes must be enclosed in single quotes

The corresponding CSS selectors look like:

• [data-char="z"]
• [data-char="あ"]
• [data-char=" "]
• [data-char="'"]
• [data-char="\\"] — backslash must be escaped
• [data-char="&"]
• [data-char="\""] — double-quotes must be escaped

I'm wondering how compatible this is... i.e. will non-latin characters only work if the character encoding is declared -- @charset "UTF-8"; -- in the css file?

[davatron5000]

Going to merge this into #45. Thanks for your original commits @alertmybanjos. Appreciate it.