WYSIWYG and Word

April 16, 2007

(This article was written a year ago and had a short life span as a live post. I thought I would resurrect it and in doing so I accidentally replaced the time stamp with today’s. So the content is here, the chronology is not. Enjoy.)

This post is not intended to point fingers at anyone for using WYSIWYG (What you see is what you get) editors. WYSIWYG programs do have their place in society, however I just added a new prayer to my list today and that prayer is that I never have to follow the code they write again.

I was doing some work on a page written by Contribute. I don’t blame Macromedia completely for the code produced by Contribute, the issue goes deeper… much deeper….

The person using Contribute pasted their text directly from Microsoft Word. Word was never intended, or shouldn’t have ever been intended to export HTML… Just as humans were never meant to fly without airplanes.

I’m going to do something that might end up a bit ridiculous, I’m going to post in some example code to prove my point. For those of you who may not be accustomed to looking at HTML on a daily basis I’m going to post the way the code should look after the excerpt from the actual page I was working with. So, here goes…

This is a chunk of the code from the page (I repeat, a chunk… not the whole page) :

<p style="margin-bottom: 0;"><span style="font-family:times new roman;font-size:16px;"><span style="font-size:15px;">&nbsp;</span></span></p> <p style="margin-top:0;margin-bottom:0;"><span style="font-family:times new roman;font-size:16px;"><strong><em><span style="font-size:15px;">Please send cover letter and application to MyAddress@MyAccount.com.</span></em></strong></span></p> <p style="margin-top:0;margin-bottom:0;"><span style="font-family:times new roman;font-size:16px;"><em><span style="font-size:15px;">&nbsp;</span></em></span></p> <p style="margin-top:0;"><span style="font-family:times new roman;font-size:16px;"><em><span style="font-size:15px;">&nbsp;</span></em></span></p> <blockquote style="margin-bottom: 0;"> <blockquote style="margin-bottom: 0;"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0">&nbsp;</blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> <blockquote style="margin-top: 0; margin-bottom: 0;"> <blockquote style="margin-top: 0; margin-bottom: 0;"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0">&nbsp;</blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> <blockquote style="margin-top: 0; margin-bottom: 0;"> <blockquote style="margin-top: 0; margin-bottom: 0;"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0">&nbsp;</blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> <blockquote style="margin-top: 0;"><blockquote style="margin-top: 0;">&nbsp;</blockquote> </blockquote> <p style="margin-bottom: 0;"><span style="font-family:times new roman;font-size:16px;"><strong><span style="font-size:15px;">&nbsp;</span></strong></span></p> <p style="margin-top:0;margin-bottom:0;"><span style="font-family:times new roman;font-size:16px;"><em><span style="font-size:15px;">&nbsp;</span></em></span></p> <p style="margin-top:0;"><span style="font-family:times new roman;font-size:16px;"><em><span style="font-size:15px;">&nbsp;</span></em></span></p> <p style="margin-bottom: 0;">&nbsp;</p> <p style="margin-top: 0;"><span style="font-family:times new roman;font-size:16px;"><strong></strong></span></p> <p><span style="font-family:times new roman;font-size:16px;"><strong><span style="font-size:15px;">&nbsp;</span></strong></span></p> <blockquote style="margin-bottom: 0;"> <blockquote style="margin-bottom: 0;"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0">&nbsp;</blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> <blockquote style="margin-top: 0; margin-bottom: 0;"> <blockquote style="margin-top: 0; margin-bottom: 0;"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0">&nbsp;</blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> <blockquote style="margin-top: 0;"><blockquote style="margin-top: 0;"><blockquote style="margin-bottom: 0"><blockquote style="margin-bottom: 0"><blockquote style="margin-bottom: 0"><blockquote style="margin-bottom: 0"><blockquote style="margin-bottom: 0"><blockquote style="margin-bottom: 0"><blockquote style="margin-bottom: 0"><blockquote style="margin-bottom: 0"><blockquote style="margin-bottom: 0"><blockquote style="margin-bottom: 0"><blockquote style="margin-bottom: 0"><blockquote style="margin-bottom: 0"><blockquote style="margin-bottom: 0"><blockquote style="margin-bottom: 0"><blockquote style="margin-bottom: 0"><blockquote style="margin-bottom: 0"><blockquote style="margin-bottom: 0"><blockquote style="margin-bottom: 0"><blockquote style="margin-bottom: 0"><blockquote style="margin-bottom: 0"><blockquote style="margin-bottom: 0"><blockquote style="margin-bottom: 0"><blockquote style="margin-bottom: 0"><blockquote style="margin-bottom: 0"><blockquote style="margin-bottom: 0"><blockquote style="margin-bottom: 0"><blockquote style="margin-bottom: 0"><blockquote style="margin-bottom: 0"><blockquote style="margin-bottom: 0"><blockquote style="margin-bottom: 0"><blockquote style="margin-bottom: 0"><blockquote style="margin-bottom: 0"><blockquote style="margin-bottom: 0"><blockquote style="margin-bottom: 0"><blockquote style="margin-bottom: 0">&nbsp;</blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> <blockquote style="margin-bottom: 0;"> <blockquote style="margin-bottom: 0;"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0"> <blockquote style="margin-bottom: 0">&nbsp;</blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote> <blockquote style="margin-top: 0; margin-bottom: 0;"> <blockquote style="margin-top: 0; margin-bottom: 0;"> <blockquote style="margin-bottom: 0">&nbsp;</blockquote> </blockquote> </blockquote> <blockquote style="margin-top: 0;"><blockquote style="margin-top: 0;">&nbsp;</blockquote> </blockquote> <p style="margin-bottom: 0;"><span style="font-family:times new roman;font-size:16px;"><span style="font-size:15px;">&nbsp;</span></span></p> <p style="margin-top:0;"><span style="font-family:times new roman;font-size:16px;"><em><span style="font-size:15px;">&nbsp;</span></em></span></p> <p><span style="font-family:times new roman;font-size:16px;"><br /> </span></p> <p>&nbsp;</p> <p style="margin-bottom: 0;"><span style="font-family:times new roman;font-size:16px;"></span></p> <p style="margin-top:0;margin-bottom:0;"><span style="font-family:times new roman;font-size:16px;">&nbsp;</span></p> <p style="margin-top:0;"><span style="font-family:times new roman;font-size:16px;">&nbsp;</span></p> <p style="margin-bottom: 0;"><span style="font-family:times new roman;font-size:13px;"><span style="font-size:16px;">&nbsp;</span></span></p> <p style="margin-top:0;"><span style="font-family:times new roman;font-size:13px;"><span style="font-size:16px;">&nbsp;</span></span></p> <p>&nbsp;</p> <p style="margin-bottom: 0;">&nbsp;</p>"

End Excerpt

Now, for the condensed edition of the code: (Email address removed for privacy and SPAM reasons.)

<p><strong><em>Please send cover letter and application to MyEmail@MyHost.Com</em></strong></p>

The end result should look like this:

Please send cover letter and application to MyEmail@MyHost.Com

Do I really need to write any more about this topic? I think my point has been made. Please please please don’t post data from Word into Contribute/Dreamweaver or Composer ever again. Thank You.

| | |