Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

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.