Caution: Cut & Paste Can Create Invisible Non-Breaking Spaces
“Be Careful what you paste” or
“How I learned about the Option+Space on Mac” or
“Firefox? Again?”
Here’s what happened:
HTML code from Visual Studio was pasted into Skype on Windows. I received the HTML code message and copied it from Skype into Coda on Mac. I went about my business.
The login Element we’re working on somehow got extra top & bottom padding. An hour of CSS into removing this, I said, “Maybe it’s a Visual Studio thing.” So I stripped all the classes and IDs down to just the bare HTML element tags. Padding still there.
Odd, it’s not inheriting anything in the CSS, but I can select it? This is moving from annoying to frustrating.
^ First clue: it behaves as content, but it’s not in the source code.
Okay, then; we’re going to have to do this the old fashioned way.
I started deleting whole sections of code, refreshing and seeing if that made any difference. I would undo the delete (thus restoring the wonky white-space characters) and delete even more code. STILL THERE!
^ Wonky white-space remained.
Then I saw it. Apparently, Firebug doesn’t show these hidden white-space characters outside of properly nested div tags. When all of the tags were finally gone, and there was only a line of white-space between the opening & closing DIV tags, and they were the only content, THEN they finally appeared.
They manifested themselves as characters in the HTML!
^ Now appearing: Hidden characters!
I went back and examined at the hidden characters. They looked like subscript carrot, or like one wave of a spell-check squiggle.
^ Hindsight: 20/20.
Two things:
- Viewing the source doesn’t help. They are invisible even in firebug.
- Someone is taking liberties. The OS? Firefox? Not sure.
^ Invisible in the source code, but only appear in Firebug if they are a leaf node of the DOM (final descendant).
The programs are all doing what they’re supposed to be doing. Same with the operating systems. I pasted from email, pdf or other desktop-published documents into Coda many times before. And the results seemed to be just plain ASCII text. So this came as a bit of a surprise. Now I know it’s Unicode, and am all the wiser.
I have no excuse for Firefox’s interpretation of these characters. Anyone care to weigh-in on this behavior?