Multi language?

[StevieC]

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

[Ahmed Elshorbagy]

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

[Leonardo Augusto]

Some links to you

https://angular-translate.github.io/
https://www.tutorialspoint.com/cordova/cordova_globalisation.htm

[StevieC]

Thanks chaps

[sjain]

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!

[opinionabsorb]

Try it! I think it helpful
https://www.tutorialspoint.com/cordova/cordova_globalisation.htm/wordle today

[gobiyau]

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);

2. 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"
 }

3. 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);
}

4. 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

[JohnKlein94]

@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);

2. 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"
 }

3. 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);
}

4. 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.