Feature: character-specific dynamic lettering

[alanomaly]

Hi there,

I love this, but there's one kind of web typography control I always want that this doesn't yet quite support.

In programs like InDesign or Quark, we designers often set a rule for the kerning of particular letter pairs across a whole document. For example, I'm always adding grep styles to InDesign to widen the default kerning in Gill Sans for " W" (space W) and " T", because these are kerned so tightly it looks like a mistake where the space has been missed out.

It would be great to be able to do this with lettering.js. For example, if you have established that in <h2 class="subhead"> on the front page, "O" and "K" aren't kerned tightly enough, that will also be true on any other <h2 class="subhead"> element using the same style on any page. It's more efficient and better long term to write a rule that for any "K" which follows an "O" in a <h2 class="subhead">, than to manually check every heading of every page, count characters for every heading where K follows - and then do this all again each time the copywriters reword the headings.

What I'd love to see is, an 'advanced rules' mode triggered by passing in objects, that sets letter-level classes for specific pairings. This could then be expanded for things other than pairings. Here's what I imagine the input looking like:

$('h2.subhead').lettering( { 
  pairs: [{
     0: { 
      characters: [ 'O', 'D', 'P' ]
    },
     1: {
       characters: [ 'K','B','N','E' ],
       classes: ['medium-tight-kern']
    },
 }
 {
    0: {
       characters: [ ' ' ]
     },
    1: {
       characters: [ 'W, T, V, Y' ],
       classes: ['double-width-kern']
      }
    }
  ],
  individuals: [
    {
      characters: ["!", "?"],
      classes: ['heavy-punctuation', 'double-width-kern']
    },
    {
      characters: ["... "],
      classes: ["clean-ellipsis"]
    },
  ]
});

This would be processed to look through the element, and for any K, B, N or E that follows a O, D or P, it would apply a span with class 'medium-tight-kern', and for any W, T, V or Y that follows a space, it applies the class 'double-width-kern'. medium-tight-kern would be defined in css to use a negative margin to bring the upright of these characters closer to the curve of the preceding character, double-width-kern would increase the gap.

I added some example rules for individual characters or sets of characters as an example of how this feature could easily be expanded to support even more awesome.

If you'd like some inspiration on the sort of rules people apply to characters, pairs, etc in documents for print (and how awesome it would be to have this kind of power on the web) check out this great InDesign plugin and the example markup: http://www.kahrel.plus.com/indesign/kern.html

[davatron5000]

Great feature idea and I've been investigating something like this for CSS ligature support. Ultimately, adding this functionality in would probably make it so lettering.js is not longer a small single feature plugin.

Have you looked into: http://kerningjs.com/ ? It's built by the trustworthy @endtwist, and has some of the pairing features you've mentioned.

You could also look into rolling your own TypeButter.

[mindfullsilence]

Couldn't this be as simple as changing the convention to something like "class=char-w" instead of "class=char1"? Seems it would give a great deal more flexibility and still keep the code nice and small.

Heck, why not both? <span class="char1 char-w">?

For words: <span class="word1 word-foo">

Obviously not something you would need or want to do with lines.

[davatron5000]

@mindfullsilence you end up with irregular characters that won't be valid CSS. Like <span class="word1 word-it's"> so you have to do some work in identifying all the weird characters and escaping them. When lettering.js was first released there was a commit that added some support for this stuff. I'll see if I can take a look at it and possibly fold it in. Another option would be data-char, data-word, data-line or something like that.

[davatron5000]

Closing and merging with #45