Using attributes to change language in Javascript

Hey!, why not put a little example of internationalizing your site?.

Yes, you know. If your page must be in multiple languages you will know that it’s a pain. It’s not a pain for the translations it’s a pain for how to do it,

There’s a lot of solutions that includes libraries that includes files that includes a lot of other elements that maybe it’s not needed for small projects so, there must be a solution.

The attributes
Oh! the attributes, the unknown attributes. You have see them but you, usually never use them.

You know, you have been see on the tags that theres other king of properties that you don’t really know for what they are for. It’s like you see that those tag you love have properties that no one told you before but when you use them on your project their don’t work as you have seen.

Well, it’s easy, you can add your own attributes to a tag for what you want. The browser ignore them until you do something with them. As a convention you will recognize them because they begins with data. So, let’s use them in a brief example, a simple website translation.

The code

<br />
<!DOCTYPE html><br />
<html lang="en" dir="ltr"><br />
  <head><br />
    <meta charset="utf-8"><br />
    <title data-i18n-es="Cambiar idioma" data-i18n-en="Change Language" data-i18n-it="Cambia lingua">Change Language</title><br />
  </head><br />
  <body></p>
<p>    <a onClick="changelang('es')" href="#">ES</a> | <a onClick="changelang('en')" href="#">EN</a> | <a onClick="changelang('it')" href="#">IT</a><br />
    </p>
<p data-i18n-es="Hola" data-i18n-en="Hello" data-i18n-it="Ciao">Hello</p>
<p>    <script>
      const lang = document.documentElement.lang;</p>
<p>      function changelang(lang) {
        console.log('Changing lang to '+lang);
        document.documentElement.lang = lang;</p>
<p>        // Only body Commented
        // let elements = document.body.getElementsByTagName('*');</p>
<p>        // All elements
        let elements = document.documentElement.getElementsByTagName('*');</p>
<p>        for (var i = 0; i<elements.length; i++) {
          if (elements[i].getAttribute('data-i18n-'+lang)) {
            elements[i].innerHTML = elements[i].getAttribute('data-i18n-'+lang);
          }
        }

      }
    </script><br />
  </body><br />
</html><br />

A simple web page, ok?. You will notice that on the title tag and on the p tag there's several attributes added for something called i18n. As Wikipedia says, i18n it's the standard for internationalize your text. So, for convention we will use data-i18n-{language} as attribute for the text in the language.

So, in the p tag you see that it's a "hello" in several languages (the same in the title tag, of course). And now, how we change from one to another?.

Well, the easy way it's to create a function (in these case changeLang) that simple have one argument, the language you change to.

The function will walk into all the page tags looking to the attribute of the language we want to put in and, change the HTML with the content of this data attribute. Very easy!.

And, of course, we change the language of the HTML itself because it's the correct way or doing it.

The result it's that you must put this attributes to the tags you want to have in several languages (something you can do in your backend if needed, but it depends on what are you using) and a control to call the function with the correct argument.

The problems

Of course this small script have a lot of problems. For example, it will be a problem to have tags inside tags in different languages, or in the images you must put in the data-i18n the url to the image and detect that it's an img tag and put something specific for the alt and other properties of the tag, but as a beginning for you it's a good point of start (as everything I put here).

Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.