Home > Silverlight, Windows Phone > How to display international characters in the WebBrowser control for Windows Phone 7.1

How to display international characters in the WebBrowser control for Windows Phone 7.1

Hi everyone, this is my first developers oriented post :). I will talk about a concrete problem we had recently in the Windows Phone version of Deed and will show how we solved it. In this post you will see how to display international (non-English) characters in the WebBrowser control for Windows Phone. More specially, how to pass HTML containing international symbols to the NavigateToString method.

Note that this post applies only to Windows Phone 7.1. In WP 8.0, it seems that MS have fixed this issue and you should be able to display international symbols without any additional processing.

As you know Deed for Windows Phone version 1.1 is officially available. One of the improvements in this update is that now we are displaying links and formatted text in the challenge description. How are we doing this? It is quite simple. We are receiving the challenge description from the Deed API in the form of HTML and we are passing it to a WebBrowser control by using the NavigateToString method. Everything will work perfect unless you try to display international text, like Bulgarian for example. There are a lot of challenges with description on Bulgarian on the web site. For example, if you try to pass the following HTML to the NavigateToString method:

<html>
<head>
    <title></title>
</head>
<body>
    <p>Some English text.</p>
    <p>And now some <b>Bulgarian</b> text:</p>
    <p>Снимай твоята авторска салата!</p>
</body>
</html>

The result won’t be what you might expect.

InternationalSymbolsInWebBrowser-010

In case you are not familiar with Bulgarian, this is definitely not Bulgarian :mrgreen:.  First, we tried to specify the character encoding for the html document, i.e. to add something like this:

<meta charset="UTF-8" />

But the result was the same. Then after further investigation of the problem, we found the solution. Basically, you need to encode your html to extended ASCII. Here is the magic method.

private string ToExtendedASCII( string html )
{
    const string ExtendedAsciiFormat = "&#{0};";
    string encodedHtml = "";
    char[] chars = html.ToCharArray();

    foreach ( char c in chars )
    {
        int ascii = Convert.ToInt32(c);
        if ( ascii > 127 )
        {
            encodedHtml += string.Format( ExtendedAsciiFormat, ascii );
        }
        else
        {
            encodedHtml += c;
        }
    }

    return encodedHtml;
}

The only thing left to do is to pass the received HTML to the ToExtendedAscii method and send the result to the WebBrowser.NavigateToString method.

this.WebBrowser.NavigateToString( ToExtendedASCII( html ) );

Now the result is what we expect to be:

InternationalSymbolsInWebBrowser-020

So that’s it. I hope, you guys got something out of this post. Bye 🙂

Advertisements
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: