I use the Internet Explorer Web Browser Control in a lot of my applications to display document type layout. HTML happens to be one of the most common document formats and displaying data in this format – even in desktop applications, is often way easier than using normal desktop technologies.

One issue the Web Browser Control has that it’s perpetually stuck in IE 7 rendering mode by default. Even though IE 8 and now 9 have significantly upgraded the IE rendering engine to be more CSS and HTML compliant by default the Web Browser control will have none of it. IE 9 in particular – with its much improved CSS support and basic HTML 5 support is a big improvement and even though the IE control uses some of IE’s internal rendering technology it’s still stuck in the old IE 7 rendering by default.

This applies whether you’re using the Web Browser control in a WPF application, a WinForms app, a FoxPro or VB classic application using the ActiveX control. Behind the scenes all these UI platforms use the COM interfaces and so you’re stuck by those same rules.

Rendering Challenged

To see what I’m talking about here are two screen shots rendering an HTML 5 doctype page that includes some CSS 3 functionality – rounded corners and border shadows - from an earlier post. One uses IE 9 as a standalone browser, and one uses a simple WPF form that includes the Web Browser control.

IE 9 Browser:

 

Web Browser control in a WPF form:

The IE 9 page displays this HTML correctly – you see the rounded corners and shadow displayed. Obviously the latter rendering using the Web Browser control in a WPF application is a bit lacking. Not only are the new CSS features missing but the page also renders in Internet Explorer’s quirks mode so all the margins, padding etc. behave differently by default, even though there’s a CSS reset applied on this page.

If you’re building an application that intends to use the Web Browser control for a live preview of some HTML this is clearly undesirable.

Feature Delegation via Registry Hacks

Fortunately starting with Internet Explore 8 and later there’s a fix for this problem via a registry setting. You can specify a registry key to specify which rendering mode and version of IE should be used by that application. These are not global mind you – they have to be enabled for each application individually.

There are two different sets of keys for 32 bit and 64 bit applications.

32 bit:

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

Value Key: yourapplication.exe

64 bit:

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

Value Key: yourapplication.exe

The value to set this key to is (taken from MSDN here) as decimal values:

9999 (0x270F)
Internet Explorer 9. Webpages are displayed in IE9 Standards mode, regardless of the !DOCTYPE directive.

9000 (0x2328)
Internet Explorer 9. Webpages containing standards-based !DOCTYPE directives are displayed in IE9 mode.

8888 (0x22B8)
Webpages are displayed in IE8 Standards mode, regardless of the !DOCTYPE directive.

8000 (0x1F40)
Webpages containing standards-based !DOCTYPE directives are displayed in IE8 mode.

7000 (0x1B58)
Webpages containing standards-based !DOCTYPE directives are displayed in IE7 Standards mode.

 

The added key looks something like this in the Registry Editor:

With this in place my Html Html Help Builder application which has wwhelp.exe as its main executable now works with HTML 5 and CSS 3 documents in the same way that Internet Explorer 9 does.

Incidentally I accidentally added an ‘empty’ DWORD value of 0 to my EXE name and that worked as well giving me IE 9 rendering. Although not documented I suspect 0 (or an invalid value) will default to the installed browser. Don’t have a good way to test this but if somebody could try this with IE 8 installed that would be great:

• What happens when setting 9000 with IE 8 installed?
• What happens when setting 0 with IE 8 installed?

Don’t forget to add Keys for Host Environments

If you’re developing your application in Visual Studio and you run the debugger you may find that your application is still not rendering right, but if you run the actual generated EXE from Explorer or the OS command prompt it works. That’s because when you run the debugger in Visual Studio it wraps your application into a debugging host container. For this reason you might want to also add another registry key for yourapp.vshost.exe on your development machine.

If you’re developing in Visual FoxPro make sure you add a key for vfp9.exe to see the rendering adjustments in the Visual FoxPro development environment.

Cleaner HTML - no more HTML mangling!

There are a number of additional benefits to setting up rendering of the Web Browser control to the IE 9 engine (or even the IE 8 engine) beyond the obvious rendering functionality. IE 9 actually returns your HTML in something that resembles the original HTML formatting, as opposed to the IE 7 default format which mangled the original HTML content.

If you do the following in the WPF application:

private void button2_Click(object sender, RoutedEventArgs e)
{
    dynamic doc = this.webBrowser.Document;

    MessageBox.Show(doc.body.outerHtml);
}

you get different output depending on the rendering mode active. With the default IE 7 rendering you get:

