Tuesday, March 12, 2013

The only thing constant is change.

This is a milestone article. This is my 220th posting that I've written in the last five years of blogging. I've been migrating from using the built in Blogger text entry tool to using Microsoft Word or Apple Pages to edit my articles to working directly in HTML and CSS to this article written with Word Wrangler entirely using HTML syntax.

The built in Blogger "Post Editor" provided by Google is based on Microsoft's HTML WYSIWYG editor called MSHTML and code from Midas, a WYSIWYG editor from Mozilla Organization, the group that provides the FireFox Browser.

(WYSIWYG: An acronym that stands for What - You - See - Is - What - You - Get. A WYSIWYG application is one that enables you to see on the display screen exactly what will appear when the document is printed or viewed online. WYSIWYG applications are especially popular for publishing.)

There are problems with these kinds of editors and problems associated with any attempt to create "rich text" in a web browser world. First is the fact that the text is rendered and displayed by a variety of programs called "web browsers." It might be Microsoft's Internet Explorer or Apple's Safari or Firefox or Chrome or Opera or who knows what on a smart phone or tablet. Not all of these different browsers work exactly the same, not to mention differences between versions.

Further complications come from the various versions of HTML and CSS that have evolved over time. The earliest versions of HTML had a lot of built in style control that has now migrated to the CSS (Cascading Style Sheets) syntax and certain old commands are no longer appreciated if not outright ignored. So composing directly in HTML requires one to consider just what versions of the markup language to use. The automatic tools have the same difficulty.

While the automatic tool is convenient, it has limited capability, and—more significantly —it creates really ugly HTML, and, on occasion, I've had to perform major clean up of messy code to get what I want, and that can be very tedious and time consuming. For example, I can now create consistent and, in my opinion, beautiful "emdashes" to create the hyphon that I use a lot in writing; at least when I'm not using elipsis … which are my ™.

When I copy text from a word processor like MS Word or Pages, that process embeds a ton of fonts and other HTML into the code. Sometimes, when editing the code using the WYSIWYG tool, the HTML will get all messed up leaving me with different paragraphs in different fonts and other messy formatting.

Once this formatting gets messed up on Blogger, I have to go in and edit the HTML created by the tool, removing dozens of font descriptions and trying to keep all the "begin" and "end" tags paired up properly. Plus the tool creats a ton of div and span commands that are really a mess to clean up. Those of you who work with HTML or any programming language know that you keep track of blocks in the source code with indentation. The tool just creates a giant spagehtti strand of HTML and it is hours of work to clean it up to the point that you can even start making changes.

Google provides a decent data entry tool that give you a "What You See Is What You Get" environment for text entry and formatting. Some basic tools such as text center, bold, italic, and the ability to embed graphics and quotes as well as Interent links. The first time I was limited by the environment was when I wanted to put a superscript in my writing. The Google editor didn't have that feature. I found that if I wrote my text in a word processor, I could include superscripts and a lot of other formats and they would paste into the Google tool quite nicely.

Then I wanted to add a table to an article. The Word Processor tables would not work, so I ended up putting the table directly into the HTML code and that worked well. The more I worked directly in the HTML created by the Google editor, the more frustrated I got with the machine created code. Plus, pasting from Word and Pages added a lot of HTML that I didn't want. Usually the font was defined for each instance of a paragraph and it was very hard to keep all the begin and end tags straight in this automatically created code.

That has led me to this solution. After some research I chose to download WordWrangler onto my Mac to use to create plain HTML code directly without adding any hidden codes. WordWrangler is a code editor with many extra features to help you keep track of structured languages such as HTML, XHTML, and CSS. So that is what I'm going to use in the future. I'm currently working on an article about AND and OR and Truth Tables, which—by the name—obviously requires lots of tables. It's a good exercise in my web development skills and good practice for an old coder who hasn't written much in the last few years.

If this works well, I'll be using Word Wrangler for all my writing from now on and recommending it to my Mac friends editing code.


  1. This attempt seems to have worked pretty well. The only issue I ran into was the embedding of the graphic at the top. I worked, but caused some other problems I had to clean up.

    I know what I did that made the change I had to fix. Next time I'll embed the graphic directly into the HTML and that should solve that problem.

    I do have to embed the graphic here on the Blogspot site rather than in WordWrangler, because the image has to be uploaded to the Blogspot and then Google gives it a name I have to reference. I'll handle that better next time and should not have any problem.

    So I'm declaring success and continuing work on my article on Truth Tables being created directly in WordWrangler using CSS and XHTML.

  2. Another minor course correction. Typing text into WordWrangler and you don't get automatic line return. You can run a function and shorten the lines, but the norm is to create long lines.

    I prefer having the text automatically wrap and using enter for each paragraph. So I went back to text entry using Word on my Mac. That was I can type and not think about line ends.

    Then I paste the finished or nearly finished into WordWrangler.

    I also am using some down level HTML just for simplicity. Posting on Blogspot isn't exactly like creating a website and so I'm taking certain shortcuts that are not recommended for modern web page creation, but make it easier for me as a writer.

    For example, I'm using <p> to flag the start of a paragraph, but I don't bother ending with </p> as modern usage prefers. I'm also using some simple HTML such as <i> and <b> for strong text indication.

    Finally, and this is really not recommended normally, I'm using tables to control fancy layout. Blogspot uses a table format to add labels and text to pictures, so I'm going to use it to put multiple tables across the page.

    Again, this isn't recommended for generic web use, but it seems to work OK on Blogspot where the content is a bit primitive anyway.