Farsi/Arabic number to be outputed properly

Question

Ok, may be you think this dup question but I swear its not. lol You have a file that outputs as such:

<div id="first">1</div>
2
<div id="third">
    <? $i = 3; echo(i) ?>
</div>

Which outputs:

1
2
3

Now if I want to have an output as below:

?
?
?

Well, I was hoping I could put Arabic/Farsi version of 1,2,3 instead of '?'. This is driving me nuts, Q1:How can I using HTML/CSS convert numbers to Arabic/Farsi?

Q2:And why the heck when I change my language (winxp) everything changes except numbers?

Answer 1

1. There is no automated way to change numbers, or even digits. Set up a mapping between then and convert manually.

2. Numbers are never localized, because unlike natural language words, Arabic numerals are understood across most of the world.

Answer 2

If you want to number a list, you could use an ol element and change the list-style-type of it like:

ol {
    list-style: arabic-indic;
}

Answer 3

Expanding on ShirzITCo and Kirk Woll's answer above -- which saved my but when client decided all the content in a WordPress CMS should use Eastern-Arabic numerals instead of the Western Arabic they started with:

function recursiveReplace(node) {
  if (node.nodeType === 3) { // text node
    node.nodeValue = node.nodeValue
    .replace(/0/g,'۰')
    .replace(/1/g,'۱')
    .replace(/2/g,'۲')
    .replace(/3/g,'۳')
    .replace(/4/g,'۴')
    .replace(/5/g,'۵')
    .replace(/6/g,'۶')
    .replace(/7/g,'۷')
    .replace(/8/g,'۸')
    .replace(/9/g,'۹');
  } else if (node.nodeType === 1) { // element
    $(node).contents().each(function () {
      recursiveReplace(this);
    });
  }
}
recursiveReplace(document.body);

Answer 4

Use this javascript, this will replace numbers:

function recursiveReplace(node) {
    if (node.nodeType == 3) { // text node
        node.nodeValue = node.nodeValue.replace("1", "۱");
    } else if (node.nodeType == 1) { // element
        $(node).contents().each(function () {
            recursiveReplace(this);
        });
    }
}

recursiveReplace(document.body);