Strange characters appear when using WPF webbrowser, and HTML with italic tag and arabic text

问题

I cannot figure this one but I have made a simple demo below. When this page is viewed in IE or Edge it renders properly. I have tried different encodings like utf-16, Windows-1252 but did not work. Looks like an issue with WebBrowser control to me. Can someone figure this out ?

ArabicPage.html

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <p><i>اتفاقية</i></p>
    <p>اتفاقية</p>
</body>
</html>

LayoutTest.xaml

<Page x:Class="WpfApp1.LayoutTest"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:local="clr-namespace:WpfApp1"
    mc:Ignorable="d"
    Background="Yellow"
    d:DesignHeight="450" d:DesignWidth="800"
    Loaded="Page_Loaded"
    Title="LayoutTest">
    <WebBrowser x:Name="MyWebBrowser" Margin="20,5,0,5"/>
</Page>

LayoutTest.xaml.cs

using System;
using System.Text;
using System.Windows;
using System.IO;
using System.Windows.Controls;
namespace WpfApp1
{
    public partial class LayoutTest : Page
    {
        public LayoutTest()
        {
            InitializeComponent();
        }

        private void Page_Loaded(object sender, RoutedEventArgs e)
        {
            string dirPath = AppDomain.CurrentDomain.BaseDi‌rectory;
            string fileName = "ArabicPage.html";
            string filename = Path.GetFullPath(Path.Combine(dirPath, fileName));
            string content = File.ReadAllText(fileName, Encoding.UTF8);
            MyWebBrowser.NavigateToString(content);
        }
    }
}

Without italic tag it renders properly:

Render in Edge browser:

Update:

I have tested this with UWP webview and it works properly there.

回答1:

You can avoid it by using a font that properly supports Arabic characters, as an example Tahoma:

<html lang="ar" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body style = "font-family:Tahoma,serif">
    <p><i style = "font-size:26px;">اتفاقية</i></p>
    <p style = "font-size:26px;">اتفاقية</p>
</body>
</html>

By default the font in windows 10 is Segoe UI. It seems that it is a Windows 10 issue more details from microsoft here.

EDIT:

Reply to comment

In fact you can see at windows 10 settings/fonts page (filter by Arabic), that Segoe UI font has a separate italic face font from the Regular face, on the opposite Tahoma italic is included in the regular face. Although when I tried an Arabic word sample in this settings with Segoe UI as a selected font it was surprisingly properly rendering characters with all the font styles available.

来源：https://stackoverflow.com/questions/61678871/strange-characters-appear-when-using-wpf-webbrowser-and-html-with-italic-tag-an

标签

.net

wpf

localization

internationalization