En la busqueda de que el blog se adapte al idioma del usuario me tope con un par de problemas:

1. Ghost, la plataforma de blogging que estoy usando aun no tiene una forma definida de como realizar traducciones.
2. No puedo detectar el idioma del usuario en backend ya que el blog esta en github pages.

De manera que solo queda la opción de usar javascript para detectar el idioma y realizar la localización.

Por fortuna ya la gente de Mozilla se habia topado con este problema de manera que crearon el proyecto webl10n y la forma de utilizarlo es muy sencilla:

• Creas un archivo locales.ini, donde vas a indicar los idiomas que vas a detectar asi como el archivo donde se encontraran las traducciones para cada idioma.

@import url(en/app.properties)
[es]
@import url(es/app.properties)

• Creas los archivos de traducciones, en este caso app.properties, aqui colocas el identificador de la oración y su traducción.

read-more = Leer más  
share-it = ¿Te gusto el artículo? Compartelo.  

• Se agrega la libreria y el locales.ini a la página.

<link rel="resource" type="application/l10n" href="locales/locales.ini">  
<script type="text/javascript" src="js/l10n.js">  

• Finalmente agregas el identificador de la oración al html utilizando el atributo "data-l10n-id".

<h4 data-l10n-id="share-it">Liked this post ? Share it.</h4>  

Si quieres más informacion de la librería puedes ver revisar el repositorio del proyecto o la página de localización de webapps en MDN.

A pesar de los fácil de usar, la librería tiene algunos problemas:

• Si el usuario tiene desactivado javascript (algo poco probable) o si esta usando No Script no se mostraran las traducciones, por esto es mejor escribir por defecto en un idioma que la mayoria entienda (ingles).

• Cuando se tiene un elemento html en medio de la oración por ejemplo un link, la traducción solo reemplaza la parte de la oración antes del link.

  Para poder traducir el texto del link se le debe tratar como una oración diferente agregandole un identificador e igualmente con el resto de la oración se le debe encerrar en otro elemento html para tratarlo como otra oración.

<p data-l10n-id="primero">Primera parte de la oracion <a href="http://lcamacho.github.io" data-l10n-id="link">el link a mi blog</a> <span data-l10n-id="segundo">y la segunda parte</span></p>  

El caso es-419

Ya con todas las traducciones restaba probarlo y en casi todos los navegadores funciono, la sorpresa vino con Chrome y el nuevo Opera que ahora usa el mismo motor de Chrome.

En ambos se mostraba la versión en ingles a pesar de estar usandolos en español; para estar seguro del idioma del navegador ejecute en consola navigator.language para ver el identificador que devuelve Chrome.

Lo cual me parecio un poco raro porque en otros navegadores como Firefox devuelve "es-AR" (identificador de idioma - identificador de pais), pero luego encontre en la IANA que "es-419" es el identificador para el español de latinoamerica algo asi como un español neutro para latinoamerica (si es que tal cosa existe, recordemos lo dificil que es hablar el español).

Para lograr que webl10n reconozca este idioma basta con colocar en el locales.ini un par de lineas, primero [es-419] y luego la linea para indicar donde esta el archivo de traducciones pero para evitar esto envie un pull request para lograr que la librería reconozca identificadores de idiomas que contengan números y sean correctamente dirigidos al idioma base, en este caso para ser dirigidos a las traducciones de [es].