DEV Community

Cover image for How to create multilingual static pages without frameworks
Federico Navarrete
Federico Navarrete

Posted on • Updated on • Originally published at supernovaic.blogspot.com

How to create multilingual static pages without frameworks

From time to time, we have the experience of building websites without frameworks like Angular, Vue.js, or React. Perhaps, for fun, we are new or we just want something extremely simple.

In my case, I started building my personal website several years ago. In those days, I didn't know Angular, and it was a little bit messy to support everything I needed. I didn't consider myself a front-end developer. It was more like my hobby.

Something important in my case was to add multilingual support since I speak English and Spanish fluently. This was a little bit messy since I couldn't find any good library or solution. After several attempts, I came up with the following pieces of code that can simplify your life also.

I have two files, one for English and one for Spanish, where I store the translations in JSONs as constants. If you wonder why I don't store only the JSONs, I had several issues consuming the files later. I got several errors, and most solutions were for Node.js only.

lang-en.js

const translations = {
    "telephone": "Telephone",
    "email": "Email",
    "contactMe": "Contact me"
};
Enter fullscreen mode Exit fullscreen mode

lang-es.js

const translations = {
    "telephone": "Teléfono",
    "email": "Email",
    "contactMe": "Contáctame"
};
Enter fullscreen mode Exit fullscreen mode

The following script is for reading the scripts:

get-script.js

const getScript = url => new Promise((resolve, reject) => {
    const script = document.createElement('script');
    script.src = url;
    script.async = true;

    script.onerror = reject;

    script.onload = script.onreadystatechange = function() {
      const loadState = this.readyState;

      if (loadState && loadState !== 'loaded' && loadState !== 'complete') return;

      script.onload = script.onreadystatechange = null;

      resolve();
    }

    document.head.appendChild(script);
});
Enter fullscreen mode Exit fullscreen mode

And the last script is for setting the values in your HTML:

translations.js

let lang = 'en';

let nLang = (navigator.languages
    ? navigator.languages[0]
    : (navigator.language || navigator.userLanguage)).split('-')[0];

let supportedLang = ['en', 'es'];

lang = supportedLang.includes(nLang) ? nLang : lang;

getScript(`lang-${lang}.js`)
.then(() => {
    document.querySelectorAll('[data-translation]').forEach(item => {
        item.innerHTML = translations[`${item.dataset.translation}`];
    });
})
.catch((e) => {
  console.error(e);
});
Enter fullscreen mode Exit fullscreen mode

So, how do you consume and configure your HTML? You define a data-* attribute called data-translation with the value you expect from the "JSON" like this:

<script src="get-script.js"></script>
<script src="translations.js"></script>

<p data-translation="contactMe"></p>
<p data-translation="telephone"></p>
<p data-translation="email"></p>
Enter fullscreen mode Exit fullscreen mode

And that's all. Now, you can create your static multilingual pages without frameworks.

Follow me on:

Personal LinkedIn YouTube Instagram Cyber Prophets Sharing Your Stories
Personal LinkedIn YouTube Instagram RedCircle Podcast RedCircle Podcast

sponsor me

Top comments (0)