Geek Answers Handbook

How can I view Arabic / Persian numbers on an HTML page with strict doctype?

I have an HTML page that is from right to left. When I do not use any doctype, my numbers are in Arabic / Persian, but when I use strict mode, they translate into English.

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

Before adding doctype:

Before adding doctype

After adding doctype:

After adding doctype

I also 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 on a page with strict doctype (in IE, because Firefox does not show Arabic numbers)?

+11
html numbers doctype xhtml-1.0-strict arabic
source share
9 answers

here is a little javascript code that converts line 1234 to line 1234

  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; }
+8
source share

Assuming you need a rigorous XHTML 1.0 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 the equivalent of 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 is the equivalent HTML5 page, for comparison only.

 <!DOCTYPE html> <html lang="fa" dir="rtl"> <head> <meta charset="UTF-8" /> <title>Title here</title> </head> <body> <p>Text here</p> </body> </html>
+3
source share

the default firefox rendering number for latin is to change this parameter go to the Firefox address bar and enter approximately: config this page is an advanced firefox setting find this line "bidi.numeral" and double click on it if it is set to "1" firefox for render text, look at context. if the text is a Persian Persian rendering number. if set to "4" alwase displays the number of digits in Persian

+2
source share

It is very easy to view Arabic / Persian numbers on an HTML page.

I solved the same problem by changing the font name,

In my case, I want to show the same character to all users

you can select a font that contains Arabic numerals and import it using css (@ font-face) and then just use it,

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

look at this result

here is the full page code:

 <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>
+2
source share

You can convert English numbers to Persian 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>
+2
source share

This works for me, regardless of the direction of the text (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 content-language , as this is not necessary here.)

+1
source share
 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); });
+1
source share

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 the meta tags.

Then you can see the numbers in Persian.

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

0
source share

try this, hopefully 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 at the end of the body tag insert this:

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

More articles:


All Articles