What is this INSANE space character??? (google chrome)

Question

This is driving me absolutely, !&&%&$ insane... it defies everything that I can think of.

THIS character right here... " "

In between these quotes... open google chrome and inspect. You will see its a  ... normal right? Now right click and actually view the source of this stack overflow page. It's a regular space... (also, the character I copied was an actual space).

I could understand if it's some kind of rich text editor or something, but in the raw html source is a regular space, so what gives?

Here's just with hitting the space key (which works fine)... " ".

You can even copy it and paste it everywhere and wreak havoc and make chrome put   everywhere. Even though whats copied in your clipboard is just a SPACE.

I have these stupid characters show up everywhere randomly in my website and I have no idea where they come from, or WHY is google converting a SPACE into a nbsp;

I have tried inspecting the actual character code and it's a regular space from all things I can find...

Every single method I try shows it as a NORMAL space... so what gives?

If i use ruby and do " ".ord I get 32. If i do it with the broken space I also get 32.

Please help me im losing my mind.

edit: you can prove this... view source on this page and you will see two empty " " like normal. Now look in console and only the one will be a  , yet the raw source is identical.

Image for people not using chrome (this is looking at this very post via chrome dev tools):

Here's the HTML of the same text you see when you view source... no nbsp to be found.

Solution 1

When I view this page's source in Internet Explorer, or download it directly from the server and view it in a text editor, the first space character in question is formatted like this in the actual HTML:

THIS character right here... " "

Notice the   entity. That is Unicode codepoint U+00A0 NO-BREAK SPACE. Chrome is just being nice and re-formatting it as   when inspecting the HTML. But make no mistake, it is a real non-breaking space, not Unicode codepoint U+0020 SPACE like you are expecting. U+00A0 is visually displayed the same as U+0020, but they are semantically different characters.

The second space character in question is formatted like this in the actual HTML:

<p>Here's just with hitting the space key (which works fine)... <code>" "</code>.</p>

So it is Unicode codepoint U+0020 and not U+00A0. Viewing the raw hex data of this page confirms that:

Solution 2

It turns out the two seemingly identical whitespace characters are not the same character.

Behold:

var characters = ["a", "b", "c", "d", " "];

var typedSpace  = " ";
var copiedSpace = " ";

alert("Typed: " + characters.indexOf(typedSpace));   // -1
alert("Copied: " + characters.indexOf(copiedSpace)); // 4    
alert(typedSpace === copiedSpace);                   // false

JSFiddle

typedSpace.charCodeAt(0) returns 32, the   classic space. Whereas copiedSpace.charCodeAt(0) returns 160, the &#160 AKA   character.

The difference between the two is that a whole bunch of   repeated after one another will hold their ground and create additional space between them, whereas a whole bunch of repeated   characters will squish together into one space.

For instance:

A       B results in: A       B

A       B results in: A B

To convert the   character with a   character in a string, try this:

.replace(new RegExp(String.fromCharCode(160),"g")," ");

To the people in the future like myself that had to debug this from a high level all the way down to the character codes, I salute you.

Solution 3

Don't get yer knickers in a knot. It's one of those special html characters that we old-school love because we was tort rite.

For many of us, we were taught that a sentence started with a capital letter and ended with a full-stop. But the next sentence is separated from this by TWO spaces.

