Display Arabic Native Digits in Silverlight

Several Arabic countries do not use 1,2,3 .. etc.. They use Indic digits ١,٢,٣… etc. Silverlight 4, doesn’t display Arabic native digits, by default. However, there is a workaround to convert the digits yourself from Arabic-English (1,2,3..) digits to Arabic-Indic (١,٢,٣…) digits.

This is possible because Silverlight supports Unicode. The Arabic-Indic numbers are available in Unicode ranges 0x0660 to 0x0669. So to display the Arabic Indic numbers you can perform a simple mapping function to convert the English numbers to Arabic. Please take care that you should display these numbers using a Unicode font that can display the different digits, for example Arial, Tahoma, Courier New, Times New Roman … etc.

I wrote this simple function:

Dim IndicNumbers As String = "٠١٢٣٤٥٦٧٨٩"

Private Function ToIndicDigits(InputString As String) As String

Dim outString = New System.Text.StringBuilder

Dim inChars() As Char = InputString.ToCharArray

For Each c As Char In inChars

If Char.IsDigit(c) Then

outString.Append(IndicNumbers(Int32.Parse(c)))

Else

outString.Append(c)

End If

Next

ToIndicDigits = outString.ToString

End Function

The code simply replaces the numbers to their Arabic-Indic equivalent and then you can use the new string to display it.

I was writing this sample, and I thought it would also be interesting to do the opposite. Therefore, I wrote a function that would receive a string and convert all the Arabic-Indic numbers back to Arabic-English numbers 1,2,3 .. etc.

Check this code too:

Private Function ToEnglishDigits(InputString As String) As String

Dim outString = New System.Text.StringBuilder

Dim inChars() As Char = InputString.ToCharArray

Dim Index As Integer = 0

For Each c As Char In inChars

If IndicNumbers.Contains(c) Then

Index = IndicNumbers.IndexOf(c)

outString.Append(Index)

Else

outString.Append(c)

End If

Next

ToEnglishDigits = outString.ToString

End Function

I wrote this sample to demo these two functions. It’s a simple Silverlight user control, that converts to English digits or to Indic digits. This is screenshot of the sample:

This is the sample code that you can use. In the MainPage.xaml, place this code:

<UserControl x:Class="SilverlightNumeralsSample.MainPage"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

mc:Ignorable="d"

d:DesignHeight="300" d:DesignWidth="500">

<Grid x:Name="LayoutRoot">

<Grid.RowDefinitions>

<RowDefinition Height="40" />

<RowDefinition Height="*" />

</Grid.RowDefinitions>

<TextBlock Text="Arabic Indic Conversion Sample" Margin="2" Foreground="#FF45D8D8" FontSize="24" />

<Grid x:Name="body" Grid.Row="1" MaxWidth="800" MaxHeight="500" >

<Grid.RowDefinitions>

<RowDefinition Height="40" />

<RowDefinition Height="60" />

<RowDefinition Height="*" />

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

<ColumnDefinition Width="150*" />

<ColumnDefinition Width="130" />

<ColumnDefinition Width="150*" />

</Grid.ColumnDefinitions>

<TextBlock Margin="3" Text="Arabic-English Number:" VerticalAlignment="Bottom"/>

<TextBlock Grid.Column="2" Margin="3" Text="Arabic-Indic Number:" VerticalAlignment="Bottom"/>

<TextBox Margin="2" Name="EnglishTB" Grid.Row="1" Text="Hello 1234567890"/>

<TextBox Grid.Column="2" Grid.Row="1" Margin="2" Name="IndicTB" FontFamily="Courier New" />

<StackPanel Grid.Column="1" Grid.Row="1" Margin="2" Name="StackPanel1" >

<Button Content="To English Digits" Margin="2" Name="ToEnglishBtn" />

<Button Content="To Indic Digits" Margin="2" Name="ToIndicBtn" />

</StackPanel>

</Grid>

</Grid>

</UserControl>

In the code behind, mainPage.xaml.vb, place this code:

Private Sub ToEnglishBtn_Click(sender As System.Object, e As System.Windows.RoutedEventArgs) Handles ToEnglishBtn.Click

EnglishTB.Text = ToEnglishDigits(IndicTB.Text)

End Sub

Private Sub ToIndicBtn_Click(sender As System.Object, e As System.Windows.RoutedEventArgs) Handles ToIndicBtn.Click

IndicTB.Text = ToIndicDigits(EnglishTB.Text)

End Sub

Dim IndicNumbers As String = "٠١٢٣٤٥٦٧٨٩"

Private Function ToIndicDigits(InputString As String) As String

Dim outString = New System.Text.StringBuilder

Dim inChars() As Char = InputString.ToCharArray

For Each c As Char In inChars

If Char.IsDigit(c) Then

outString.Append(IndicNumbers(Int32.Parse(c)))

Else

outString.Append(c)

End If

Next

ToIndicDigits = outString.ToString

End Function

Private Function ToEnglishDigits(InputString As String) As String

Dim outString = New System.Text.StringBuilder

Dim inChars() As Char = InputString.ToCharArray

Dim Index As Integer = 0

For Each c As Char In inChars

If IndicNumbers.Contains(c) Then

Index = IndicNumbers.IndexOf(c)

outString.Append(Index)

Else

outString.Append(c)

End If

Next

ToEnglishDigits = outString.ToString

End Function

I hope you find this useful.