<BODY><DIV>
<H1>Rounded Corners and Shadows - Creating Dialogs in CSS</H1>
<DIV class=toolbarcontainer><A class=hoverbutton href="./"><IMG src="../../css/images/home.gif"> Home</A> <A class=hoverbutton href="RoundedCornersAndShadows.htm"><IMG src="../../css/images/refresh.gif"> Refresh</A> </DIV>
<DIV class=containercontent>
<FIELDSET><LEGEND>Plain Box</LEGEND><!-- Simple Box with rounded corners and shadow -->
<DIV style="BORDER-BOTTOM: steelblue 2px solid; BORDER-LEFT: steelblue 2px solid; WIDTH: 550px; BORDER-TOP: steelblue 2px solid; BORDER-RIGHT: steelblue 2px solid" class="roundbox boxshadow">
<DIV style="BACKGROUND: khaki" class="boxcontenttext roundbox">Simple Rounded Corner Box. </DIV></DIV></FIELDSET>
<FIELDSET><LEGEND>Box with Header</LEGEND>
<DIV style="BORDER-BOTTOM: steelblue 2px solid; BORDER-LEFT: steelblue 2px solid; WIDTH: 550px; BORDER-TOP: steelblue 2px solid; BORDER-RIGHT: steelblue 2px solid" class="roundbox boxshadow">
<DIV class="gridheaderleft roundbox-top">Box with a Header</DIV>
<DIV style="BACKGROUND: khaki" class="boxcontenttext roundbox-bottom">Simple Rounded Corner Box. </DIV></DIV></FIELDSET>
<FIELDSET><LEGEND>Dialog Style Window</LEGEND>
<DIV style="POSITION: relative; WIDTH: 450px" id=divDialog class="dialog boxshadow" jQuery16107208195684204002="2">
<DIV style="POSITION: relative" class=dialog-header>
<DIV class=closebox></DIV>User Sign-in
<DIV class=closebox jQuery16107208195684204002="3"></DIV></DIV>
<DIV class=descriptionheader>This dialog is draggable and closable</DIV>
<DIV class=dialog-content><LABEL>Username:</LABEL> <INPUT name=txtUsername value=" "> <LABEL>Password</LABEL> <INPUT name=txtPassword value=" ">
<HR>
<INPUT id=btnLogin value=Login type=button> </DIV>
<DIV class=dialog-statusbar>Ready</DIV></DIV></FIELDSET> </DIV>
<SCRIPT type=text/javascript>
    $(document).ready(function () {
        $("#divDialog")
            .draggable({ handle: ".dialog-header" })
            .closable({ handle: ".dialog-header",
                closeHandler: function () {
                    alert("Window about to be closed.");
                    return true;  // true closes - false leaves open
                }
            });
    });
</SCRIPT>
</DIV></BODY>

Now lest you think I’m out of my mind and create complete whacky HTML rooted in the last century, here’s the IE 9 rendering mode output which looks a heck of a lot cleaner and a lot closer to my original HTML of the page I’m accessing:

<body>
<div>
   
    <h1>Rounded Corners and Shadows - Creating Dialogs in CSS</h1>
    <div class="toolbarcontainer">
        <a class="hoverbutton" href="./"> <img src="../../css/images/home.gif"> Home</a>
        <a class="hoverbutton" href="RoundedCornersAndShadows.htm"> <img src="../../css/images/refresh.gif"> Refresh</a>
    </div>

   
    <div class="containercontent">

    <fieldset>
        <legend>Plain Box</legend>   
            <!-- Simple Box with rounded corners and shadow -->
            <div style="border: 2px solid steelblue; width: 550px;" class="roundbox boxshadow">             
                <div style="background: khaki;" class="boxcontenttext roundbox">
                    Simple Rounded Corner Box.
                </div>
            </div>
    </fieldset>

    <fieldset>
        <legend>Box with Header</legend>
        <div style="border: 2px solid steelblue; width: 550px;" class="roundbox boxshadow">             
            <div class="gridheaderleft roundbox-top">Box with a Header</div>
            <div style="background: khaki;" class="boxcontenttext roundbox-bottom">
                Simple Rounded Corner Box.
            </div>
        </div>
    </fieldset>

 

    <fieldset>
        <legend>Dialog Style Window</legend>

        <div style="width: 450px; position: relative;" id="divDialog" class="dialog boxshadow">
            <div style="position: relative;" class="dialog-header">
                <div class="closebox"></div>
                User Sign-in
            <div class="closebox"></div></div>
            <div class="descriptionheader">This dialog is draggable and closable</div>       
            <div class="dialog-content">
           
                <label>Username:</label>
                <input name="txtUsername" value=" " type="text">

                <label>Password</label>
                <input name="txtPassword" value=" " type="text">
               
                <hr/>
               
                <input id="btnLogin" value="Login" type="button">           
            </div>

            <div class="dialog-statusbar">Ready</div>
        </div>

    </fieldset>

    </div>

<script type="text/javascript">
    $(document).ready(function () {
        $("#divDialog")
            .draggable({ handle: ".dialog-header" })
            .closable({ handle: ".dialog-header",
                closeHandler: function () {
                    alert("Window about to be closed.");
                    return true;  // true closes - false leaves open
                }
            });
    });
</script>       

</div>
</body>

IOW, in IE9 rendering mode IE9 is much closer (but not identical) to the original HTML from the page on the Web that we’re reading from.

