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

Question

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:

Before adding doctype

After 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)?

Which doctype are you using and *is* your data actually UTF-8 encoded? Where are the persian characters coming from, are they in the file? Needs more info. — Pekka, Apr 12 '11 at 14:12
the page saved in UTF-8. I simply change "direction" to "rtl" and ie show numbers in persian. an if I change it back to "ltr" numbers will be English. — Mahdi, Apr 12 '11 at 14:18
I cannot reproduce this, a minimal example works for me. You need to provide more information. — Konrad Rudolph, Apr 12 '11 at 14:30
By the way, why is this tagged `xhtml-1.0-strict` when you are using a HTML 4 doctype? Worse, you’re actually using XML self-closing tags in the code. (Not that it makes a difference here.) — Konrad Rudolph, Apr 12 '11 at 14:36
I doubt that a browser who "know" how to convert the numerals like this. Are you sure it's not happening server-side? — RoToRa, Apr 12 '11 at 14:46
@Konrad I used strict mode because I want to IE works in standard mode not quark mode so I can use css 2.1 features. — Mahdi, Apr 13 '11 at 05:58
@RoToRa yes I'm sure. because I have a normal grid that show Persian numbers in rtl and Latin numbers in ltr. also I found that this feature only available on IE and before 8 version. — Mahdi, Apr 13 '11 at 06:00
@mahdi But you are using the *wrong* strict mode, or you tagged your question wrong: the tag says that you are using XHTML but your code says that you are using HTML 4. — Konrad Rudolph, Apr 13 '11 at 07:31
Arabic/Persian numbers are Character, not REAL number/integer. — Yousha Aleayoub, Sep 17 '17 at 17:52

score 10 · Answer 1 · answered Apr 02 '12 at 21:55

10

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;
    }

answered Apr 02 '12 at 21:55

Ashkan Ghodrat

3,162
2
32
36

2

this worked for me – MoizNgp Mar 27 '14 at 14:40

Amirali Eshghi · Answer 2 · 2019-02-04T19:06:47.030

9

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>

edited Feb 04 '19 at 19:06

answered Feb 02 '18 at 13:12

Amirali Eshghi

963
1
14
21

1

Thank you for the script. but AFAIK there is no need for the onload attribute for the body tag. – yukashima huksay Feb 03 '19 at 19:27

score 5 · Answer 3 · edited Aug 09 '22 at 05:38

5

In case you need to replace some English to Arabic numerals and not the whole HTML, pass the number you need to this function.

function toArabicNumeral(en) {
    return ("" + en).replace(/[0-9]/g, function(t) {
        return "٠١٢٣٤٥٦٧٨٩".slice(+t, +t+1);
    });
}

edited Aug 09 '22 at 05:38

Ath Genube

15
4

answered Apr 01 '20 at 10:06

Amr Ragaey

1,043
1
10
16

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 `
– Jason Aller Apr 01 '20 at 14:56
@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; }``` – Amr Ragaey Apr 06 '20 at 09:43

score 3 · Answer 4 · answered Nov 18 '15 at 08:00

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>

Kevin Ji · Answer 5 · 2011-04-12T20:07:33.273

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>

score 2 · Answer 6 · answered Jun 20 '12 at 03:38

2

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

answered Jun 20 '12 at 03:38

khani_mahdi

166
9

Thank you my friend. Is there something like this for chrome? – Hosein May 28 '13 at 01:14

score 2 · Answer 7 · answered Feb 16 '15 at 21:41

try this , hope helps you ;)

between and

<script language="JavaScript" type="text/javascript">


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

document.body.innerHTML =
document.body.innerHTML.replace(
/\d(?=[^<>]*(<|$))/g,
function($0) { return map[$0] }
);
}

</script>

then in end of body tag insert this :

<script type="text/javascript">
window.onload = replaceDigits
</script>

score 1 · Answer 8 · edited Oct 02 '13 at 07:48

1

If you use persian fonts like 'BNazanin' and write :

http-equiv="Content-Type" content="text/html; charset=UTF-8"
and http-equiv="Content-Language" content="fa" in meta tags.

You can then see the numbers in persian.

and if you use lang='En' in some tags in your html page the numbers in that tag will be displayed in english.

edited Oct 02 '13 at 07:48

zero323

322,348
103
959
935

answered Oct 02 '13 at 07:19

helper

11
1

the problem is using default fonts like tahoma or arial – Mahdi Nov 09 '13 at 08:43

score 1 · Answer 9 · edited Feb 20 '15 at 19:58

1

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

$.each( $('.format_arabic'), function () {
    var n=$(this).text().replace(/\d(?=[^<>]*(<|$))/g, function($0) { return map_format_arabic[$0]});
    $(this).html(n);
});

edited Feb 20 '15 at 19:58

GitaarLAB

14,536
11
60
80

answered Dec 24 '14 at 21:28

raed

11
1

score 1 · Answer 10 · answered Apr 12 '11 at 14:31

1

This works for me, regardless of the text direction (in Chrome, Safari, Firefox and Opera):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Final//EN">

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style type="text/css">
            body { direction: rtl; }
        </style>
    </head>

    <body>
        ۴۲
    </body>
</html>

(Omitted the content-language since that isn’t necessary here.)

answered Apr 12 '11 at 14:31

Konrad Rudolph

530,221
131
937
1,214

@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? – Konrad Rudolph Apr 12 '11 at 15:04
I use Chrome 10 and yes I saved it with UTF-8 – Mahdi Apr 12 '11 at 15:11

score 0 · Answer 11 · answered May 09 '22 at 19:09

This code supports one or multiple digits of an English number which can be converted to Arabic number:

function toArabicNumber(enNum) {
    if(isNaN(enNum) || enNum == null){ // Check if not a number or null
        return enNum;
    }

    if(typeof enNum == 'string'){ // if it is a string(number) convert it to number
        enNum = Number(enNum);
    }

    if(enNum < 10){
        return "٠١٢٣٤٥٦٧٨٩".substring(enNum, enNum+1);
    }
    else {
        let result = "";
        enNum = enNum + ""; // convert number to string

        for(let i = 0; i < enNum.length; i++){
            let num = Number(enNum[i]); // convert digit by digit to number
            result = result + "٠١٢٣٤٥٦٧٨٩".substring(num, num+1);
        }

        return Number(result);
    }
}

hossein shirkavand · Answer 12 · 2022-08-31T09:23:03.490

0

just specify a persian font like 'B yekan' to them. all troubleshoots will be solved.

edited Aug 31 '22 at 09:23

answered Aug 31 '22 at 09:22

hossein shirkavand

11
5

score 0 · Answer 13 · edited Aug 06 '23 at 12:17

0

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;

edited Aug 06 '23 at 12:17

toyota Supra

3,181
4
15
19

answered Aug 05 '23 at 19:48

Armin Godworship

21
2

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

13 Answers13

Linked