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
Top comments (9)
I encountered   when I started using WordPress, you give enter a new line in the visual editor in code editor you will see   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  ?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!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
 
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.Lol, it's all hilarious. I just noticed that you can't even start a google search with a space 🤓
Correct we can't Google a blank space 😂.
I used
a lot in the email dev world. It keeps empty cells from collapsing, even if it has a set height.oh good to know! I have never done any email layout-related stuff before. Thanks!
Glad to hear! Where are you going to use it? So curious!
Wow what a great timing!