Usando atributos para alterar o idioma em JavaScript

Ei!, por que não colocar um pequeno exemplo de internacionalização do seu site?.

Sim, você sabe. Se sua página deve estar em vários idiomas, você saberá que é uma dor. Não é uma dor para as traduções, é uma dor de como fazer isso,

Há muitas soluções que incluem bibliotecas que incluem arquivos que incluem muitos outros elementos que talvez não sejam necessários para pequenos projetos, portanto, deve haver uma solução.

Os atributos
Oh! os atributos, os atributos desconhecidos. Você os viu, mas você, geralmente nunca os usa.

Você sabe, você foi visto nas tags que há outro rei de propriedades que você realmente não sabe para o que eles são. É como você ver que aquela tag que você ama tem propriedades que ninguém lhe disse antes, mas quando você as usa em seu projeto, elas não funcionam como você viu.

Bem, é fácil, você pode adicionar seus próprios atributos a uma tag para o que você deseja. O navegador os ignora até você fazer algo com eles. Como convenção, você os reconhecerá, porque eles começam com dados. Então, vamos usá-los em um breve exemplo, uma simples tradução do site.

O código

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title data-i18n-es="Cambiar idioma" data-i18n-en="Change Language" data-i18n-it="Cambia lingua">Change Language</title>
  </head>
  <body>

    <a onClick="changelang('es')" href="#">ES</a> | <a onClick="changelang('en')" href="#">EN</a> | <a onClick="changelang('it')" href="#">IT</a>
    <br />
    <p data-i18n-es="Hola" data-i18n-en="Hello" data-i18n-it="Ciao">Hello</p>

    <script>
      const lang = document.documentElement.lang;

      function changelang(lang) {
        console.log('Changing lang to '+lang);
        document.documentElement.lang = lang;

        // Only body Commented
        // let elements = document.body.getElementsByTagName('*');

        // All elements
        let elements = document.documentElement.getElementsByTagName('*');

        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>
  </body>
</html>

Uma simples página da web, ok? Você notará que na tag de título e na tag p há vários atributos adicionados para algo chamado i18n. Como a Wikipedia diz, o i18n é o padrão para internacionalizar o seu texto. Então, por convenção, usaremos data-i18n- {language} como atributo para o texto no idioma.

Então, na tag p você vê que é um "olá" em vários idiomas (o mesmo na tag title, é claro). E agora, como nós mudamos de um para outro?

Bem, a maneira mais fácil é criar uma função (neste caso, changeLang) que simples tem um argumento, a linguagem para a qual você muda.

A função irá percorrer todas as tags da página, observando o atributo da linguagem que queremos inserir e alterando o HTML com o conteúdo desse atributo de dados. Muito fácil!.

E, claro, nós mudamos a linguagem do próprio HTML porque é a maneira correta ou o faz.

O resultado é que você deve colocar esses atributos nas tags que deseja ter em vários idiomas (algo que você pode fazer em seu backend, se necessário, mas depende do que você está usando) e um controle para chamar a função com o argumento correto.

Os problemas

Claro que este pequeno script tem muitos problemas. Por exemplo, será um problema ter tags dentro de tags em diferentes idiomas, ou nas imagens que você deve colocar no i18n de dados da url para a imagem e detectar que é uma tag img e colocar algo específico para o alt e outros Propriedades da tag, mas como um começo para você é um bom ponto de partida (como tudo que eu coloco aqui).

Comment

Este site utiliza o Akismet para reduzir spam. Fica a saber como são processados os dados dos comentários.