Best way to determine user s locale within browser

Question

I have a website  Flash  localized into a dozen of languages and I want to auto-define a default value depending on the user s browser settings in order to minimize the steps to access the content   FYI  I cannot use server-scripts due to proxy restrictions  so I guess JavaScript or ActionScript would be appropriate to solve the problem   Questions    What would be the best method to  guess  the user s locale   Are there any existing simple classes functions that could help me out  no complex localization bundles   Specially to break down all the possible languages into a smaller number  the translations I have  on a smart way  To which point can I trust such a solution  Any other workarounds or suggestions

User · Answer

You can also try to get the language from the document should might be your first port of call, then falling back to other means as often people will want their JS language to match the document language.

HTML5:

document.querySelector('html').getAttribute('lang')

Legacy:

document.querySelector('meta[http-equiv=content-language]').getAttribute('content')

No real source is necessarily 100% reliable as people can simply put in the wrong language.

There are language detection libraries that might let you determine the language by content.

User · Answer

There s a difference between the user s preferred languages and the system browser locale   A user can configure preferred languages in the browser  and these will be used for navigator language s   and used when requesting resources from a server  to request content according to a list of language priorities   However  the browser locale will decide how to render number  date  time and currency  This setting is likely the highest ranking language  but there is no guarantee  On Mac and Linux  the locale is decided by the system regardless of the user language preferences  On Windows is can be elected among the languages in the preferred list on Chrome   By using Intl  https   developer mozilla org en-US docs Web JavaScript Reference Global Objects Intl   developers can override set the locale to use to render these things  but there are elements that cannot be overridden  such as the  lt input type  date  gt  format   To properly extract this language  the only way I ve found is    new Intl NumberFormat    resolvedOptions   locale   Intl NumberFormat   resolvedOptions   locale also seems to work   This will create a new NumberFormat instance for the default locale and then reading back the locale of those resolved options

User · Answer

Combining the multiple ways browsers are using to store the user s language  you get this function    const getNavigatorLanguage        gt      if  navigator languages  amp  amp  navigator languages length        return navigator languages 0       else       return navigator userLanguage    navigator language    navigator browserLanguage     en           We first check the navigator languages array for its first element  Then we get either navigator userLanguage or navigator language  If this fails we get navigator browserLanguage  Finally  we set it to  en  if everything else failed     And here s the sexy one-liner     const getNavigatorLanguage        gt   navigator languages  amp  amp  navigator languages length    navigator languages 0    navigator userLanguage    navigator language    navigator browserLanguage     en

User · Answer

You said your website has Flash  then  as another option  you can get operation system s language with flash system Capabilities language mdash  see How to determine OS language within browser to guess an operation system locale

User · Answer

On Chrome and Firefox 32   navigator languages contains an array of locales in order of user preference  and is more accurate than navigator language  however to make it backwards-compatible  Tested Chrome   IE   Firefox   Safari   then use this   function getLang      if  navigator languages    undefined    return navigator languages 0     else   return navigator language

User · Answer

I used all the answers and created a single line solution   const getLanguage        gt  navigator userLanguage     navigator languages  amp  amp  navigator languages length  amp  amp  navigator languages 0      navigator language    navigator browserLanguage    navigator systemLanguage     en    console log getLanguage

User · Answer

This article suggests the following properties of the browser s navigator object   navigator language  Netscape - Browser Localization  navigator browserLanguage  IE-Specific - Browser Localized Language  navigator systemLanguage  IE-Specific - Windows OS - Localized Language  navigator userLanguage  Roll these into a javascript function and you should be able to guess the right language  in most circumstances  Be sure to degrade gracefully  so have a div containing your language choice links  so that if there is no javascript or the method doesn t work  the user can still decide  If it does work  just hide the div  The only problem with doing this on the client side is that either you serve up all the languages to the client  or you have to wait until the script has run and detected the language before requesting the right version  Perhaps serving up the most popular language version as a default would irritate the fewest people  Edit  I d second Ivan s cookie suggestion  but make sure the user can always change the language later  not everyone prefers the language their browser defaults to

User · Answer

The proper way is to look at the HTTP Accept-Language header sent to the server  This contains the ordered  weighted list of languages the user has configured their browser to prefer   Unfortunately this header is not available for reading inside JavaScript  all you get is navigator language  which tells you what localised version of the web browser was installed  This is not necessarily the same thing as the user s preferred language s   On IE you instead get systemLanguage  OS installed language   browserLanguage  same as language  and userLanguage  user configured OS region   which are all similarly unhelpful   If I had to choose between those properties  I d sniff for userLanguage first  falling back to language and only after that  if those didn t match any available language  looking at browserLanguage and finally systemLanguage   If you can put a server-side script somewhere else on the net that simply reads the Accept-Language header and spits it back out as a JavaScript file with the header value in the string  eg    var acceptLanguage   en-gb en q 0 7 de q 0 3     then you could include a  lt script src  pointing at that external service in the HTML  and use JavaScript to parse the language header  I don t know of any existing library code to do this  though  since Accept-Language parsing is almost always done on the server side   Whatever you end up doing  you certainly need a user override because it will always guess wrong for some people  Often it s easiest to put the language setting in the URL  eg  http    www example com en site vs http    www example com de site   and let the user click links between the two  Sometimes you do want a single URL for both language versions  in which case you have to store the setting in cookies  but this may confuse user agents with no support for cookies and search engines

User · Answer

I did a bit of research regarding this  amp  I have summarised my findings so far in below table    So the recommended solution is to write a a server side script to parse the Accept-Language header  amp  pass it to client for setting the language of the website  It s weird that why the server would be needed to detect the language preference of client but that s how it is as of now There are other various hacks available to detect the language but reading the Accept-Language header is the recommended solution as per my understanding

User · Answer

You can use http or https  https   ip2c org XXX XXX XXX XXX or https   ip2c org  ip XXX XXX XXX XXX    standard IPv4 from 0 0 0 0 to 255 255 255 255  https   ip2c org s or https   ip2c org self or https   ip2c org  self    processes caller s IP faster than  dec  option but limited to one purpose - give info about yourself  Reference  https   about ip2c org  inputs

[javascript] Best way to determine user's locale within browser

Examples related to javascript

Examples related to flash

Examples related to browser

Examples related to localization