Question

Is there some css trick to allow me to transform whitespace characters like:

{[SPACE][SPACE][SPACE][SPACE]function(){} }

into something like this:

{. . . . function(){}

The point is to display invisible characters in code blocks.

However it should not wrap the spaces in some elements, or use background-images or something like that.

Answer 1

By default, consecutive whitespace characters collapse to a single space in HTML. So you would need to use pre or something equivalent to see several consecutive spaces in the first place.

CSS isn’t really supposed to make characters displayed as something different from what they are. But technically, you could edit a font so that it contains some graphic character in the slot for space, and use that font via `@font-face’.

But it would be much more sensible to replace the spaces by visible characters, either server-side or client-side.