Tim Etler

The space character you didn't know about

March 08, 2014

You probably know about  , which stands for non-breaking space. The problem with the non-breaking space character is that the browser will avoid wrapping the line on those characters. If you have a list such as foo, bar, buzz, that entire sequence will be treated as one word, which means it might display like this:

Hello foo, bar, buzz

when you want to display it like this:

Hello foo, bar, buzz

There’s no named html entity for a breaking space character, so we have to use a unicode character code instead. We can’t use the ASCII space character, hex code   either, as that will be treated like a normal space and be stripped out using the same rules.

Instead we need to use a punctuation space, to indicate that the space is not part of the code, and should only be interpreted as part of the text. The unicode hex range 2000–206F is reserved for general punctuation.

The space we want is  , a normal punctuation space. There are many other spaces of varying width, or even no width. However, if you don’t want to explicitly specify the width, and just want the normal space used elsewhere, you should use the punctuation space. A punctuation space is specifically supposed to represent the width of a period. In my tests over multiple fonts, the punctuation space is the same width as the ASCII space.

Of course, you should still only use this space when you need an explicit space that is part of a sentence’s puctuation, and not for layout purposes, in which case you should use CSS. If you find yourself using multiple spaces, that’s a good indication you should either modify the style, or use a space of a greater width instead. I found explicit spaces useful in Jade, where each element has its own line, and I want a space at the end of a line to be visible.

tl;dr, use