Monaca Onsen UI Discord Chat Github Repo

Multi language?



  • Does anyone have any tips as to how to make an app multi lingual?



  • You can have different js files for each language :data-en.js;data-ar.js
    and this article could be helpful too:
    http://docs.phonegap.com/en/2.2.0/cordova_globalization_globalization.md.html#globalization.getPreferredLanguage





  • Thanks chaps



  • hi,

    Language procurement is best at more youthful ages, when the brain is pliable. Having your kids concentrate on German has financial, scholarly, and instructive advantages that won’t take too lengthy to even think about harvesting. Also that is as of now on top of the current benefits of bilingualism!





  • Hi,

    1. Check localStorage, if nothing recorded means user use your apps for the first time, then get device language and store to localStorage. I prefer using device language to location language, because someone may be in Japan, but is foreigner.
      let systemLanguage = navigator.language.replace('-', '_').toLowerCase().substr(0, 2);
      localStorage.setItem("language", systemLanguage);
    
    1. But your apps cannot support all languages, so you have to check if you can support that user’s device language. If not supported, set it to default language.
    const supportLanguages = {
        "ja": "日本語", //Japanese
        "zh": "中文",  // Chinese
        "en": "English"
    };
    if (!supportLanguages.hasOwnProperty(systemLanguage)) {
       systemLanguage = "en"
     }
    
    1. In your Apps content, your set class for different languages text.
        <ons-tabbar swipeable position="auto">
            <ons-tab page="home.html">
                <input type="radio" style="display: none">
                <button class="tabbar__button">
                    <div class="tabbar__icon">
                        <ons-icon icon="ion-ios-home"></ons-icon>
                    </div>
                    <div class="tabbar__label">
                        <span class="lang en">Home</span>
                        <span class="lang zh">首頁</span>
                        <span class="lang ja">ホーム</span>
                    </div>
                </button>
            </ons-tab>
    
            <ons-tab page="products.html">
                <input type="radio" style="display: none">
                <button class="tabbar__button">
                    <div class="tabbar__icon">
                        <ons-icon icon="ion-ios-construct"></ons-icon>
                    </div>
                    <div class="tabbar__label">
                        <span class="lang en">Products</span>
                        <span class="lang zh">產品</span>
                        <span class="lang ja">製品</span>
                    </div>
                </button>
            </ons-tab>
    
            <ons-tab page="contactus.html">
                <input type="radio" style="display: none">
                <button class="tabbar__button">
                    <div class="tabbar__icon">
                        <ons-icon icon="ion-ios-people"></ons-icon>
                    </div>
                    <div class="tabbar__label">
                        <span class="lang en">Contact Us</span>
                        <span class="lang zh">聯絡我們</span>
                        <span class="lang ja">お問い合わせ</span>
                    </div>
                </button>
            </ons-tab>
      </ons-tabbar
    
        .unselectedLanguages {
          display: none;
        }
    
    function setLanguage(lang) {
    
        let languages = document.getElementsByClassName('lang');
        for (language of languages) {
            language.classList.add("unselectedLanguages")
        }
    
        let selectedLanguage = document.getElementsByClassName(lang);
        for (language of selectedLanguage) {
            language.classList.remove("unselectedLanguages")
        }
    
        localStorage.setItem("language", lang);
    }
    
    1. You can have a ‘Settings’ menu, or a language ‘button’ for user to change his preferred language, and save it to localStorage for next time usage.
       letpreferedLanguage = localStorage.getItem("language");
       setLanguage(preferedLanguage);
    

    Regards,
    Gobi



  • @gobiyau said in Multi language?:

    Hi,

    1. Check localStorage, if nothing recorded means user use your apps for the first time, then get device language and store to localStorage. I prefer using device language to location language, because someone may be in Japan, but is foreigner.
      let systemLanguage = navigator.language.replace('-', '_').toLowerCase().substr(0, 2);
      localStorage.setItem("language", systemLanguage);
    
    1. But your apps cannot support all languages, so you have to check if you can support that user’s device language. If not supported, set it to default language.
    const supportLanguages = {
        "ja": "日本語", //Japanese
        "zh": "中文",  // Chinese
        "en": "English"
    };
    if (!supportLanguages.hasOwnProperty(systemLanguage)) {
       systemLanguage = "en"
     }
    
    1. In your Apps content, your set class for different languages text.
        <ons-tabbar swipeable position="auto">
            <ons-tab page="home.html">
                <input type="radio" style="display: none">
                <button class="tabbar__button">
                    <div class="tabbar__icon">
                        <ons-icon icon="ion-ios-home"></ons-icon>
                    </div>
                    <div class="tabbar__label">
                        <span class="lang en">Home</span>
                        <span class="lang zh">首頁</span>
                        <span class="lang ja">ホーム</span>
                    </div>
                </button>
            </ons-tab>
    
            <ons-tab page="products.html">
                <input type="radio" style="display: none">
                <button class="tabbar__button">
                    <div class="tabbar__icon">
                        <ons-icon icon="ion-ios-construct"></ons-icon>
                    </div>
                    <div class="tabbar__label">
                        <span class="lang en">Products</span>
                        <span class="lang zh">產品</span>
                        <span class="lang ja">製品</span>
                    </div>
                </button>
            </ons-tab>
    

    Wildtornado - cryptocurrency casino
    <ons-tab page=“contactus.html”>
    <input type=“radio” style=“display: none”>
    <button class=“tabbar__button”>
    <div class=“tabbar__icon”>
    <ons-icon icon=“ion-ios-people”></ons-icon>
    </div>
    <div class=“tabbar__label”>
    <span class=“lang en”>Contact Us</span>
    <span class=“lang zh”>聯絡我們</span>
    <span class=“lang ja”>お問い合わせ</span>
    </div>
    </button>
    </ons-tab>
    </ons-tabbar

    
    ```css
        .unselectedLanguages {
          display: none;
        }
    
    function setLanguage(lang) {
    
        let languages = document.getElementsByClassName('lang');
        for (language of languages) {
            language.classList.add("unselectedLanguages")
        }
    
        let selectedLanguage = document.getElementsByClassName(lang);
        for (language of selectedLanguage) {
            language.classList.remove("unselectedLanguages")
        }
    
        localStorage.setItem("language", lang);
    }
    
    1. You can have a ‘Settings’ menu, or a language ‘button’ for user to change his preferred language, and save it to localStorage for next time usage.
       letpreferedLanguage = localStorage.getItem("language");
       setLanguage(preferedLanguage);
    

    Regards,
    Gobi

    Thank you very helpful.