CSS space-size

Ah, the size of space! No, not the great visualisation by Neal Agarwal.

— Hubble telescope image (Source: NASA)

In an ever-growing universe, I guess it’s tough for scientists to calculate how big space is, but that’s beside the point, because this article is dedicated to the new CSS space-size property, which finally gives us a way to tweak indentation when space characters instead of tabs are in play. Contrary to tab-size, it comes with some (necessary) limitations, as it only affects leading spaces. So nothing changes for people who still think that a gap the size of two spaces should come after the period at the end of a sentence, but I digress.

At the time of writing, no browser has support for space-size, but here’s how it will eventually work:

pre:has(code) {
	space-size: 2;
	/* Inform user agent that two spaces are used for indentation. */
}

While it looks as if we are just reusing the tab-size syntax, the behavior is actually quite different: We specify a positive number to tell the browser how many spaces are used for indentation in the HTML. Put simply, the number states how many leading spaces represent a single tab character. That’s good news for two reasons:

1. Without that number, the browser would need to perform some heuristic exercise to guess the intended indentation, which could lead to undesirable results.
2. Setting a number in the first place means we opt in to “space-to-tab conversion”, whereas the default none implies we don’t.

For the actual indentation we still rely on tab-size’s value, which comes with the bonus that indentation cannot get out of sync when both tabs and spaces are used to indent a line in the same HTML file.

By the way, when not set, tab-size defaults to eight, so in most cases it’s probably best to declare these properties in tandem, like so:

pre:has(code) {
	space-size: 2;
	tab-size: 4;
	/* Inform user agent that two spaces are used for indentation,
	   which should then occupy the width of four characters. */
}

That’s about it, now we’ll have to wait for green lights on caniuse.com.

---

On this day, one year ago, I wrote in my Digital gardens editorial:

Related: I don’t give a damn about April Fools’ Day.

Apparently I’ve changed my mind, because today I finally did pull a prank, as there is clearly no space-size on the horizon. Sorry for wasting everybody’s time, it won’t happen again.

Make sure to use tabs instead of spaces, there’s a reason we have a dedicated Unicode character. TL;DR, tabs are superior.