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

Question

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.

Wonder if this helps: https://stackoverflow.com/questions/7281137/webbrowser-encoding-problem — Alex, May 11 '20 at 11:17
@Alex i have played around with different encodings none worked, UTF-8 and 16 should work anyway but maybe it's nothing to do with encoding ? Interestingly I have tested this in UWP webview and it works fine — IronHide, May 11 '20 at 11:49
This answer talks about loading the URL and then doing a refresh: https://stackoverflow.com/a/12285309/177416 — Alex, May 11 '20 at 14:22
You need to label the html `lang` as arabic, of your type, not `en` — Dragonthoughts, May 11 '20 at 23:41

Cfun · Answer 1 · 2020-05-12T15:01:46.560

3

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.

edited May 12 '20 at 15:01

answered May 11 '20 at 16:55

Cfun

8,442
4
30
62

you are right this font make it work, how did you find this out, why it does not work when font is not specified, what is actually happening under the hood ? – IronHide May 11 '20 at 22:27
@IronHide I don't know exactly what is going on under the hood but i have provided a link in the answer that contains some details, i believe you are using windows10 since the same code that showing square instead of Arabic characters on windows 10 will run just fine on windows7. – Cfun May 11 '20 at 22:52
1

You have labeled the html for the page as being in English, not Arabic. – Dragonthoughts May 11 '20 at 23:42
@Dragonthoughts thanks I have edited, note: with `lang="ar"` only issue persist. – Cfun May 11 '20 at 23:50
1

I realise that will not alter the display, unless there are strong latin characters present, but in production, this will mislead search engines, and assistive technologies, such as screen readers. – Dragonthoughts May 11 '20 at 23:52
@Cfun thank you for the link, looks like it's related, but I am wondering why italics tag is the cause of the issue ? Perhaps is converted to a font that does not support arabic under the hood ? – IronHide May 12 '20 at 05:41
Sorry I don't know the answer about that, but if my solution answers your question please accept it. – Cfun Feb 07 '21 at 14:40

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

1 Answers1

Linked