lepet

Hace tiempo escribí sobre lepet.js pero actualicé el código.
Esa referencia es obsoleta para la nueva versión de lepet.
Ahora es más fácil de utilizar.
He aquí la referencia desde el README.md del demo.

Referencia de uso de lepet.js

Tener un documento HTML con el contenido a traducir.

Es importante que el contenido esté dentro del documento para evitar que se visualice vacío el documento si existen errores como:

• Latencia al cargar el contenido – lepet.js se incluye al final del documento, entonces depende de cuántos archivos incrustes en tu documento, la velocidad de conexión del usuario, la velocidad de salida de tu hosting, etcétera -.
• Si hay un error con JavaScript – por ejemplo: utilizar la variable content para almacenar otros valores que no sean la traducción -.
• Si no se incluyó lepet.js o no existen traducciones.

Crear un arreglo llamado content.

var content = [{}, {}, {}];   
/*
Dentro de este arreglo van a existir objetos.    
Cada objeto representa el contenido en un idioma en particular.   
*/
{   
  locale: 'es',   
  doclanguage: 'es-MX',   
  title: "eamexicano",   
  document_title: "eamexicano - es",   
  content: "Hablamos español",   
  figcaption: "`Parque Praskim.<br>Varsovia, Polonia.`"   
}

Cada objeto – traducción – tiene tres atributos principales:
locale, doclanguage, title.

locale
Es el único atributo necesario.
Aquí se define el idioma de la traducción con el estándar – iso939-2 –
Se va a utilizar como contenido de los vínculos que el usuario va a utilizar para visualizar la traducción.

doclanguage
Este atributo es opcional.
Aquí se incluye la región * donde se utiliza el idioma.
El valor de doclanguage se va a utilizar como valor del atributo lang de la etiqueta html.
Si no está definido el valor del atributo lang va a estar definido por el valor de locale.
* La región se puede buscar en: https://www.iso.org/obp/ui/#search

title
Este atributo también es opcional.
Se utiliza por si quieres que se actualice el contenido de la etiqueta title del documento HTML cuando se visualiza una traducción en particular.

Los otros atributos pueden ser valores de los atributos id, class o el nombre de una etiqueta HTML.

Incluir lepet.js DESPUÉS de definir el arreglo content – con las traducciones que quieras visualizar -.

var content = [   
  {   
    locale: 'es',   
    doclanguage: 'es-MX',   
    title: "eamexicano",   
    document_title: "eamexicano - es",   
    content: "Hablamos español",   
    figcaption: "`Parque Praskim.<br>Varsovia, Polonia.`"   
   },   
  {   
    locale: 'ru',   
    doclanguage: 'ru-RU',   
    title: "eamexicano",   
    document_title: "eamexicano - ru",   
    content: "Мы говорим по-русски",   
    figcaption: "`Praskim парк.<br>Варшава, Польша.`"   
  },   
  {   
    locale: 'fr',   
    doclanguage: 'fr-FR',   
    title: "eamexicano",   
    document_title: "eamexicano - fr",   
    content: "On parle français",   
    figcaption: "`Parc Praskim.<br>Varsovie, Pologne.`"   
  }   
]

En el markup – HTML – incluir un contenedor con id lepet.
En este contenedor se van a incluir los vínculos con los idiomas definidos en content.

<div id='lepet'></div>

<!--
Puede ser cualquier etiqueta, no un div. Pero es importante que tenga el valor lepet en el atributo id.
-->

lepet.js puede seleccionar el contenido de los nodos por el valor los atributos id, class * o por el nombre de la etiqueta * del nodo.
En el ejemplo de referencia los nodos a los que hace referencia la traducción son los siguientes:

h1#document_title – Actualizar contenido del nodo seleccionado atributo id
p.content – Actualizar contenido del nodo seleccionado por atributo class
figcaption – Actualizar contenido del nodo seleccionado por etiqueta

Notas:

• Al utilizar class o el nombre de la etiqueta se va a seleccionar la primer opción disponible.
• Al utilizar class o el nombre de la etiqueta tener cuidado si se tiene HTML interior porque se va a sustituir todo el markup por la traducción *.

* Para prevenir esto puedes incluir el markup en las traducciones o hacer tu selección más específica.

Al descargar el repositorio se incluye un demo que se puede visualizar aquí.

Actualización:

Si en alguna traducción necesitas incluir texto que se lee de derecha a izquierda puedes incluir la propiedad dir con el valor rtl. De manera predeterminada se le asigna al valor de dir ltr.
Un poco más acerca del atributo dir en la w3.

{
        locale: 'ar',
        doclanguage: 'ar-AR',
        dir: 'rtl',
        title: "eamexicano",
        document_title: "eamexicano - ar",
        content: "نتكلم عربى",
        figcaption: "حديقة Praskim.<br>وارسو، بولندا."
       }