Alessio Caiazza

My first multilanguage page

This article is also available in english.
Questo articolo è disponibile anche in italiano.

Avevo bisogno di una pagina multilingua, qualcosa di semplice che stesse bene con il mio sito generato staticamente

Ecco i miei requisiti:
  1. deve essere basato esclusivamente si CSS e JavaScript, senza framework,
  2. deve essere di default in inglese, ma supportando una seconda lingua (l'italiano),
  3. deve essere possiible linkare una pagina in una determinata lingua.

L'idea è quella di identificare il body HTML con una classe CSS che descriva il linguaggio visibile, show-en oppure show-it. Dopodichè identificare i contenuti nelle due lingue con le classi lang-en e lang-it.

Con tutto questo pronto, le seguenti 4 righe di CSS faranno in modo che siano visibili solo i contenuti nella lingua desiderata.

I needed a multilangage page, something simple that could fit on my static generated site.

Here are my requirements:

  1. it should only use CSS and plain JavaScript, without frameworks,
  2. it defaults to english, but supports only another languange (italian),
  3. it should be possible to generate a link that shows a specific languange.

The idea was to mark the HTML body with a CSS class describing the expected language, show-en or show-it. And then mark the language specific contents with lang-en or lang-it.

With this in place, the following 4 CSS lines will only show the expected language.

.show-en .lang-it { display: none; }
.show-en .lang-en { display: block; }

.show-it .lang-en { display: none; }
.show-it .lang-it { display: block; }
Bene, vediamo allora la parte HTML, quello che segue è un body di esempio.
Let’s now talk about the HTML. Here follows an example body. 
<body class="show-en">
    <div class="lang-it" lang="en">
        This article is also available in <a href="#en" class="switch-lang">english</a>.
    </div>

    <div class="lang-en" lang="it">
        Questo articolo è disponibile anche in <a href="#it" class="switch-lang">italiano</a>.
    </div>

    <div class="lang-en" lang="en">
        In this article I'm going to explain how I made a multilanguage page,
        only using CSS and plain JavaScript, without frameworks.
    </div>
    <div class="lang-it" lang="it">
        In questo articolo spiegherò come ho realizzato una pagina multilingua.
        Utilizzando solo CSS e JavaScript, senza framework.
    </div>

    <pre>
       // example here
    </pre>
</body>
  • Si può notare che il body utilizza la classe show-en,
  • i contenuti localizzati sono identificabili dalle classi lang-en e lang-it,
  • si possono avere contenuto condivisi, privi di localizzazione (come il blocco pre),
  • ci sono due link speciali identificabili dalla classe switch-lang che si occuperanno del cambio di lingua.

Completiamo l'esempio con un po’ di JavaScript.

La prima funzione, setLangFromHash, estrae l'hash dalla URL e controlla se contiene l'indicativo di una lingua.

Siamo solo interessati a #it perché l'inglese è attivo di default.

In aggiunta, l'hash viene suddiviso in base alla presenza del carattere / per permettere l'utilizzo di link interni al documento mantenendo la localizzazione attiva, ed esempio #en/section-1.

  • It it important to note that the body element defaults to show-en class,
  • localized contents are marked with lang-en or lang-it,
  • it is possible to share unlocalized content (like the pre block),
  • there are two special links identified by the switch-lang class that will handle language switching.

Let’s complete the example with some JavaScript.

The first function, setLangFromHash, will extract the URL hash and check if it contains a language code.

We only care about #it because english is the default language and there is nothing to do in that case.

As a bonus, we split the hash on / to allow localized internal links like #en/section-1.

var setLangFromHash = function () {
    var hash = window.location.hash;

    var lang = hash.split("/", 2)[0] || "";
    if (lang == "#it") {
        document.body.classList.replace('show-en', 'show-it');
    }
};

La seconda funzione, switchLang, si occupa di alternare le classi show-en e show-it nell'elemento body.

The second function, switchLang, will toggle between show-en and show-it on the body element.

var switchLang = function () {
    if (!document.body.classList.replace('show-en', 'show-it')) {
        document.body.classList.replace('show-it', 'show-en');
    }

    return true;
}
Infine abbiamo bisogno di assemblare queste funzioni nella pagina. Quando tutti gli elemento del DOM sono pronti, possiamo cercare gli elementi identificati dalla classe switch-lang ad assegnargli la funzione switchLang, infine possiamo invocare la funzione setLangFromHash per identificare la lingua corrente nel caso in cui l'utente arrivi da un link esterno.
We finally reached the glue code that connects all the parts. When the DOM is loaded, we search for elements with the switch-lang tag and assign them to the switchLang function, then we invoke the setLangFromHash function to make sure the italian language is detected if a user is coming directly with #it in the URL. 
document.addEventListener('DOMContentLoaded', () => {
    // language switching links
    document.querySelectorAll(".switch-lang").forEach(function(a) {
        a.onclick = switchLang;
    });

    // override language based on hash
    setLangFromHash();
});
E con questo abbiamo finito.
And that’s all.
(l0g.in 5GG8Zo)
0
0
0

This post accepts webmentions. Do you have the URL to your post?

2021-12-15
https://l0g.in/5GG8Zo