Tab stops on the web

Did you know that you can use tab stops in HTML? In this article I want to explore this ancient typographic concept and see how it can be used on the web.

What are tab stops?

Somehow the word “tab” is extremely overloaded in tech. We have browser tabs, tabbed interfaces in general, tab keys, we tab between form fields… but what I want to talk about are tab stops.

Tab stops. The way you’d use them in a word processor; its name originating from mechanical gears in typewriters that would stop the carriage at certain positions when the tab key is pressed.

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 how they behave.

And wow, 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: