Multi language website ( HTML / javascript)

Question

i need to create a webpage as a project for my university degree and it must support at least 2 languages.

So i was thinking on creating an xml file and define all text filed values for each language, something like this:

 <Login-en>
        <login-header-text>Login</login-header-text>
        <username-text>Username:</username-text>
        <password-text>Password:</password-text>
        <remember-me-text>Remember me</remember-me-text>
  </Login-en>

Then on the bottom of the html template with a small javascript load the xml file loop the nodes and replace the content of the HTML, like this

<div id="container">
<form name="loginForm" id="loginForm" onsubmit="return validate();"  method="post">
    <div class="login" id="login-header-text"></div>
    <div class="username-text" id="username-text"></div>
    <div class="password-text" id="password-text"></div>
    <div class="username-field" id="username-field-div">
        <input type="text" name="username" id="usernameInput" value="" />
    </div>
    <div class="password-field" id="password-field-div">
        <input type="password" name="password" id="passwordInput" value=""/>
    </div>
    <div class="remember-checkbox">
        <input type="checkbox" name="remember-me" id="remember-me" />
        <label for="remember-me" id="remember-me-text"></label>
    </div>
    <input type="submit" name="submit" value="" />
</form>

<script type="text/javascript">
xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET",'language/lang.xml',false);
xmlhttp.send();
xmlDoc = xmlhttp.responseXML;
var selectedLanguageElements = xmlDoc.getElementsByTagName("Login-" + "en")[0].childNodes;
for(var i=0;i<selectedLanguageElements.length;i++)
{
    if(selectedLanguageElements[i].nodeType == Node.ELEMENT_NODE) {
        document.getElementById(selectedLanguageElements[i].nodeName).innerHTML = selectedLanguageElements[i].firstChild.nodeValue;
    }
}

Is this good enough or there is some more elegant way of doing it ?

Thank you for any suggestions.

I would define what is meant by two languages, if Javascript counts and HTML doesn't, then I would say that XML also shouldn't count as a language. — Jonathan Clark, Jan 26 '16 at 14:14
http://stackoverflow.com/questions/228835/best-practice-javascript-and-multilanguage — Drone, Jan 26 '16 at 14:15
It's not very good doing that by javascript because lots of search engines doesn't accept js transformations. So like that your website would be empty. Do a translation on server site (with php or other more modern stuff like node.js). Use some hooks like {translate12312321321} and replace them before the output to html steam — Pete, Jan 26 '16 at 14:17
[Google - Make your website instantly available in 90+ languages](https://translate.google.com/manager/website/) — Yogi, Jan 26 '16 at 14:56
This is classic "don't roll your own" territory -- internationalization is harder than it looks. Any simple string-replacement scheme such as you're considering will fall down on stuff like pluralization... — Daniel Beck, Jan 26 '16 at 16:00
Well i need to have two languages, the international English and my Country's one. I will try 18njs recommended @Alisson Alvarenga, i don't really want to use php, the back_end is java web app with servlet's and on the front_end i am using backbone. — Szasz Andras, Jan 26 '16 at 16:18
you have here a possible solution for a multilingue jQuery approach: https://stackoverflow.com/a/47612798/1243247 — João Pimentel Ferreira, Dec 02 '17 at 21:38

score 0 · Answer 1 · answered Jan 26 '16 at 15:35

For a project for your university degree I think this is good enough. But in my opinion I think JSON will be better than XML, but if you want to use XML it's ok. Other thing that will be better is to use one file to each language, for example lang-en.xml, lang-de.xml ... so when you request the language file you receive just to a specific language, so this way you are avoiding to receive unnecessary data.

If you want to know more I recommend you to study some source codes like http://i18njs.com/ to see how this work and how they do.

score 0 · Answer 2 · edited Aug 07 '19 at 11:02

This answer might not help you any more with your university project. However, it might help others that are seeking the same question.

For a really smooth and easy translation, you can use Cloud Translation, it's a free and an open-source project from Angry Monkey Cloud: https://github.com/angrymonkeycloud/CloudTranslation.

You should add reference to jQuery first, then to the CloudTranslation JavaScript file:

<script crossorigin="anonymous" src="https://cdn.amcapi.com/translation/cloudtranslation-1.0.0.min.js"></script>

And add the configuration within the HTML head as follows:

<script type="application/json" id="CloudTranslationConfig">
    {
  "Settings": {
    "DefaultLanguage": "en",
    "TranslatorProvider": "Azure", // Could be empty if you want to provide the translations manually
    "TranslatorProviderKey": "{Your Microsoft Azure Translator Key}",
    "UrlLanguageLocation": "Subdirectory"
  },
  "Languages": [
    {
      "Code": "en",
      "DisplayName": "English"
    },
    {
      "Code": "de",
      "DisplayName": "Deutsch"
    }
  ]
}
</script>

and add your own custom select (dropdown) having the class "CloudTranslationSelect" to display the list of predefined languages.

More information found on https://www.angrymonkeycloud.com/translation

Multi language website ( HTML / javascript)

2 Answers2