Tags: letters

26

sparkline

Saturday, October 6th, 2018

An nth-letter selector in CSS

Variable fonts are a very exciting and powerful new addition to the toolbox of web design. They was very much at the centre of discussion at this year’s Ampersand conference.

A lot of the demonstrations of the power of variable fonts are showing how it can be used to make letter-by-letter adjustments. The Ampersand website itself does this with the logo. See also: the brilliant demos by Mandy. It’s getting to the point where logotypes can be sculpted and adjusted just-so using CSS and raw text—no images required.

I find this to be thrilling, but there’s a fly in the ointment. In order to style something in CSS, you need a selector to target it. If you’re going to style individual letters, you need to wrap each one in an HTML element so that you can then select it in CSS.

For the Ampersand logo, we had to wrap each letter in a span (and then, becuase that might cause each letter to be read out individually instead of all of them as a single word, we applied some ARIA shenanigans to the containing element). There’s even a JavaScript library—Splitting.js—that will do this for you.

But if the whole point of using HTML is that the content is accessible, copyable, and pastable, isn’t a bit of a shame that we then compromise the markup—and the accessibility—by wrapping individual letters in presentational tags?

What if there were an ::nth-letter selector in CSS?

There’s some prior art here. We’ve already got ::first-letter (and now the initial-letter property or whatever it ends up being called). If we can target the first letter in a piece of text, why not the second, or third, or nth?

It raises some questions. What constitutes a letter? Would it be better if we talked about ::first-character, ::initial-character, ::nth-character, and so on?

Even then, there are some tricksy things to figure out. What’s the third character in this piece of markup?

<p>AB<span>CD</span>EF</p>

Is it “C”, becuase that’s the third character regardless of nesting? Or is it “E”, becuase techically that’s the third character token that’s a direct child of the parent element?

I imagine that implementing ::nth-letter (or ::nth-character) would be quite complex so there would probably be very little appetite for it from browser makers. But it doesn’t seem as problematic as some selectors we’ve already got.

Take ::first-line, for example. That violates one of the biggest issues in adding new CSS selectors: it’s a selector that depends on layout.

Think about it. The browser has to first calculate how many characters are in the first line of an element (like, say, a paragraph). Having figured that out, the browser can then apply the styles declared in the ::first-line selector. But those styles may involve font sizing updates that changes the number of characters in the first line. Paradox!

(Technically, only a subset of CSS of properties can be applied to ::first-line, but that subset includes font-size so the paradox remains.)

I checked to see if ::first-line was included in one of my favourite documents: Incomplete List of Mistakes in the Design of CSS. It isn’t.

So compared to the logic-bending paradoxes of ::first-line, an ::nth-letter selector would be relatively straightforward. But that in itself isn’t a good enough reason for it to exist. As the CSS Working Group FAQs say:

The fact that we’ve made one mistake isn’t an argument for repeating the mistake.

A new selector needs to solve specific use cases. I would argue that all the letter-by-letter uses of variable fonts that we’re seeing demonstrate the use cases, and the number of these examples is only going to increase. The very fact that JavaScript libraries exist to solve this problem shows that there’s a need here (and we’ve seen the pattern of common JavaScript use-cases ending up in CSS before—rollovers, animation, etc.).

Now, I know that browser makers would like us to figure out how proposed CSS features should work by polyfilling a solution with Houdini. But would that work for a selector? I don’t know much about Houdini so I asked Una. She pointed me to a proposal by Greg and Tab for a full-on parser in Houdini. But that’s a loooong way off. Until then, we must petition our case to the browser gods.

This is not a new suggestion.

Anne Van Kesteren proposed ::nth-letter way back in 2003:

While I’m talking about CSS, I would also like to have ::nth-line(n), ::nth-letter(n) and ::nth-word(n), any thoughts?

Trent called for ::nth-letter in January 2011:

I think this would be the ideal solution from a web designer’s perspective. No javascript would be required, and 100% of the styling would be handled right where it should be—in the CSS.

Chris repeated the call in October of 2011:

Of all of these “new” selectors, ::nth-letter is likely the most useful.

In 2012, Bram linked to a blog post (now unavailable) from Adobe indicating that they were working on ::nth-letter for Webkit. That was the last anyone’s seen of this elusive pseudo-element.

In 2013, Chris (again) included ::nth-letter in his wishlist for CSS. So say we all.

Monday, June 11th, 2018

Text Effects - a Collection by Mandy Michael on CodePen

Mandy’s experiments with text effects in CSS are kinda mindblowing—I can’t wait to see her at Ampersand at the end of the month!

Saturday, May 12th, 2018

Segmented type appreciation corner

Marcin built this lovely little in-browser tool to demonstrate how segmented type displays work at different sizes.

Wednesday, March 21st, 2018

90 Minutes | Type Supply

Tal Leming’s thoroughly delightful (and obsessive) account of designing the 90 Minutes typeface for U.S. Soccer.

FIFA has strict regulations that govern the size and stroke weight of numbers and letters used on official match uniforms. This made me unbelievably paranoid. I had a nightmare that one of the national teams would be set for kickoff of an important match and the referee would suddenly blow the whistle and say, “Hey, hey, hey! The bottom stroke of that 2 is 1 mm too light. The United States must forfeit this match!”

Thursday, July 27th, 2017

Berlin Typography – Text and the City // Buchstaben und die Stadt

A blog dedicated to documenting the letterforms on display in Berlin.

Wednesday, December 28th, 2016

Google Noto Fonts

Google’s Noto (short for no-tofu; tofu being the rectangle of unicode sadness) is certainly ambitious. It has glyphs from pretty much every known alphabet …including Ogham and Linear B!

Thursday, June 23rd, 2016

Typography for User Interfaces | Viljami Salminen

The history and physiology of text on screen. You can also see the slides from the talk that prompted this article.

Tuesday, July 28th, 2015

Library of Babel

This is simply wondrous! A microcosm of Borges’s story made real on the world wide web.

We do not simply generate and store books as they are requested — in fact, the storage demands would make that impossible. Every possible permutation of letters is accessible at this very moment in one of the library’s books, only awaiting its discovery.

Tuesday, March 31st, 2015

Ari Weinkle — Feelers

By far the creepiest type experiment I have ever seen.

Sunday, March 2nd, 2014

CSS A/Z

The alphabet illustrated with CSS.

Thursday, December 22nd, 2011

Typography Effects with CSS3 and jQuery

Most of these are pretty over the top but they’re good proofs of concept.

Monday, September 26th, 2011

the average font - a set on Flickr

Take all the fonts on your operating system, superimpose them, and whaddya get? This.

Wednesday, May 25th, 2011

Fuck yeah Keming!

A celebration of horrendous kerning all over the internet.

Saturday, January 29th, 2011

Saturday, August 14th, 2010

The origins of abc | I love typography, the typography and fonts blog

A wonderful history of our alphabet. Set aside some time to read this.

Wednesday, August 4th, 2010

Interesting Letterhead Designs | Letterheady

A fantastic blog of letterheads. Some of the typographic choices are perfect.

Wednesday, November 11th, 2009

Phonetikana - the johnson banks thought for the week

An interesting experiment in making Katakana self-describing.

Wednesday, April 15th, 2009

we love typography. a place to bookmark and savour quality type-related images and quotes

An editorially managed collection of type-related goodies: "Think of it as FFFFound for all things type, typography, lettering, & signage."

Thursday, July 10th, 2008

Handwritten Typographers

Cameron asked some type creators for samples of their handwriting. They obliged. Compare the handwriting to the fonts.

Friday, June 20th, 2008

Knitting Letters : A to Z

An abecedarium of knitted letters.