Monday, January 9, 2012

Character Corruption of Japanese Language on Web Browser

You can use build-in web browser in your application on Windows Phone. Using web browser in your app, you can display like rich text page which has images, a few fonts, javascripts or etc.

The sample code is here. 

- xaml
 <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">  
   <phone:WebBrowser HorizontalAlignment="Left" Name="webBrowser1" VerticalAlignment="Top" Height="607" Width="456" />  
 </Grid>  

- code behind
 public MainPage()  
 {  
   InitializeComponent();  
   this.webBrowser1.NavigateToString(@"  
           <?xml version='1.0' encoding='utf-8'?>  
           <html>  
             <head>  
             <meta http-equiv='Content-Type' content='text/html;charset=UTF-8' />  
             </head>  
             <body>  
             テストページです。  
             </body>  
           </html>  
           ");  
 }  


In above sample, Japanese character is used in body in html source. If you run the program, the Japanese character should be character corruption like here.



























To solve the problem, you need to convert ASCII format to display Japanese correctly.
The sample method "ConvertExtendedASCII" is like this.
 private static string ConvertExtendedASCII(string HTML)  
 {  
   string retVal = "";  
   char[] s = HTML.ToCharArray();  
   foreach (char c in s)  
   {  
     if (Convert.ToInt32(c) > 127)  
       retVal += "&#" + Convert.ToInt32(c) + ";";  
     else  
       retVal += c;  
   }  
   return retVal;  
 }  

 public MainPage()  
 {  
   InitializeComponent();  
   string HTML = @"  
           <?xml version='1.0' encoding='utf-8'?>  
           <html>  
             <head>  
             <meta http-equiv='Content-Type' content='text/html;charset=UTF-8' />  
             </head>  
             <body>  
             テストページです。  
             </body>  
           </html>  
           ";  
   this.webBrowser1.NavigateToString(ConvertExtendedASCII(HTML));  
 }  

The result is here.



























The ConvertExtendedASCII method takes so much time if you convert big size html. So, you need to run the method in different thread from UI thread.

No comments:

Post a Comment