Making a Post Look Right on Blogger

For several years, I had been using Blogger.com to host this blog. Blogger had a nasty habit of screwing up my formatting: it would insert spaces where I didn't want them, and would invent and repeat various codes that I did not want in my HTML.  That is, even if things did look fine and function reasonably in the Compose view in Blogger, they could be a complete wreck in the Edit HTML view -- and in the final outcome.  Blogger had often messed up my final posts, so that they would look different from how they had looked while I was editing them.  Sometimes, things went to bizarre extremes.  Here's an example:


<b></b>
<b></b></span></span>
<div style="text-align: center;">


<span style="font-size: x-small;">
<span style="font-size: x-small;">
<b><b>Conclusion</b></b>
<b>
</b>
<b><span class="Apple-style-span" style="font-weight: normal;"></span></b>
<b><span class="Apple-style-span" style="font-weight: normal;"></span></b>
<b><span class="Apple-style-span" style="font-weight: normal;"></span></b>
<b><span class="Apple-style-span" style="font-weight: normal;"></span></b>
<b><span class="Apple-style-span" style="font-weight: normal;"></span></b></span></span>
<div style="text-align: left;">


<span style="font-size: x-small;">
<span style="font-size: x-small;">
<b><span class="Apple-style-span" style="font-weight: normal;"><b></b></span></b>
<b><span class="Apple-style-span" style="font-weight: normal;"><b></b></span></b>
<b><span class="Apple-style-span" style="font-weight: normal;"><b></b></span></b>
<b><span class="Apple-style-span" style="font-weight: normal;"><b></b></span></b></span></span>
<div style="display: inline ! important; text-align: center;">


<span style="font-size: x-small;">
<span style="font-size: x-small;">
</span></span>
<div style="display: inline ! important;">


<span style="font-size: x-small;">
<span style="font-size: x-small;"></span></span></div>
</div>
</div>
</div>


Now, what was that all about?  In normal view, it was just one word, "Conclusion," surrounded by a bunch of blank lines -- which, incidentally, I had not inserted; the webpage just took it upon itself to introduce all that junk into my *final* product.  (Note that, even here, the foregoing example is surrounded by extra spaces that I did not insert.)

I posted a question about this in a Google help forum.  One response pointed me toward a Blogger post on this Blogger problem.  That post offered these tips:

• Before creating your post, arrange your paragraphs using a word processor like MS Word, then paste it into Blogger.
• Minimize changes (e.g., repositioning paragraphs) in the editor.
• Preview before publishing to view initial output and put changes on it.

I felt that these were imperfect tips.  On the first one, I had discovered that Word would add its own HTML codes when I pasted material directly into Blogger.  I found it was better to copy the Word text into Notepad, which would tend to strip away that stuff, and then move it from Notepad to Blogger (or just do the editing in Notepad).  The third one was not very helpful to me either, as the attempt to fix problems observed in Preview would sometimes just make things worse.

It seemed to me that the second of those three tips was the heart of the matter.  Blogger's internal editor was just not up to the task of managing text editing.  What I needed to do, I believed, was to try using some kind of HTML editing program, get my text  all set up there, and then copy it over and post it without any further changes.  I say an HTML editor, rather than a word processor, because I would want to insert links and make sure that the formatting was right in HTML terms.

About.com, which I had found to be a good general-purpose source of information, had a list of the 10 Best Windows WYSIWYG Editors.  The ones topping the list, from Adobe and Microsoft, cost hundreds of dollars.  In the past, I had used Microsoft FrontPage, which was part of Microsoft Office up through 2003, but seemed to have vanished thereafter.  I was still running Office 2003, so I could have gone with that.  I was trying to get away from relying on Microsoft software, however, and in any event About.com also listed four freeware HTML editors at the bottom of its Top 10 list.  Of those four, SeaMonkey ranked highest, and had versions for Linux and Mac as well as Linux.  It was also described as being appropriate for HTML newcomers.  I was not that, but I was certainly not the alternative in their descriptions, i.e., a professional web designer.  About.com also ranked SeaMonkey third in its list of Linux-specific HTML editors.  On another list, though, SeaMonkey ranked only 17th, well behind Amaya (for professional web developers), which was ninth on the About.com list.  Between the two, as I looked at their webpages, I felt that SeaMonkey was probably more the direction I wanted to go.

Before pursuing that choice further, I recalled that there was another possibility, namely, to use a blogging tool.  Wikipedia offered a list of the blogging software used by what it described as the Top 20 blogs.  Just two programs, Moveable Type and WordPress, dominated that list.  The latter could be confusing:  it was also the name of a blog hosting website, like Blogger, through which bloggers could easily use the WordPress blogging tool to prepare their own blogs.  That last observation raised the question of why someone would use Blogger instead of WordPress to host a blog.  The answer, in my case, was that I had started out with Blogger, I had a lot of stuff on there, and anyway I already had a WordPress blog, with a different orientation, and found it convenient to host this other blog somewhere else.  I was already familiar with the WordPress website, though, and a brief glance at features suggested that it might be more approachable than Moveable Type.  That said, a search for blogging tools introduced me to a number of factoids:  that Twitter, among others, was considered a micro-blogging tool; that there was a free version of CoffeeCup, which had appeared on that About.com list; that PC Magazine gave me a comparison of blogging tools, and that Xanga -- the only one they rated with four stars (out of five) -- was free and seemed to offer good features, and that it just turned out to be another place to host a blog.

So now, I felt, my choice was down to the free tools (not blog hosting sites) offered by SeaMonkey, WordPress, and CoffeeCup. SeaMonkey came out sounding pretty good in Smashing Magazine's list, whereas one of the comments posted in response to their list said that CoffeeCup had the very problem I was experiencing, of having a lot of superfluous code generation.  Another comment said positive things about SeaMonkey.  As some of the foregoing comments suggest, WordPress seemed to be for web designers above my ability or interest level -- intended, among other things, for a direct link between the blogging tool and the blog host website.  That seemed like a potentially more complex arrangement than I could justify at present.

I took one last look around and decided not to explore htmlArea's long list of WYSIWYG HTML editors.  Instead, for purposes of my dual-boot and VMware-based machines, I downloaded the Windows version and installed the Ubuntu version via Synaptic.  The latter was then available at Applications > Internet > SeaMonkey.  I opened the program and selected File > New > Composer Page.  (I wasn't able to install the Windows version right away because I had other programs running in my virtual machine, but I suspected the functionality was largely the same.)  I went over to the webpage I was composing in Blogger and then realized that I wasn't sure whether I should copy my HTML or my normal text from Blogger into SeaMonkey.  I went back to SeaMonkey and clicked the "HTML Tags" tab at the bottom.  And -- whoa -- the program vanished.  Not good!  I went back to Applications > Internet > SeaMonkey and started it again.  This time, I clicked on the HTML Source tab at the bottom of the screen.  No problem:  it opened a nearly empty HTML editing page.

I went over to Blogger, went into its HTML view, copied everything, and pasted it into that SeaMonkey page, between the two "body" codes.  I clicked on the Normal tab and there it was, in more or less normal layout.  I went back to the HTML Source tab and saw that it had not actually removed any of those excess codes.  I cut and pasted the code out of there, put it into gedit (similar to Notepad), did a bunch of Find and Replace operations to remove the excess codes, and then pasted it back into the HTML Source tab.   That removed all of my paragraph breaks, so I had to reinsert them manually.  The location of paragraph breaks was easier to spot in the HTML Source tab.  But then, when I flipped to the Normal view and back, the paragraph breaks that I had inserted by just using an extra Enter keystroke were gone.  So I had to either do my paragraph breaks in Normal view or else use <p codes to break my paragraphs in HTML Source view.  Also, lines were wrapped in a weird way.  I didn't know how to remove unwanted line breaks in gedit or OpenOffice Writer, so I saved the HTML code as a text file, went into my virtual machine, and used Microsoft Word to replace ^p with a spacebar space, and then brought it back into the HTML Source tab -- but then it just reverted to how it was before.  Also, the print in SeaMonkey was a bit small for good proofreading, but I couldn't figure out how to make it larger.

