Tab stops on the web

Somehow the word “tab” is extremely overloaded in tech. We have browser tabs, tabbed interfaces in general, tab keys, we tab between form fields, drink tab water but what I want to tap into talk about in this article are tab stops and how they can be used on the web.

What are tab stops? #

Tab stops, the way you’d use them in a word processor. Their name originating from the admittedly uninspiredly named “tabs” in typewriters that would stop the carriage at certain positions.

While doing my research I stumbled over this incredible video by Technology Connections that focuses on a completely different feature, but also explains the carriage and tab stops in the best way I’ve seen. Did you know many typewriters didn’t have a “1” key so people would just use a lowercase “l” instead and type exclamation marks with an apostrophe and a period? My web accessibility heart is crying.

Anyways, back to the topic of tab stops on the web.

Making tab stops visible #

Insert a tab character (U+0009) in your HTML, and it looks just like a space. In fact, that’s a tab character between “a” and “space”. Boring!

But wait, if you prevent collapsing white-space with the white-space property, tabs become visible. By default, HTML collapses all white-space characters. Setting white-space: pre preserves these characters, including tabs.

Now we can use them
and see, they actually work.

They are not just wide spaces! The width of a single tab stop depends on the text before it.

Interactive demo #

Here’s an interactive demo where you can play around with tab stops and their size:

Two CSS properties make this work. The first is the aforementioned white-space to preserve the tab characters:

white-space: pre;

You could set it on the parent element, but this will preserve all kinds of white space in there. Not want we want. The trick is wrapping just the tab character in a span and applying the magic there. This way the rest of the text behaves normally.

The second property is tab-size, which defines how wide a tab stop is:

tab-size: 8; /* default (8 spaces) */
tab-size: 2rem; /* okay */
tab-size: 50cqw; /* huh? */

The tab-size property accepts any length unit, and here I used cqw which is relative to the container’s width:

.tab-stops-demo {
  container-type: inline-size;
}

tab-stop {
  white-space: pre;
  tab-size: 50cqw; /* Tab jumps to 50% of container width */
}

For this article I’ve built a tiny web component that inserts a tab character and applies all of these styles:

This text <tab-stop></tab-stop> has tab stops.
This <tab-stop size="12"></tab-stop> is a tab stop with custom size.

Ancient technology meets modern CSS!

Don’t try this at home #

Don’t get me wrong, this is extremely experimental. Tabs aren’t responsive in any traditional sense and the alignment can break on smaller screens. I’d have to test how different screen readers treat tab stops. And how do users even input tabs in a CMS when the tab key navigates between fields? Maybe a separate button?

For actual layouts flex or grid are obviously a better pick. For tabular (“consisting of or presented in columns or tables”) data, use a <table>, duh. But maybe there’s a use case for this, who knows?

If I’ll ever find a use case, I’ll document it here:

🦗chirp
🦗
chirp