Tackling HTML, One Evil Character at a Time

DIY Sprocket Solutions

Adding to the list of “things I didn’t know about before, but now I do –and so should you” is a little HTML something that goes by the name of “ ”.  It is what’s called a “non-breakable space” in HTML.  As a very wise man explained to me –they appear automatically in text when you double space after a period (like we were all taught to do in typing class).  In your text, they will display as spaces and that is all well and good, except for one thing: they are non-breakable. What does this mean to you, you ask?  It means a bit of a headache.  It also means that the text cannot wrap or be broken up into separate lines.  You may be wondering, “Why do these “ ” even exist?” They exist to irritate me I think.

Truly they exist because, in HTML, multiple spaces are automatically collapsed into one space.  Then the only way to have two or more spaces appear is to be clear about it and thus you need a special code.  Presto! “ ” was born into the HTML world to spread havoc.

(Yes, spread was intended as a pun.)  

What does it look like in action?  Well folks, have you ever seen content on a line that has a space in front of it?  It sort of makes the left hand margin kinda ragged?  That is a “ ” character getting in your way.  Another thing the evil “ ” character does is it causes blank lines to appear between paragraphs.  The horror!  When you hit enter and create a new paragraph all is good.  However, when you copy and paste from Word, you are bringing along extra information and that gets translated into margins, extra lines, etc.  You have to then go into HTML view and clean stuff up that doesn’t belong to get things straightened up and looking the way my bosses’ OCD expects… 

So, what do you have to do to clean it up?  First, you go into the document and look for blank lines at the top and bottom of the content and remove them.  Then, you copy the HTML into the text editor and do a search and replace on “ ” with “” (that is nothing-ness, you are replacing the evil character with nothing) thus removing it.  *You can also do this in Word by searching for double space “  “ and replacing it with a single space “ “ (minus the quotes). You may need to run this search more than once to pick up the dreaded, although infrequent, triple space as well. 

Once you’ve searched and replaced all your evil characters with appropriate ones, make sure that the end result isn’t a crazy modge podge.  I got my first taste of fighting crazy HTML characters about a week or two ago.  I went in and searched for “ ”.  I replaced those with “”.  It worked, all fine and dandy; but, I did have a few things that moved and shaked around that I went back and tweaked.  A space here, a line break there, etc.

This is the first HTML dragon I’ve had to slay.  Unless of course you count numbered lists when you copy and paste from Word.  But, that is for another day my friends.

What has been your most frustrating HTML code/character/etc. to break so far?  Which is the most tedious for you?  Do you know someone who is guilty of funky lines on their page?  If so, pass this along.  Tweet us to your friends so that the “crazy line breakers, weird spacers, can’t quite get this right” people of the world can finally figure this out.   

Breanne BannonBreanne Bannon

Breanne is a Content Writer, Social Media Marketeer, and Sales Associate for Sprocket Websites.

Other posts by Breanne Bannon

Contact author Facebook page Twitter Linked In Google Plus