Numbers localization in Web applications

前端 未结 8 657
渐次进展
渐次进展 2020-12-23 14:30

How can I set the variant of Arabic numeral without changing character codes ?

Eastern Arabic      ۰   ۱   ۲   ۳   ٦   ٥   ٤   ۷   ۸   ۹
Persian variant              


        
相关标签:
8条回答
  • 2020-12-23 15:26

    I have been working on a general web page localization technique that does more than just numbers (its similar to .po files)

    The localization files are simple (the strings can contain html if needed)

    /* Localization file - save as document_url.lang.js ... index.html.en.js: */
    items=[
    {"id":"string1","value":"Localized text of string1 here."},
    {"id":"string2", "value":"۰ ۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ "}
    ];
    rtl=false; /* set to true for rtl languages */
    

    This format is useful to separate out for translators (or mechanical turk)

    and a basic page template

    <html><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <head><title>My title</title>
    <style>.txt{float:left;margin-left:10px}</style>
    </head>
    <body onload='setLang()'>
    <div id="string1" class="txt">This is the default text of string1.</div>
    <div id="string2" class="txt">0 1 2 3 4 5 6 7 8 9 </div>
    </body></html>
    <script>
       function setLang(){
          for(var i=0;i<items.length;i++){
             term=document.getElementById(items[i].id)
             if(term)term.innerHTML=items[i].value
             if(rtl){  /* for rtl languages */ 
                term.style.styleFloat="right"
                term.style.cssFloat="right"
                term.style.textAlign="right"
             }
          }
       }
       var lang=navigator.userLanguage || navigator.language;
       var script=document.createElement("script");
       script.src=document.URL+"-"+lang.substring(0,2)+".js"
       var head = document.getElementsByTagName('head')[0]
       head.insertBefore(script,head.firstChild)
    </script>
    

    I tried to keep it pretty simple, yet cover as many locales as possible so additional css is likely required (I have to admit a lack of exposure to rtl languages, so many more styles may need to be set)

    I do have font checking code that would be useful if you know what fonts support your character codes well

    function hasFont(f){
        var s=document.createElement("span")
        s.style.fontSize="72px"
        s.innerHTML="MWMWM"
        s.style.visibility="hidden"
        s.style.fontFamily=[(f=="monospace")?'':'monospace','sans-serif','serif']
        document.body.appendChild(s)
        var w=s.offsetWidth
        s.style.fontFamily=[f,'monospace','sans-serif','serif']
        document.body.lastChild=s
        return s.offsetWidth!=w
    }
    

    usage: if(hasFont("myfont"))myelement.style.fontFamily="myfont"

    0 讨论(0)
  • 2020-12-23 15:27

    You can convert numbers in this way:

    const persianDigits = ['۰', '۱', '۲', '۳', '۴', '۵', '۶', '۷', '۸', '۹'];
    const number = 44653420;
    
    convertedNumber = String(number).replace(/\d/g, function(digit) {
        return persianDigits[digit]
    })
    console.log(convertedNumber) // ۴۴۶۵۳۴۲۰
    
    0 讨论(0)
提交回复
热议问题