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

#html #webdev #todayilearned #codenewbie

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      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:

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).

A hard space can be produced with the HTML code instead of the space bar; 19 kg yields a non-breaking 19 kg.

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.

Unlike normal spaces, multiple hard spaces are not compressed by browsers into a single space.

A non-breaking space should be used before a spaced en dash.

Cover photo by Felix Mittermeier from Pexels

Oldest comments (9)

mayank joshi • Apr 15 '20 • Edited

I encountered &nbsp when I started using WordPress, you give enter a new line in the visual editor in code editor you will see &nbsp written.

But, I understood it's actual functionality when I was trying to add new line(lots of space) in my twitter bio.

'
As you see, Google interprets as non-breaking space and — it cannot search for it.'

I didn't understand this. Why google is doesn't show results for   when it displays results for &nbsp?

Sylwia Vargas • Apr 15 '20

Ah, thank you for the feedback! I'll explain it better in the post.
The reason why Google "breaks" is because   is decimal HTML entity whereas   is the same character in "human" version of the html, which Google doesn't speak. Hope this clarified it!

mayank joshi • Apr 15 '20 • Edited

I too want to add something,

I noticed an interesting behaviour, when I wrote   in the dev.to markdown(without the enclosings), and did the preview, nothing was visible in the comment screen area. But in text editor I was able to type it.

Do try this.

Same goes for Google, if you add a space in Google search bar and try searching for it, Google won't search, but if you will enter &#160 this will be visible but when submitted, it will be converted into a blank space. And google can't search for blank space, because there is nothing on the search bar after submitting it.