I'm streaming

Managing l10n localization files

Over the past few years, I have worked on a few projects that require internalization (i18n) and localization (l10n) configuration files. The best way I have found is to use the domain key approach. This allows for fine-tuned control in your translations to each “page” or domain. This also allows for a common domain to be used that is for generic phrases like a dialog’s config and cancel, or a form’s submit message.

{
  "domain": {
    "key": "test"
  }
}

Inside of an api or a local file you can name it after it’s ISO code.

en-us.json

{
  "common": {
    "cancel": "cancel",
    "login": "login",
    "logout": "logout",
    "yes": "yes",
    "no": "no",
    "submit": "submit",
    "close": "close",
    "readMore": "Read More"
  },
  "homepage": {
    "iot" : "Digital rebel, creating the future of business with metrics and connected devices. Maximizing efficiency and productivity while reducing cost.",
    "developer" : "Developing cost effective and ground breaking web applications",
    "hardware": "Hardware Hacker"
  },
  "contact": {
    "form": "Contact Form",
    "comments": "Comments",
    "reply": "Leave a Reply"
  }
}

es-mx.json

{
  "common": {
    "cancel": "cancelar",
    "login": "iniciar sesión",
    "logout": "cerrar sesión",
    "yes": "sí",
    "no": "no",
    "submit": "enviar",
    "close": "cerca",
    "readMore": "Lee mas"
  },
  "homepage": {
    "iot" : "Digital rebel, creando el futuro del negocio con métricas y dispositivos conectados. Maximizar la eficiencia y la productividad y reducir costes.",
    "developer" : "Desarrollo de aplicaciones web rentables y innovadoras",
    "hardware": "Hacker de hardware"
  },
  "contact": {
    "form": "Formulario de contacto",
    "comments": "Comentarios",
    "reply": "Deja una respuesta"
  }
}

Now that we have a common translation schema we can go ahead and throw it into the UI. In my experience, I have used angular for this which I create a translation service which will consume this JSON payload and then cache it in a local variable. I then create an Angular directive that binds the attributes domain and key {{domain}}.{{key}} which is just an object lookup and bind that value to the view.

If we wanted to get creative, in the constructor of the directive we can listen to a rootScope event that is triggered by our service that emits when the language is changed. This allows for a SPA application to update it’s translations without having to refresh the page.

An inventive, entrepreneurial and positively unsatisfied mind that constantly pushes the tech boundaries to create new solutions and devices that change people’s lives.

Leave a Reply