- From: Jeremy Keith via GitHub <sysbot+gh@w3.org>
- Date: Fri, 12 Oct 2018 17:19:23 +0000
- To: public-css-archive@w3.org
adactio has just created a new issue for https://github.com/w3c/csswg-drafts: == [css-pseudo-4] `::nth-letter` pseudo-element == I'd like to propose that there be an `::nth-letter` [pseudo-element](https://drafts.csswg.org/css-pseudo-4/) in CSS. [I've written about it on my website](https://adactio.com/journal/14408). Previous calls: * [2003, Anne van Kesteren](https://annevankesteren.nl/2003/09/from-a-markover-to-pseudo-elements) * [2011, Trent Walton](https://trentwalton.com/2011/01/18/controlling-web-typography/) * [2011, Chris Coyier](https://css-tricks.com/a-call-for-nth-everything/) [The last time this came up](https://github.com/w3c/csswg-drafts/issues/745), @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](http://letteringjs.com/) * [Splitting.js](https://splitting.js.org/) Or these logo examples in the wild: * [Patterns Day](https://patternsday.com/) * [Ampersand](https://2018.ampersandconf.com/) ...along with most of [these variable font demos](https://codepen.io/mandymichael/). 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. Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/3208 using your GitHub account
Received on Friday, 12 October 2018 17:19:25 UTC