Multi language feature in a Website

In this short article, I'll describe how to implement a multi language feature in a Website.

In my opinion, a multi language feature is important in a Website, because not everyone speaks (or at least understand) various languages, so when you add this feature to your Website, I think it helps to improve the user experience in your Website.

As a disclaimer, this post describe only a one way to implement a multi language feature for a static web page, maybe you know other ways to solve this, but in this example we'll use JavaScript to switch between languages (only English/Spanish) and using a <span> as a language toggle.

Let's get started

Define TAGS with an ID
This step is important when you define your HTML structure, since you need to define an ID for all of your HTML elements that you want to translate.
```
<h1 id="l_title">Title</h1>
<div>
 <h2 id="l_subtitle">Subtitle</h2>
 <p id="l_text1">some text in english</p>
 <p id="l_text2">aditional text in english</p>
</div>
```
❕It's important to define the ID names with the "l_*" nomenclature, because in the JavaScript logic it'll be used for translation.
Create the <span> toggle
Add at the top of your page the <span> toggle that will switch between English/Spanish, and the click event it'll be added in the JavaScript code section (next step), for now we just define something like this.
```
<div>
 <span id="link-toggle-lang">Español</span>
</div>
```

Add the JavaScript code
First, declare the link_toggle_lang variable that retrieve the <span> element defined in the previous step, and this variable will be used in the translation function.

let link_toggle_lang = document.getElementById("link-toggle-lang")

Now let's define two objects where contains all the text that you want to show and translate in your Website.

const label_en = {
 l_title: "Title",
 l_subtitle: "Subtitle",
 l_text1: "this is an example text",
 l_text2: "additional text"
} 
const label_es = {
 l_title: "Titulo",
 l_subtitle: "Subtitulo",
 l_text1: "este es un texto de ejemplo",
 l_text2: "texto adicional"
}

It's time to define the function and click event for the link_toggle_lang variable, in this function we'll retrieve all the DOM elements that would be translated, so to do that, we'll use the querySelectorAll property in combination with a regular expression to retrieve all the elements to translate, those elements will be stored in the myLabels array.

link_toggle_lang.addEventListener('click', function () {
 let lang = {}
 let myLabels = document.querySelectorAll("[id^='l_']")
 let current_lang = "es"

 ...
})

Now is necessary to define and set the current_lang flag to manage the current language in the Website and check the current language.

 link_toggle_lang.addEventListener('click', function () {
 let lang = {}
 let myLabels = document.querySelectorAll("[id^='l_']")
 //Define the language flag
 let current_lang = "en" 

 //Check the current_lang flag
 current_lang = link_toggle_lang.innerHTML.includes("English") === true ? "en" : "es" 

 switch (current_lang) {
       case "es":
          link_toggle_lang.innerHTML = 'English'
          lang = label_es
          break

       case "en":
          link_toggle_lang.innerHTML = 'Español'
          lang = label_en
          break
    }

 ...
})

Finally in the last part of the JavaScript code, the for statement make the translation of the all DOM elements stored in the myLabels array, the logic is just to assign every value of the lang object (identified by ID) to the array elements.

 link_toggle_lang.addEventListener('click', function () {
 let lang = {}
 let myLabels = document.querySelectorAll("[id^='l_']")
 //Define the language flag
 let current_lang = "en" 

 //Check the current_lang flag
 current_lang = link_toggle_lang.innerHTML.includes("English") === true ? "en" : "es" 

 switch (current_lang) {
       case "es":
          link_toggle_lang.innerHTML = 'English'
          lang = label_es
          break

       case "en":
          link_toggle_lang.innerHTML = 'Espa\u00f1ol'
          lang = label_en
          break
    } 

    for (let i = 0; i < myLabels.length; i++) {
       myLabels[i].innerHTML = lang[myLabels[i].id]
    } 
})

Final result
https://codepen.io/blackc0mb/pen/qBrOmaZ

Conclusion

As I mentioned before, this post describe only one way to implement this translation feature in a Website, so If you know a different way to implement this, please feel free to share your solution 🙂.

Thanks for reading! TM

Multi language feature in a Website

One way to implement this feature in a Website

Let's get started

Conclusion