As a side note: Unfortunately, the browser feature emulation can't be applied against the Html Help (CHM) Engine in Windows which uses the Web Browser control (or COM interfaces anyway) to render Html Help content. I tried setting up hh.exe which is the help viewer, to use IE 9 rendering but a help file generated with CSS3 features will simply show in IE 7 mode. Bummer - this would have been a nice quick fix to allow help content served from CHM files to look better.

HTML Editing leaves HTML formatting intact

In the same vane, if you do any inline HTML editing in the control by setting content to be editable, IE 9’s control does a much more reasonable job of creating usable and somewhat valid HTML. It also leaves the original content alone other than the text your are editing or adding. No longer is the HTML output stripped of excess spaces and reformatted in IEs format.

So if I do:

private void button3_Click(object sender, RoutedEventArgs e)
{
    dynamic doc = this.webBrowser.Document;
    doc.body.contentEditable = true;
}

and then make some changes to the document by typing into it using IE 9 mode, the document formatting stays intact and only the affected content is modified. The created HTML is reasonably clean (although it does lack proper XHTML formatting for things like <br/> <hr/>). This is very different from IE 7 mode which mangled the HTML as soon as the page was loaded into the control. Any editing you did stripped out all white space and lost all of your existing XHTML formatting. In IE 9 mode at least *most* of your original formatting stays intact.

This is huge! In Html Help Builder I have supported HTML editing for a long time but the HTML mangling by the Web Browser control made it very difficult to edit the HTML later. Previously IE would mangle the HTML by stripping out spaces, upper casing all tags and converting many XHTML safe tags to its HTML 3 tags. Now IE leaves most of my document alone while editing, and creates cleaner and more compliant markup (with exception of self-closing elements like BR/HR).

The end result is that I now have HTML editing in place that's much cleaner and actually capable of being manually edited.

Caveats, Caveats, Caveats

It wouldn't be Internet Explorer if there weren't some major compatibility issues involved in using this various browser version interaction. The biggest thing I ran into is that there are odd differences in some of the COM interfaces and what they return.

I specifically ran into a problem with the document.selection.createRange() function which with IE 7 compatibility returns an expected text range object. When running in IE 8 or IE 9 mode however. I could not retrieve a valid text range with this code where loEdit is the WebBrowser control:

loRange = loEdit.document.selection.CreateRange()

The loRange object returned (here in FoxPro) had a length property of 0 but none of the other properties of the TextRange or TextRangeCollection objects were available.

I figured this was due to some changed security settings but even after elevating the Intranet Security Zone and mucking with the other browser feature flags pertaining to security I had no luck.

In the end I relented and used a JavaScript function in my editor document that returns a selection range object:

function getselectionrange() {
    var range = document.selection.createRange();
    return range;
}

and call that JavaScript function from my host applications code:

*** Use a function in the document to get around HTML Editing issues
loRange = loEdit.document.parentWindow.getselectionrange(.f.)

and that does work correctly. This wasn't a big deal as I'm already loading a support script file into the editor page so all I had to do is add the function to this existing script file. You can find out more how to call script code in the Web Browser control from a host application in a previous post of mine.

IE 8 and 9 also clamp down the security environment a little more than the default IE 7 control, so there may be other issues you run into. Other than the createRange() problem above I haven't seen anything else that is breaking in my code so far though and that's encouraging at least since it uses a lot of HTML document manipulation for the custom editor I've created (and would love to replace - any PROFESSIONAL alternatives anybody?)

Registry Key Installation for your Application

It’s important to remember that this registry setting is made per application, so most likely this is something you want to set up with your installer. Also remember that 32 and 64 bit settings require separate settings in the registry so if you’re creating your installer you most likely will want to set both keys in the registry preemptively for your application.

I use Tarma Installer for all of my application installs and in Tarma I configure registry keys for both and set a flag to only install the latter key group in the 64 bit version:

Because this setting is application specific you have to do this for every application you install unfortunately, but this also means that you can safely configure this setting in the registry because it is after only applied to your application.

Another problem with install based installation is version detection. If IE 8 is installed I’d want 8000 for the value, if IE 9 is installed I want 9000. I can do this easily in code but in the installer this is much more difficult. I don’t have a good solution for this at the moment, but given that the app works with IE 7 mode now, IE 9 mode is just a bonus for the moment. If IE 9 is not installed and 9000 is used the default rendering will remain in use.

 

It sure would be nice if we could specify the IE rendering mode as a property, but I suspect the ActiveX container has to know before it loads what actual version to load up and once loaded can only load a single version of IE. This would account for this annoying application level configuration…

Summary

The registry feature emulation has been available for quite some time, but I just found out about it today and started experimenting around with it. I’m stoked to see that this is available as I’d pretty much given up in ever seeing any better rendering in the Web Browser control. Now at least my apps can take advantage of newer HTML features.

Now if we could only get better HTML Editing support somehow <snicker>… ah can’t have everything.