How can I view Arabic/Persian numbers in a HTML page with strict doctype?

html numbers doctype arabic xhtml-1.0-strict

41,239

Solution 1

here is a little javascript code that converts a 1234 string to ١٢٣٤ string

   var map =
    [
    "&\#1632;","&\#1633;","&\#1634;","&\#1635;","&\#1636;",
    "&\#1637;","&\#1638;","&\#1639;","&\#1640;","&\#1641;"
    ];

    function getArabicNumbers(str)
    {
        var newStr = "";

        str = String(str);

        for(i=0; i<str.length; i++)
        {
            newStr += map[parseInt(str.charAt(i))];
        }

        return newStr;
    }

Solution 2

You can convert English digits to Persian digits using this JavaScript code in your template:

    <script type="text/javascript">
    var replaceDigits = function() {
        var map = ["&\#1776;","&\#1777;","&\#1778;","&\#1779;","&\#1780;","&\#1781;","&\#1782;","&\#1783;","&\#1784;","&\#1785;"]
        document.body.innerHTML = document.body.innerHTML.replace(/\d(?=[^<>]*(<|$))/g, function($0) { return map[$0]});
    }
    window.onload = replaceDigits;
    </script>

Solution 3

It is very simple to view Arabic/Persian numbers in a HTML page.

I solved the same problem by changing the font name,

In my case I want to display the same character to all users

you can choose a font that contains Arabic-Hndi digits and import it using the css ( @font-face ) then simply use it,

This works fine for all major browsers (IE .. Firefox .. Chrome)

look at this result

here is the full code of the page:

<html>
<head>

</head>
<body>
<style type="text/css">

@font-face {
    font-family: ArabicTwo_Bold;
    src: url( ArabicTwo_Bold.eot);
}

@font-face {
    font-family: ArabicTwo_Bold;
    src: url( ArabicTwo_Bold.ttf);
}


div , input {
 font-family: ArabicTwo_Bold;
}
</style>


<input type='text' value='هذا نص هندي 123456 ' />
<div> هذا نص هندي 123456  </div>
</body>
</html>

Solution 4

Assuming you want an XHTML 1.0 Strict document:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fa" lang="fa" dir="rtl">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Title here</title>
  </head>

  <body>
    <p>Text here</p>
  </body>
</html>

Here's an equivalent HTML 4.01 Strict document:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
<html lang="fa" dir="rtl">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Title here</title>
  </head>

  <body>
    <p>Text here</p>
  </body>
</html>

Here's an equivalent HTML5 page, just for comparison purposes.

<!DOCTYPE html>
<html lang="fa" dir="rtl">
  <head>
    <meta charset="UTF-8" />
    <title>Title here</title>
  </head>

  <body>
    <p>Text here</p>
  </body>
</html>

Solution 5

firefox default render number to latin for change this setting go to addressbar of Firefox and type about:config this page is advanced setting of firefox find this line "bidi.numeral" and double click on it if set value to "1" firefox for render text look at context. if text is persian render number to persian. if set value to "4" alwase render digit number to persian

View more solutions

41,239

Author by

Mahdi

Now I'm in 10th year of leading team experience and 14th year of web developing. My main developer skill focused on .Net framework (both Core and Classic) and Angular (v1 and V8) and system and application architecture as well. I have deep knowledge of OOP and DI concepts and created many maintainable projects using these skills. I'm a talent, easy communicating, hardworking guy that has a good relationship with coworkers and can make the team more efficient; with IT and managing skills.

Updated on July 09, 2022

Comments

Mahdi almost 2 years
I have an HTML page that is right-to-left. When I don't use any doctype, my numbers are in Arabic/Persian, but when I use strict mode they turn to English.
```
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Final//EN">
```
Before adding doctype:

After adding doctype:

also I added these meta tags to my page:
```
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="fa" />
```
So how can I view Arabic numbers in a page with strict doctype (in IE because Firefox doesn't show Arabic numbers anyway)?
Konrad Rudolph about 13 years

@mahdi It most certainly does work in Chrome. What’s your browser version? Did you save the file using the correct encoding? I can’t really speak for IE9 (and to be honest I couldn’t care less about MISE) but I don’t really believe that MSIE would convert some Unicode characters into entirely unrelated characters without some prompting. Do you perhaps have a plugin installed that does an automatic Farsi => English translation?
Mahdi about 13 years

I use Chrome 10 and yes I saved it with UTF-8
Hosein almost 11 years

Thank you my friend. Is there something like this for chrome?
Mahdi over 10 years

the problem is using default fonts like tahoma or arial
MoizNgp about 10 years

this worked for me <script type="text/javascript"> var map = [ "&\#1632;","&\#1633;","&\#1634;","&\#1635;","&\#1636;", "&\#1637;","&\#1638;","&\#1639;","&\#1640;","&\#1641;" ]; function getArabicNumbers(str) { var newStr = ""; str = String(str); for(i=0; i<str.length; i++) { newStr += map[parseInt(str.charAt(i))]; } return newStr; } $(document).ready(function(){ $(".arabic-num td").each(function(){ $(this).html(getArabicNumbers($(this).html())); }); }); </script>
yukashima huksay about 5 years

Thank you for the script. but AFAIK there is no need for the onload attribute for the body tag.
Jason Aller about 4 years

Code only answers can almost always be improved by adding some explanation of how and why they work. In this case an eight year old question with nine existing answers should also address what new aspect of the question it is answering. How will this code be used to alter the elements of an ordered list generated with <ol>?
Amr Ragaey about 4 years

@JasonAller, This code provide a way to replace any English numeral to Arabic numeral which is different than previous replies that replace whole HTML elements. If the case to alter elements of an ordered list generated, css can do the job: ol { list-style: arabic-indic; }