Contact   •   Products   •   Search

Rick Strahl's Web Log

Wind, waves, code and everything in between...
ASP.NET • C# • HTML5 • JavaScript • AngularJs

HTML5 and CSS3 Editing in Windows Live Writer


Windows Live Writer is a wonderful tool for editing blog posts and getting them posted to your blog. What makes it nice is that it has a small set of useful features, plus a simple plug-in model that has spawned many useful add-ins. Small tool with a reasonably decent plug-in model to extend equals a great solution to a simple problem. If you're running Windows, have a blog and aren’t using Live Writer you’re probably doing it wrong…

One of Live Writer’s nice features is that it can download your blog’s CSS for preview and edit displays. It lets you edit your content inside of the context of that CSS using the WYSIWYG editor, so your content actually looks very close to what you’ll see on your blog while you’re editing your post. Unfortunately Live Writer renders the HTML content in the Web Browser Control’s  default IE 7 rendering mode.

Yeah you read that right: IE 7 is the default for the Web Browser control and most applications that use it, are stuck in this modus unless the application explicitly overrides this default. The Web Browser control does not use the version of Internet Explorer installed on the system (IE 10 on my Win8 machine) but uses IE 7 mode for ‘compatibility’ for old applications.

If you are importing your blog’s CSS that may suck if you’re using rich HTML 5 and CSS 3 formatting.

Hack the Registry to get Live Writer to render using IE 9 or 10

In order to get Live Writer (or any other application that uses the Web Browser Control for that matter) to render you can apply a registry hack that overrides the Web Browser Control engine usage for a specific application. I wrote about this in detail in a previous blog post a couple of years back.

Here’s how you can set up Windows Live Writer to render your CSS 3 by making a change in your registry:

livewriterHtml5

The above is for setup on a 64 bit machine, where I configure Live Writer which is a 32 bit application for using IE 10 rendering.

The keys set are as follows:

32bit Configuration on 64 bit machine:

HKEY_LOCAL_MACHINE\SOFTWARE\Wow6432Node\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_BROWSER_EMULATION

Key: WindowsLiveWriter.exe
Value: 9000 or 10000  (IE 9 or 10 respectively) (DWORD value)

On a 32 bit only machine:

HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_BROWSER_EMULATION

Key: WindowsLiveWriter.exe
Value: 9000 or 10000  (IE 9 or 10 respectively) (DWORD value)

Use decimal values of 9000, 10000 or 11000 to specify specific versions of Internet Explorer.

This is a minor tweak, but it’s nice to actually see my blog posts now with the proper CSS formatting intact.

Html5Rendering

Notice the rounded borders and shadow on the code blocks as well as the overflow-x and scrollbars that show up. In this particular case I can see what the code blocks actually look like in a specific resolution – much better than in the old plain view which just chopped things off at the end of the window frame. There are a few other elements that now show properly in the editor as well including block quotes and note boxes that I occasionally use.

It’s minor stuff, but it makes the editing experience better yet and closer to the final things so there are less republish operations than I previously had. Sweet!

Note that this approach of putting an IE version override into the registry works with most applications that use the Web Browser control. If you are using the Web Browser control in your own applications, it’s a good idea to switch the browser to a more recent version so you can take advantage of HTML 5 and CSS 3 in your browser displayed content by automatically setting this flag in the registry or as part of the application’s startup routine if not dedicated setup tool is used. At the very least you might set it to 9000 (IE 9) which supports most of the basic CSS3 features and is a decent baseline that works for most Windows 7 and 8 machines. If running pre-IE9, the browser will fall back to IE7 rendering and look bad but at least more recent browsers will see an improved experience.

I’m surprised that there aren’t more vendors and third party apps using this feature. You can see in my first screen shot that there are only very few entries in the registry key group on my machine – any other apps use the Web Browser control are using IE7. Go figure. Certainly Windows Live Writer should be writing this key into the registry automatically as part of installation to support this functionality out of the box, but alas since it does not, this registry hack lets you get your way anyway…

Resources

Make Donation
Posted in Live Writer  Windows  


Feedback for this Post

 
# re: HTML5 and CSS3 Editing in Windows Live Writer
by Airtonda Fonseca Granero May 23, 2014 @ 7:51pm
I agree with you about Live Writer. I have tried several alternatives and hated every single of them.
Your tweak didn't work for me (Live Writer 12, IE 11999, Windows 7 64).
LivreWriter is a 32 bit application so I used reg key in Wow6432Node.
I'd like to be able to see a <svg> tag embedded in page, which should work after IE8 but it does not work.

I wonder what I am doing wrong.
# re: HTML5 and CSS3 Editing in Windows Live Writer
by Rick Strahl May 23, 2014 @ 11:11pm
I think active elements like SVG might be disabled by default in Live Writer. EditMode does disable a few things, plus the browser control itself can be forced not to render certain things. I suspect SVG content might fall in that category. You should see if the browser is in fact rendering up level CSS - if you don't see rounded corners for example (if you have them that is) then you know the configuration is not right.

It definitely works for me, although I've found that the editor does get a bit finicky with things like transparency and borders/shadows etc if you're typing into content that has these extended attributes. It works, but live writer sometimes loses focus and takes a while to 'return'.
# re: HTML5 and CSS3 Editing in Windows Live Writer
by Patrick November 15, 2014 @ 4:23pm
Just a note in case someone runs into this...

After I added WindowsLiveWriter.exe (v16.4.3528.331) with a Reg_Dword to 10000, the split post (dashed line with a "more" tag) in the edit tab disappeared. <!--More--> still shows up in the source tab. Might be caused by fixing the page width with default css.

Overall, the posts look more like the online content and I'm gaining more than what I'm losing. Thanks!
 


West Wind  © Rick Strahl, West Wind Technologies, 2005 - 2014