HTML Rendered in IE 6, FireFox 2.0, and Word 2007.

My long-time and respected friend Bill McCarthy has taken issue with me regarding my suggestion that Word and IE use an external HTML rendering engine which Outlook could also use. He suggests I’m being impractical and gave me an example in his comment yesterday.

Bill says:

Okay, let me give you an example. This is a simple word docuemtn [sic] saved in html. I’ve trimmed all the style info.

This is word Word html

Not sure if that comes through there or not, but what it actually is is a sentence “This is Word html”. But it also contains info that I changed the “word” to “Word” (as in editing track changes. Now how word renders that is dependant [sic] on whether or nto [sic] it has show changes or not: IE has no idea of that. So the page layout IE does is goign [sic] to be completely different.

Bill’s comment is missing the mark in three ways.

  1. My suggestion doesn’t preclude a Word HTML rendering subclass from further processing the rendered HTML appropriately within Word. Likewise, an Outlook HTML rendering subclass could further process the HTML for security issues.
  2. My point isn’t about how Word renders HTML but how Outlook renders HTML.
  3. This subject stems from the fact that Microsoft products, regardless of the implementation, do not render valid, even simple, HTML correctly or consistently.

To counter Bill’s example, here is an example of simple HTML rendered in IE 6, Firefox 2.0, and Word 2007.

HTML Code follows (sorry for the image, but the WordPress widget for formatted HTML is stripping out important info)

HTML source code used in rendering examples

Critical elements to note in the source code are that I’m using embedded styles because I want a different printed view than the on-screen view. “Media” is unsupported in the Word rendering engine. Also, please note how simple the HTML is, and that it is the div and span tags that are particularly trashed in the Word 2007 engine.

HTML rendered in IE 6
HTML rendered in IE 6

HTML rendered in Firefox 2.0
HTML rendered in FireFox 2.0

HTML rendered in Word 2007 (note screen shot shows I’ve elected to keep the source, not destination formatting)
HTML rendered in Word 2007

Microsoft’s strategy may work fine within enterprises that can limit the audience to not only Microsoft products, but certain version of their products is, well, ridiculous and irritating to many developers and their clients.

Advertisements

Why is the Microsoft HTML Engine an embedded module at all?

It occurred to me sometime in the night that someone should really spread the word about the power of modular programming at Microsoft. Maybe even talk about web services. Okay, I know the folks are Microsoft are actually really great people and are definitely smart. (I still think they need a few more hunchbacks, though.) But really, why are there two HTML rendering engines at all? And, why are they embedded in applications? Why isn’t there one rendering engine?

It seems like basic (no pun intended) software design. But, then, I’m definitely a hunchback.

Getting around Word 2007 HTML Rendering Engine in Outlook 2007

Just a quick note that the work-around for Word’s mis-rendering (rending?) of HTML is a satisfactory, if short-term, help for my client. The work-around is to open the the email, then select “Other actions…View in browser.”

It also looks like biggest problem isn’t with the TextBoxes so much as with the div and span elements I used instead of a (HTML) table. Which chaps my butt a bit since the page would have been so much easier to create and maintain using tables, but I had succumbed to peer pressure that “tables are bad.” Anyway, will rework with tables and then reasses how bad the input elements appear.

Microsoft chooses Word 2007 HTML Rendering Engine for Outlook 2007

As Gary Larsen’s classic cartoon illustrated, it’s another case of “too many scientists and not enough hunchbacks” at Microsoft. I admit I’m late to the bitch fest regarding HTML rendering in Outlook ‘2007, but it was only recently that I got my first complaint about munged HTML email after a user upgraded to Office 2007. That I’ve had only one is no comfort since that person sign my checks.

The problem for those of you who have been living under a grindstone, as have I, is that Microsoft changed Outlook 2007 to use Word’s HTML rendering engine instead of IE. If you support software that creates and emails HTML content, then you’ve either hit this problem, or will do so.

I’ve found some web posts from marketeers proclaiming the second coming with the change. By far, the majority of hits are blog posts (developers!) complaining bitterly about this change. I guess Mr. Ballmer no longer loves us. *sniff* But I digress.

The saddest part of searching is that the posts are almost all more than a year old, including one that states the usual Microsoft deflection “we want to hear about your issues and will listen.”

The only result I can see is a Microsoft CSS/HTML validation tool. I’ve installed it (in Visual Studio 2005) so I can validate my HTML against Word’s HTML engine. Yikes. It tells me “media”, “form”, “input”, “onload”, and so on aren’t supported commands. Oh, joy.

I’m not posting just to vent, but because I’m finding there are few practical suggestions for how to redevelop HTML so it doesn’t look putrid in OL’07 at the very least. Ideally, it will look identical between browser and email client preview.

By the way, the Outlook ’07 ribbon* apparently has a button “Other actions,” from which users can chose to view the email in the browser. (Um, doesn’t this seem, oh, I dunno, sorta ironic?)

In this case, I have a Visual Studio 1.1 Aspx application that collects some info on an HTML form, lets users select who to email copies to, and then emails the page (without some of the controls like buttons) as an HTML attachment. I remove some elements now. I will have to do more to transform unsupported elements like TextBoxes (which aspx renders as input elements, and seem to be the biggest problem) into supported elements.

As I redevelop the page, I’ll post with suggests of what works and what doesn’t. And if any of you know an Office ‘Softie, thump ’em upside the head for me, would you?

Relevant links:

The Party Line

Campaign Monitor’s Guide to CSS Support in Email Clients

Samples of HTML Rendering in Outlook 2007

Some Dolt Who Thinks Only Spammers Are Affected

* Ribbon? Give me a break. Since when does “ribbon” mean “menu that takes up a lot more screen real estate, thus hiding more of what you actually care about?”