Html + JavaScript: How to create a multi-language/Localize/Internationalize website in HTML5?

Today one of the best ways to target a large audience on the website is, the website needs to be compatible with multiple languages. Many server-side development languages have a built-in mechanism like CakePHP, ASP.Net and More. But what will be the case if someone has only knowledge of HTML and want to develop a multi-language application?

When one of my friends came to this situation where he wants to create a website for English and the Arabic language were both having different element structure/alignments. He plans to create two application folders for English and Arabic, and manage accordingly. He asks me to suggest some solution to avoid repeated work. I googled and found that He can use a JSON object with some javascript code to manipulate labels. But that only applicable for Label changes but nothing to do with element/tags alignments.

So, I create a small pure javascript library “mlang-min.js” to achieve label change with alignment as per user language selection and provide some basic options for configurations like Language, Direction and Style.

After the complete website, he came to me and told me that the library was really too much helpful and easy to use.

So I thought to write a post to share which maybe helps others also. If anyone has any suggestions please share in comments.

Let’s look into code-

Note: mlang-min.js library uses localStorage (which is supported by all 
modern browsers) to store user selection.
  1. The folder structure looks like this-

folders

Let’s look into Index.html-

  • Include mlang.min.js
<script type="text/javascript" src="mlang-min.js" ><\script>
  • Load application with default language and settings in a window load function
    window.onload = function () {
       mLang.init({ 
              lang : 'en', //default lang: english
              //rPath : "language" }); 
    };


//Specify rPath if your language folder is having different name 
//(default : language)
  • Add lang-lbl=”lbl_Name” attribute on all HTML elements which you want to change according to the selected language
<div class="control">
   <label lang-lbl="lbl_Name">Name<\/label>
   <input type="text" name="name"\/>
<\/div>
    • Finally, Add change language function which will take care to load application with the selected language-
function _changeLang(_lang){
     switch(_lang){
             case "en" : //English
             case "es" : //Spanish
                  mLang.setLanguage({ 
                      lang : _lang, 
                      reload : true, //Reload after set language
                      //rPath : "language"
                  });
              break;
              case "ar" : //Arabic
                  mLang.setLanguage({ 
                      lang : _lang, 
                      dir : 'rtl', //Direction for HTML
                      langCss : ['css/style-rtl.css'], //Special stylesheet
                      reload : true,
                      //rPath : "language"
                  });
              break;
     }
}

Hope this will help someone.

To download the complete demo application click here.

Leave a comment