Windows Live Writer – how to use IE8 beta’s rendering engine in standards mode

January 11, 2009 at 11:26 pm (Windows Live Writer) (, , , , , , , )

Windows Live Writer uses Internet Explorer’s rendering engine to show you how your post will look in the WYSIWYG editor and in the Preview view.

Differences between Preview and published versions

This can cause some differences in how the post looks in Windows Live Writer compared to how it actually looks when published and viewed through another browser such as Firefox or Opera which conforms a bit more closely to the W3C’s specifications in terms of rendering HTML.

Internet Explorer 8 (beta currently) is significantly more standards compliant than previous versions. Windows Live Writer uses the latest newest version of IE installed to render the WYSIWYG editor and Preview view…but if you install the beta and open up Windows Live Writer you will find that Writer is still using IE7’s engine for backwards compatibility reasons.

This information about the cause and the fix is courtesy of Brandon, a very friendly and helpful developer on the Writer Team.

Allow use of IE8 beta’s engine in standards mode

To let Windows Live Writer use IE8 beta’s engine in standards mode, open up the .htm files Writer uses as templates for the editor/preview and add the following line to the head:

<META http-equiv="X-UA-Compatible" content="IE=8" />

You’ll find these files in the App Data folder. In XP they’re in Documents and Settings\<username>\Application Data\Windows Live Writer\blogtemplates\<id> and in Vista they’ll be in Users\<username>\AppData\Roaming\Windows Live Writer\blogtemplates\<id>.

The files you need to edit are named index[X].htm, where X in my case was 2 and 3. index[2].htm is the template for my editor and index[3].htm is the template for my Preview view – opening it up in Notepad/another text editor shows that it contains the code for all the posts which are shown in Preview view under the current one you’re previewing.

Both index[2].htm and index[3].htm have the same content in their Head sections (the bits between the <HEAD> and </HEAD> tags) and it’s in this section that you need to add the line quoted above.

Issues with the IE8 beta’s standards mode

As IE8 is still in beta there are unsurprisingly a couple of issues which arise as a result of using the standards mode.

Issues in the WYSIWYG editor

Although the Preview view rendered as expected, using IE8 beta’s engine for the editor caused several problems for me, including not being able to enter a title for the post and paragraphs randomly being occluded:

Strange cursor position using IE8 beta's rendering engine  Random occlusion using IE8 beta's rendering engine

I therefore only have the line in index[3].htm – the template for the Preview view/tab.

This issue will surely be fixed, although probably not any time soon.

Odd – but irrelevant – behaviour in Preview mode

I also got odd behaviour in Preview mode using IE8 beta’s engine when I clicked on a heading where the entire post slid to the left so that only half of it was visible on the screen…going back into the editor then back to Preview returned it to the expected position. This only happened when I had a heading which hadn’t been saved in the draft.

previewwithbeta

As I said this is functionally irrelevant because I can’t think of any reason to click on the post when previewing it.

Another method of forcing the use of standards mode

It should be possible to force the use of IE8 beta’s engine in standards mode on a per-application basis by adding a registry key and a value for each application for which you want to force (I tried it for Firefox to get IETab to use IE8’s engine in standards mode) but I couldn’t get this to work for Firefox or for Writer, and considering the problems I had in Writer’s WYSIWYG editor mode, this probably wouldn’t be a good solution.

More Windows Live Writer goodness

On a separate note, I continue to be impressed by Writer’s effects for images…being able to add a custom watermark in different places kicks ass, as do the quick sizing, borders, effects and text wrapping options.

Post a Comment