CS Trivia#8: What is & nbsp; ?!

edit: I know that the title contains a typo. If you're curious why, jump to the "Typing it out" section.

Welcome to my little CS trivia series. Every week I post a new trivia piece.

Today's question is...

What is   ?!

In all honesty, the first time I saw this during bootcamp, I really thought it was some encoding bug. Later I noticed it being a solution proposed on StackOverflow to some problem and that really baffled me. First of all —- what is it? Secondly, why is it so odd? And finally, who remembers such a line of nonsensical characters?

The non-breaking space

These letters are really just a minimalistic version of "non-breaking space", which is a space character that prevents an automatic line break at its position. So, really, it's just another empty space but with different properties.

Typing it out

In fact, you can type the character with your own keyboard by pressing option + space on Mac or Ctrl+Space on Windows. It will look like space but its encoding will be different.
When it comes to HTML you can use the names of this whitespace symbol by either writing   or  . By the way, see what happens when I try to google it:

As you see, Google interprets   as non-breaking space and — it cannot search for it. However, if you google  , you will see plenty of results. The reason why Google "breaks" on   is because it is a so-called "decimal HTML entity" whereas   is the same character in "human" version of the html, which Google doesn't speak.

Another example from just a minute ago: I just needed to change the title of this post after publication because...

... otherwise the blog post title on the dev page flicking between   and a visually empty space, which is because markdown and html view   as empty space. I know it contains a typo. I know.

The difference between   and ""

The   and an empty string ("") are different. For instance, in HTML, trailing empty strings will collapse into just one, whereas non-breaking space will always print in the amount you desired. See here:

<span>Word1&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Word2</span>
gets translated to:
Word1      Word2

whereas <span>Word1 Word2</span> (6 spaces in markdown version)
gets translated to:
Word1 Word2

Now, that sounds like an easy fix for all the styling and centering problems but don't give in to the temptation.

When not to use  ?

Although you might be tempted to add extra space to your HTML elements by adding the non-breaking space, you should not do that. Instead, resort to padding or margin properties of CSS. Otherwise, you will run into problems when trying to make your page responsive.

When to use  ?

Use it as its design intended: between two words that should not have a line break inserted between them by word wrapping. As explained by Alenanno on StackExchange:

1. It is advisable to use a non-breaking space (also known as a hard space) to prevent the end-of-line displacement of elements that would be awkward at the beginning of a new line:
   • in expressions in which figures and abbreviations (or symbols) are separated by a space (e.g. 17 kg, AD 565, 2:50 pm);
   • between the date number and month name (e.g. 3 June or June 3);
   • in other places where breaking across lines might be disruptive to the reader, especially in infoboxes, such as £11 billion, June 2011, 5° 24′ 21.12″ N, Boeing 747, after the number in a numbered address (e.g. 123 Fake Street) and before Roman numerals at the end of phrases (e.g. World War II and Pope Benedict XVI).
2. A hard space can be produced with the HTML code   instead of the space bar; 19 kg yields a non-breaking 19 kg.
3. A literal hard space, such as one of the Unicode non-breaking space characters, should not be used since some web browsers will not load them properly when editing.
4. Unlike normal spaces, multiple hard spaces are not compressed by browsers into a single space.
5. A non-breaking space should be used before a spaced en dash.

Cover photo by Felix Mittermeier from Pexels