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.

 

 

Comments (0)