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

Asked 12/4, 2011 at 13:27 Answered 22/12, 2023 at 9:17

html numbers doctype arabic xhtml-1.0-strict

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

Transitory answered 12/4, 2011 at 13:27 Comment(10)

Which browser? Which doctype? Could you show us an example? – Syndrome 12/4, 2011 at 13:29

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. – Addictive 12/4, 2011 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. – Transitory 12/4, 2011 at 14:18

I cannot reproduce this, a minimal example works for me. You need to provide more information. – Alcantar 12/4, 2011 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.) – Alcantar 12/4, 2011 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? – Moldboard 12/4, 2011 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. – Transitory 13/4, 2011 at 5:58

@Moldboard 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. – Transitory 13/4, 2011 at 6:0

@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. – Alcantar 13/4, 2011 at 7:31

Arabic/Persian numbers are Character, not REAL number/integer. – Fontanel 17/9, 2017 at 17:52

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>

Blackguardly answered 2/2, 2018 at 13:12 Comment(1)

Thank you for the script. but AFAIK there is no need for the onload attribute for the body tag. – Poison 3/2, 2019 at 19:27

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

Semifinal answered 2/4, 2012 at 21:55 Comment(1)

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> – Gourd 27/3, 2014 at 14:40

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

Antoinette answered 1/4, 2020 at 10:6 Comment(2)

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>? – Parakeet 1/4, 2020 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; } – Antoinette 6/4, 2020 at 9:43

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>

Merger answered 12/4, 2011 at 20:0 Comment(0)

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>

Decalescence answered 18/11, 2015 at 8:0 Comment(0)

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

Diminish answered 20/6, 2012 at 3:38 Comment(1)

Thank you my friend. Is there something like this for chrome? – Indignation 28/5, 2013 at 1:14

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>

Elvyn answered 16/2, 2015 at 21:41 Comment(0)

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.)

Alcantar answered 12/4, 2011 at 14:31 Comment(2)

@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? – Alcantar 12/4, 2011 at 15:4

I use Chrome 10 and yes I saved it with UTF-8 – Transitory 12/4, 2011 at 15:11

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.

Rhythmical answered 2/10, 2013 at 7:19 Comment(1)

the problem is using default fonts like tahoma or arial – Transitory 9/11, 2013 at 8:43

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

Knickerbocker answered 24/12, 2014 at 21:28 Comment(0)

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

Compressed answered 9/5, 2022 at 19:9 Comment(0)

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

Alisaalisan answered 31/8, 2022 at 9:22 Comment(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;

Introrse answered 5/8, 2023 at 19:48 Comment(0)

Use toLocalString("fa") for Persian characters.

Dipterocarpaceous answered 22/12, 2023 at 9:17 Comment(0)

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Recommended topics

Hot tags