Good-ol'-HTML doesn't like space(s). If you enter a string of words with 5 spaces between them (using an unintelligent editor like MS Notepad, then html shows it with single spaces.

SO, to get it looking like we old-farts like, we end a sentence with '.&NbSp; Next' This puts two spaces after the full-stop, and looks like '.  Next' rather than '. Next'.

Next point is that the real space (32) works as a linebreak, so that's good. EXCEPT for we old-farts, who HATE to see our name split across a linebreak. That annoys us NO-END.

But, of course, that's where &NbSp; comes in handy again. If you enter 'John&NbSp;Brown', then the html thinks that's a single word, and it displays it just rite for we oldies.

How do these &NbSp; thingies get there? Well, good old Word (and I suspect many intelligent editors) see two spaces and output them as a non-breaking space followed by a normal space. And when in Word, you can insert a non-breaking space between John and Brown by the key sequence alt-ctrl-space (sorry, you apple-users)

Lesson-over (with the exception that the term &NbSp; needs to be all lowercase - THIS viewer was even converting it)

Solution 4

This is not actually an answer to the question but instead a tool that can be used to detect this special white space in the html of the pages of a website so we can proceed to locate and remove it.

The tool what basically does is:

1. Fetches the content of a URL
2. Looks for occurrences of chr(194).chr(160) in the HTML contents
3. Replaces and highlights the ocurrences with something more visible

This way you can actually know where the spaces are and edit your page properly to remove them.

The online version of the tool can be found here:

http://tools.heavydots.com/nbsp-space-char-detect/

A working example can be seen with the url of this question that contains one ocurrence:

http://tools.heavydots.com/nbsp-space-char-detect/?url=http%3A%2F%2Fstackoverflow.com%2Fquestions%2F26962323%2Fwhat-is-this-insane-space-character-google-chrome&highlight=1&hstring=%7BNBSP%7D

There's a Github repo available if someone wants the code to run it locally:
https://github.com/HeavyDots/nbsp-space-char-detect

Hope someone finds it useful, for any feedback there's a comments section on the tool's page.

Updated 5th of January 2017

At our company blog we just wrote a funny post about this annoying white space. You're invited to drop by and read it! :-)

http://heavydots.com/blog/when-the-white-space-became-a-beast

Solution 5

It is a non breaking space.   is the entity used to represent a non-breaking space. It is essentially a standard space, the primary difference being that a browser should not break (or wrap) a line of text at the point that this   occupies.

Most likely the character is being inserted by your HTML Editor. Could you give a more specific example in context?

View more solutions

Comments

[Andrew Shepherd]

When you say "copy and paste", are you copying-and-pasting from the browser window or the F12 developer tools? It copies from the browser window fine. And if you are copying raw HTML, does it matter if the browser went and converted it to nbsp;? It renders the same.

[Tallboy]

If i look in the HTML it's not in the source. look in the HTML of this SO thread and it will show up as a regular space. So in the raw html is two SPACES, yet in console, one of them is a nbsp

[Dylan Madisetti]

Maybe this has to do with your IDE? Weird linting programs can cause subtle unexpected differences. What does the raw source look like? Or is nbsp; only in inspector?

[Tallboy]

This is chrome 38.0.2125.122, and the image you see from my original post is chrome dev tools. I'm using vim although that shouldnt matter, as once its in the clipboard you can copy and paste it other places and trigger chrome to put a nbsp (thats how i got it into this my SO question body text). If you view source on the HTML of this very page you will see its not in the source, yet it shows up in chrome dev tools

[Mark Ransom]

When I view the source of this question, I get " ".   is a no-break space character. I don't know why I'm seeing something different than you.

[Bob Stein]

Compounding Chrome's UX crimes, when you inspect the first " " and it shows " " if you right-click | Edit text it morphs into " "! Missing the chance to come clean and do the right thing and show " ". Because Unicode isn't hard enough.

[wp78de]

Sending text before the HTTP header might also cause this issue.

[Tallboy]

I know what the definition of what it is. Now look at the HTML source of this SO thread and it's not there... so how did it get there?

[tiftik]

@Tallboy Save the HTML file, open it with Notepad, copy and paste that space to rishida.net/uniview . Apparently it's actually a nbsp and Chrome's source viewer is replacing it with a regular space.

[Tallboy]

I don't trust google chrome save as or inspector, so i use CURL and its actually a space. So how does chrome differentiate? (the two are identical)

[tiftik]

@Tallboy How did you decide they are identical? Because they are not. I used wget and gedit to check again and it's definitely a nbsp.

[Tallboy]

i used curl http://stackoverflow.com/questions/26962323/what-is-this-ins‌​ane-space-character-‌​google-chrome/269625‌​33?noredirect=1#comm‌​ent42464140_26962533‌​... hmmm

[Tallboy]

Mmmm... very interesting. I can't believe I've never encountered this before. Thanks for the great explanation.

[Andrea]

Really interesting! Any other "space that is not just a space" we all should know about?

[Remy Lebeau]

@Andrea see Unicode Whitespace on Wikipedia.

[Bob Stein]

"Chrome is just being <scare quotes>nice</scare quotes> and re-formatting it as  ". I'm feeling repressed.