CSS :nth-letter()

Adobe is working on implementing :nth-letter() in Webkit:

The desired syntax was :nth-letter(), where the argument would (ideally) take the same values that :nth-child() can (e.g, a simple index, even/odd, or an expression like 2n+4).

This code:

<p id="sentence">My fourth letter is awesome.</p>
#sentence:nth-letter(3) {
    color: red;font-family: "Comic Sans MS";
    font-size: 3em;
    font-weight: bold;
}

Results in this:

Whenever a final implementation lands, along with :nth-word() and the like, I guess we can say goodbye to lettering.js

Adobe WebKit Hackathon Summary →