- Take a deep look on navigator
- Real-life scripts
- More ways on detecting user language
To detect a user's preferred language, we may refer to several properties on
navigator. Some are supported only in latest browsers, while some are proprietary and IE only.
Take a deep look on navigator
Currently we have the following properties available to us:
Compatibility table made with the data on Mozilla Developer Network.
Number indicates the browser version from which support is built in, 'Yes' means supported, and 'x' means not supported.
languages is a property described in the interface
NavigatorLanguage, and implemented by
WorkerNavigator. Thus available as
The NavigatorLanguage.languages read-only property returns an array of DOMStrings representing the user's preferred languages. The language is described using BCP 47 language tags. In the returned array they are ordered by preference with the most preferred language first.
Quoted from NavigatorLanguage.languages - Web APIs | MDN
Behavior in Chrome
navigator.languages corresponds to the language list in Settings - Languages in Chrome.
language is the other property described in
NavigatorLanguage interface, along with
languages, which is available as
navigator.language. This property has much wider browser support than
navigator.languages. All current browsers and IE >= 11 support this.
The NavigatorLanguage.language read-only property returns a string representing the preferred language of the user, usually the language of the browser UI.
Quoted from NavigatorLanguage.language - Web APIs | MDN
Behavior in Chrome
navigator.language corresponds to the language marked as "Google Chrome is displayed in this language" in Settings - Languages in Chrome.
Note the value of
navigator.language is not necessarily the first element of the array returned by
Behavior in IE11
navigator.language is the same as
navigator.userLanguage for IE.
See navigator.userLanguage for details.
Retrieves the operating system's natural language setting.
This property reflects the setting in the "Your locale (location)" box in the Regional Options of Control Panel—for example, "English (United States).
Quoted from userLanguage property (Internet Explorer)
In Windows 10 with IE 11, this setting reflects your language preferences. And can be reached in UI as the following images show.
The output in console looks like this:
Note this property changes on the fly when settings in language preferences change.
Note only the first language with language pack installed will be used.
Retrieves the current operating system language.
Note This property does not indicate the language or languages set by the user in Language Preferences, located in the Internet Options dialog box. (That's
Quoted from browserLanguage property (Internet Explorer)
The attached article above has a comprehensive explanation on this
browserLanguage does not reflect the language of the browser nowadays, it reflects the language of the OS instead. It's the time prior to IE 5 that
browserLanguage is the language of the browser.
Retrieves the default language used by the operating system.
The systemLanguage property reflects the language edition of the installed operating system.
Quoted from systemLanguage property (Internet Explorer)
From my test result,
navigator.systemLanguage actually refers to Language for non-Unicode programs.
Note all of
navigator.systemLanguage is only supported in IE, not including Edge.
var language = navigator.languages && navigator.languages || navigator.language || navigator.userLanguage;
Code above prefers the first language in user's language list if this list is available, or uses
language; for IE browsers lower than version 11, uses
More ways on detecting user language
- Parse the
- IP address lookup (not really language detection, but geolocation)