0

I have a simple static HTML website (that uses a few JS libraries here and there, but no real-deal JS frameworks like React, Angular, Node, etc.) that is served via nginx. I would like to internationalize it and was wondering what some approaches code be for locale-detection as well as language file binding.

Typically when you internationalize an app, you use some kind of i18n library and you pull all the user-facing text out into what I call "language files". These files might be JSON, they might be YAML, they might even be properties files of key-value pairs. But the idea is that you have one file per supported language, and each file contains identical keys, but each key has a different value depending on the language it is implementing.

For instance you might have an en_US.properties (US English) language file that looks like this:

greeting=Hello!
initial.display=Welcome to internet

But then you might also have a fr_FR.properties (French) language file that looks like:

greeting=Bonjour!
initial.display=Bienvenue sur internet

Then, instead of putting user-facing text in your HTML, you might do something like:

<h1>${greeting}</h1>
${initial.display}

Then at runtime, you use the i18n library to detect the logged-in user's locale and it automagically selects the correct language file to load and bind to the variables in your HTML templates. I'm generalizing and probably oversimplifying it a bit, but that's the gist of how to i18n an app.

But here, we have a static HTML website where there are no users: everyone is anonymous.

I'm wondering:

  • What are common strategies used to detect/infer preferred locale? I'm wondering if there are generally-accepted or even standardized browser cookies I could look for (e.g. "preferredLocale"), or perhaps using the top-level domain (.com, .fr, .ru), etc. Or maybe the referrer IP address and mapping that back to a geographic location?; and
  • Wondering what simple (not looking to pull heavyweight frameworks like Node, React, etc.) libraries might help me with the language file binding (once I can figure out how to determine the user's preferred locale)

Any ideas? Thanks in advance!

smeeb
  • 27,777
  • 57
  • 250
  • 447

1 Answers1

1

This code is good (client-side), but I don't know how successful it is cross-browser (works fine with Firefox anyway):

var lang = navigator.language || navigator.userLanguage;

Then use the locale string (e.g. en-US) to open the appropriate language file using AJAX.

Apparently you can also use server-side methods to detect locale, namely the Accept-Language HTTP header, as seen here, but I don't know anything about this method.

d-mac
  • 112
  • 1
  • 1
  • 10
  • Ahh thanks @d-mac (+1), I've *definitely* run across `Accept-Language`-based solutions before, I just forgot about that one! Any chance you would mind showing a quick and simple code snippet of AJAX opening up the correct language file and select the "`greeting`" key for it? Thanks again so much! – smeeb Feb 21 '18 at 15:16
  • You say your website "uses a few JS libraries here and there". Does this include jQuery? jQuery has its own built-in $.ajax method. [This thread](https://stackoverflow.com/questions/8567114/how-to-make-an-ajax-call-without-jquery) will help you. – d-mac Feb 21 '18 at 15:23