When I was done tinkering, I flipped back and forth between the Normal and HTML Source tabs a couple of times.  It looked good; it did not stop looking good; and it did not seem to be inserting any unwanted new codes.  Now, I needed to get all that nice HTML from SeaMonkey back into my Blogger webpage.  SeaMonkey had a Publish Page option, wher it appeared that I could have just sent the result directly to Blogger.  I wasn't sure how to do that, and anyway I wanted to look at the result in Blogger before publishing it.  So I switched into HTML Source view, in SeaMonkey, and copied everything into the Edit HTML tab in Blogger (having deleted whatever was there before).  I switched to Blogger's Compose view.  This did not look too good.  I clicked on Blogger's Preview button.  It was a train wreck, mostly because lines were ending all over the place -- after one word, two words, three words, whatever.  I looked again at the Edit HTML view in Blogger.  The weird line endings and extra blank lines were there too.  But they definitely weren't in the HTML in SeaMonkey.

I tried a different approach.  I wiped out everything in Blogger and copied over again from SeaMonkey.  This time, though, I copied from SeaMonkey's Normal view (i.e., not HTML Source) to Blogger's Compose view (i.e., not Edit HTML), and then I clicked on Blogger's Preview button.  This was much better.  Now lines were wrapping in sensible places.  The problem now seemed to be that I was just getting line breaks (i.e., just the start of a new line) instead of paragraph breaks (i.e., with a blank line between paragraphs).  So, OK, in SeaMonkey's HTML Source view, I tried doing a global replace (Ctrl-F) of <p> with <p><br>.  I looked at the result in SeaMonkey's Normal view.  Now most of my paragraph breaks were extra wide.  Again, I copied this Normal view into Blogger's Compose view.  But that wasn't it, either.  Eventually I figured out that what I needed was to forget about <p> and just use <br>, so that took another global replacement in SeaMonkey, followed by manual adjustment of a lot of paragraph breaks.  Later, I found SeaMonkey's Edit > Preferences > Composer option that said, "Return in a paragraph always creates a new paragraph."  That was not checked, but I checked it.  It would take another project to determine whether that would help.

The next problem was that, in Blogger's Preview, the first two paragraphs were in a larger typeface.  They looked fine everywhere else; but in Preview they were wrong.  I took a look in Blogger's Edit HTML view.  Sure enough, Blogger had inserted this before the first word of my code:  <span class="Apple-style-span" style="font-family: Arial; font-size: medium;"><span class="Apple-style-span" style="font-size: 16px;">.  Don't ask me why.  I deleted it and took another look in Preview.  That fixed that.

Now I had a few remaining random line breaks.  The problem appeared to be that, somehow, some of my ordinary spacebar spaces had gotten replaced with nonbreaking space codes (i.e., "&nbsp;").  In SeaMonkey's HTML Source view, I did a temporary global replace of the space-nonbreaking space combination (i.e., " "&nbsp;") to @@@.  (Likewise when the two appeared in reverse order.)  Then I did a search for all remaining occurrences of nonbreaking spaces, and replaced most of them with regular spaces.  Not the ones at the starts or ends of lines, though:  I had noticed that SeaMonkey did not search correctly for items wrapping over its own line breaks.  So if a space occurred at the end of one line and a &38nbsp; occurred at the start of the next, SeaMonkey's find-and-replace would not find and replace.  But making these decisions manually, for the hundreds of occurrences that may appear in a long post, was beyond my patience at this point.  So I just made it global.  Finally, I replaced the @@@ with the space-nonbreaking space combination again, and then took a look in SeaMonkey's Normal view.  It looked good.

I belatedly realized that I had not yet tried SeaMonkey's Preview view, so I tried that now.  It still looked good.  I copied it from Normal view over to Blogger's Compose view again.  I had to go into Blogger's Edit HTML view again to remove that funky starting font code again.

After hours of futzing around, it was done, and I posted it.  Even with the aid of SeaMonkey, it was a hassle.  SeaMonkey was definitely better than Blogger; my changes were making an improvement each time, and it was not undoing things that I had just fixed, and I did wind up with a satisfactory result.  There seemed nonetheless to be some glitches in the way SeaMonkey worked, and I thought that I might want to try a different HTML editor next time.  The foregoing review suggested that WordPress might be the weapon of choice, unless something new came along in the meantime.