[css-pseudo-4] `::nth-letter` pseudo-element

I'd like to propose that there be an ::nth-letter pseudo-element in CSS.

I've written about it on my website.

Previous calls:

• 2003, Anne van Kesteren
• 2011, Trent Walton
• 2011, Chris Coyier

The last time this came up, @frivoal said:

This sits at the uncomfortable intersection of useful and freaking hard to implement.

But also:

As for ::nth-letter, I am not aware of any substitute, but neither am I aware of strong use cases.

I would argue that the strong use cases are being demonstrated every day by any site using these JavaScript libraries:

• Lettering.js
• Splitting.js

Or these logo examples in the wild:

• Patterns Day
• Ampersand

...along with most of these variable font demos.

Whether using HTML, or using JavaScript libraries, the only way to target specific letters is to wrap them in uneccessary elements. This can cause accessibility issues—a logo being read out letter-by-letter, for example, rather than as a whole word.

I understand that this would be hard to implement (given that ::first-letter was hard enough) but I think the use-cases and accessibility benefits could outweigh the potential difficulty.

Start with the CSS Pseudo-4 draft linked in the issue and review the prior discussion in issue 745. Compare the proposed ::nth-letter use cases with the implementation concerns and accessibility rationale described here; done would require a resolved specification direction for the feature.