Skip to main content

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

Comments

Popular posts from this blog

Custom Domain Migration - Managing The Traffic

Your blog depends upon traffic for its success.

Anything that affects the traffic to your blog, such as any change in the URL, affects the success of your blog. Publishing the blog to a custom domain, like renaming the blog, will affect traffic to your blog. The effects of the change will vary from blog to blog, because of the different traffic to every different blog.Followers. People who find your blog because of recommendations by other people.Search engines. Robotic processes which methodically surf your blog, and provide dynamic indexing to people who search for information.Subscribers. People who read your content from their newsfeed reader, such as the dashboard Reading List.Viewers. People who read your content from their browser.No two blogs are the same - and no two blogs will have the same combinations of traffic sources.

Stats Components Are Significant, In Their Own Context

One popular Stats related accessory, which displays pageview information to the public, is the "Popular Posts" gadget.

Popular Posts identifies from 1 to 10 of the most popular posts in the blog, by comparing Stats pageview counts. Optional parts of the display of each post are a snippet of text, and an ever popular thumbnail photo.

Like many Stats features, blog owners have found imaginative uses for "Popular Posts" - and overlook the limitations of the gadget. Both the dynamic nature of Stats, and the timing of the various pageview count recalculations, create confusion, when Popular Posts is examined.