Beware Gratuitous Line Breaks In Code Listings

Displaying code for complex objects - multimedia (audio / video), and also photographs (thumbnail / full-size) - takes a lot of browser window space. Generally, more than a single line of text is required. Some browsers can't make line breaks on their own, and if I display a single, unbroken line of code, the code will run off the end of the post column, through the sidebar, into the background margin of the blog, and off the end of the screen.

This creates two problems.

• It makes the code hard to read, with some code not at all visible.
• With some browsers, it can even cause the post column, or the sidebar column, to end up at the bottom of the page.

No good for anybody, that.

Whenever I display such code in my blogs, I take care to insert lots of extra line breaks. Adding line breaks makes the code easier to read, which is good. But it creates another problem. If you copy the code from the browser window, you'll copy a lot of extra line breaks, and the code won't always work.

Here are two examples of code.

First, code that absolutely won't work. Here we have lots of line breaks, in code which I copied from an online discussion.

<a href="http://www.gabcast.com/index.php?
a=episodes&b=play&id=10444&cast=30810" target="_BLANK">Caracas FC Blog
#2 - Caracas FC Audio</a><br><br><object classid="clsid:d27cdb6e-
ae6d-11cf-96b8-444553540000" width="150" height="76" codebase="http://
fpdownload.macromedia.com/pub/shockwave/cabs/flash/
swflash.cab#version=8,0,0,0"><param name="movie" value="http://www.gabcast.com/mp3play/mp3player.swf?
file=http://www.gabcast.com/casts/10444/episodes/1180193061.mp3
&config=http://www.gabcast.com/mp3play/config.php?ini=mini.0.l"/><param
name="wmode" value="transparent" /><param name="allowScriptAccess"
value="always" /><embed src="http://www.gabcast.com/mp3play/
mp3player.swf?file=http://www.gabcast.com/casts/10444/episodes/
1180193061.mp3&config=http://www.gabcast.com/mp3play/config.php?
ini=mini.0.l" allowScriptAccess="always" wmode="transparent"
width="150" height="76" name="mp3player" type="application/x-shockwave-
flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></
embed></object>

Next, code that might work, with less line breaks. Do you see the difference?

<a href="http://www.gabcast.com/index.php?a=episodes&b=play
&id=10444&cast=30810" target="_BLANK">Caracas FC Blog #2 - Caracas FC Audio</a> <br /> <br /> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="150" height="76" codebase="http://fpdownload.macromedia.com/pub/shockwave/
cabs/flash/swflash.cab#version=8,0,0,0"> <param name="movie" value="http://www.gabcast.com/mp3play/mp3player.swf?
file=http://www.gabcast.com/casts/10444/episodes/1180193061.mp3
&config=http://www.gabcast.com/mp3play/config.php?ini=mini.0.l"/> <param name="wmode" value="transparent" /> <param name="allowScriptAccess" value="always" /> <embed src="http://www.gabcast.com/mp3play/mp3player.swf?
file=http://www.gabcast.com/casts/10444/episodes/1180193061.mp3
&config=http://www.gabcast.com/mp3play/config.php?ini=mini.0.l" allowScriptAccess="always" wmode="transparent" width="150" height="76" name="mp3player" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"> </embed> </object>

My apologies for the extremely small type used above, but was impossible to use larger type, and not break the code still more.

So now that you see the code, and how it gets broken, learn to fix it.


Copy and paste the second set of code, into a post, or page element, in your blog. Use an "Edit HTML" mode window (either the post editor, or a page element wizard - your choice). Next, remove all line breaks, carefully. Start with the cursor positioned on the bottom line of the code just copied.

1. Move the cursor up one line. Then move to the end of that line (use the End key, not the arrow key here). Observe carefully the first character at the beginning of the next line.
2. Hit the Delete key ONCE. If the first character, formerly at the beginning of the following line, is now positioned at the cursor, you just removed one gratuitous line break. Continue with step 1 again.
3. If the first character of the following line was just erased, you did NOT remove a gratuitous line break, you removed an essential character (the first character on the following line). Retype that character, having observed it in step 1, by hitting just one key (don't move the cursor). Then continue with step 1 again.

An alternate (and possibly easier) procedure would be to

1. Copy then paste any dodgy code into Notepad, or any other text editor.
2. Under Format (for Notepad), enable Word Wrap.
3. Observe the text, and how it will "flow" to justify each line, with word wrap enabled.
4. Move the sides of the window in and out, and observe how the text flows to justify each line, with automatic line breaks inserted dynamically.
5. Observe any lines that do not re justify themselves smoothly - those lines end in hard line breaks.
6. Remove each hard line break, which is what you do in the more canonical procedure outlined above.
7. When all of the text flows smoothly as you move the sides of the window in and out, you have removed all of the hard line breaks, and you are done.
8. Copy then paste the code into Post Editor, or the Page Elements HTML / JavaScript gadget.

That's how you remove gratuitous line breaks. Very carefully. Mess one up, leave one line break, or delete one essential character wrongly, and your code won't work. Get everything 100% correct, and it will work.

And finally, here is what we're displaying with the above code.

Caracas FC Blog #2 - Caracas FC Audio



>> Top