• Mon - Fri 8:00 - 18:00 - UTC/GMT +6
  • info@idesignzone.com

BLOG

How To Create A Multilingual Website in HTML


I have been looking through different options to turn my HTML website into a multilingual website. My goal was to do the translation with pure Javascript. I also wanted to…

How To Create A Multilingual Website in HTML

04

Jun

How To Create A Multilingual Website in HTML

I have been looking through different options to turn my HTML website into a multilingual website. My goal was to do the translation with pure Javascript. I also wanted to follow the standard way of localization in most of the popular JavaScript frameworks like Angular, Vue.js, React, etc.

After some research I came across i18next library that provides a useful API for building multilingual website and I am going to show you how to build a multilingual website using i18next and vanilla JS.
Follow this step by step tutorial to turn your static website into a multilingual website.

Step 1 (adding i18next library)

add this to head of your HTML to import i18next

    <script src="https://unpkg.com/i18next/dist/umd/i18next.min.js"></script>

Step 2 ( configuring i18next)

add this to head of your html to configure i18next. This example adds Russian language to website. You can add multiple languages by adding their language names to “langs” constant.

this script will use fetch and promises to load the translation files and target the strings by their class and attributes.

more details on i18next documentation

<script>
function updateContent() {
  const elements = document.getElementsByClassName("i18nelement");
  for (let i = 0; i < elements.length; i++) {
    const element = elements[i];
    const k = element.getAttribute("data-i18n");
    element.innerHTML = i18next.t(k);
  }
}

async function i18Loader() {
  const langs = ["en", "ru"];
  const jsons = await Promise.all(
    langs.map((l) => fetch("src/i18/" + l + ".json").then((r) => r.json()))
  );
  const res = langs.reduce((acc, l, idx) => {
    acc[l] = { translation: jsons[idx] };
    return acc;
  }, {});
  await i18next.init({
    lng: "en",
    debug: true,
    resources: res
  });
  updateContent();
  i18next.on("languageChanged", () => {
    updateContent();
  });
  const langSelector = document.getElementById("langSelector");
  langSelector.removeAttribute("disabled");
  langSelector.addEventListener("change", (e) => {
    i18next.changeLanguage(e.target.value);
  });
}

i18Loader();
</script>

Step 3 ( creating translations)

We are going to create one translation file per language in json format. for example we are going to have “en” and “ru” languages on the website so I will create “en.json” and “ru.json” files inside src/i18 folder as configured in Step 2.

en.json

{
  "home": {
    "title": "Homepage",
  }
}

ru.json

{
  "home": {
    "title": "Домашняя страница",
  }
}

Step 4 (targeting strings)

now we have to add class and attribute to the string we want to translate. Here is an example:

<h1 class="i18nelement" data-i18n="home.title">Loading</h1>

simply repeat the process for all the strings throughout your project. Don’t forget to define the translations in json files.

Step 5 ( language Switcher)

Finally add a language Switcher to change the language. You can add more languages by adding more options to the select field. Don’t forget to set the language name value for each option.

<div>
  <select disabled="true" id="langSelector" name="lang">
    <option value="en">English</option>
    <option value="ru">Russian</option>
  </select>
</div>

Sandbox

Written by

The guy behind iDesignzone

Leave a Reply

Your email address will not be published. Required fields are marked *