All geek questions in one place

How to specify which language to display in the browser using l20n.js?

I am using l20n.js to add localization to an Angular.js application. Here is my project structure:

/index.html

<!DOCTYPE html> <html lang="en-US"> <head> <script src="jquery-1.11.1.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"> </script> <script src="trackingController.js"></script> <script src="l20n.js"></script> <link rel="localization" href="locales/manifest.json"> </head> <body> <h2 data-l10n-id="name"></h2> <p data-l10n-id="instructions"></p> </body> </html>

/locales/manifest.json

 { "locales": [ "en-US", "fr-FR"], "default_locale": "en-US", "resources": [ "{{locale}}/strings.l20n", ] }

/locales/en-US/strings.l20n

 <name "Search by name - EN"> <instructions "Enter one or more names - EN">

/locales/fr-FR/strings.l20n

 <name "Search by name - FR"> <instructions "Enter one or more names - FR">

How can I change English (i.e. /locales/en/strings.l20n file) to French? It displays en-US despite specifying lang="fr-FR" in index.html .

+6
source share
2 answers

By default, the L20n uses browser language settings to determine which language to display to the user. I assume that your browser has "en" or "en-US" in the language setting somewhere. You can view your settings by opening the developer console (Ctrl + Shift + K in Firefox, Ctrl + Shift + J in Chrome) and typing navigator.language or (in new versions of Firefox) navigator.languages .

In Firefox, you can change your language preferences by going to about:preferences#content and clicking "Select" in the "Languages" section. In Chrome, the settings have a similar panel, but in fact it does not change the navigator.language property, which is a known bug , you will need to download and install the French version of Chrome if you want to test this way.

An alternative is to use the L20n API and explicitly change the language with:

 document.l10n.requestLanguages(['fr']);

This is useful if you want to provide part of the user interface so that your users change the language of the application. For example, you might have a drop-down menu with all the languages ​​you support that calls document.l10n.requestLanguages when you select a new option.

+6
source

Use L20n requestLocales () API

/index.html

 <!DOCTYPE html> <html lang="en-US"> <head> <script src="jquery-1.11.1.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"> </script> <script src="trackingController.js"></script> <script src="l20n.js"></script> <link rel="localization" href="locales/manifest.json"> <script type="text/javascript"> $('#langSwitch-en').click(function() { document.l10n.requestLocales('en-US'); }); $('#langSwitch-fr').click(function() { document.l10n.requestLocales('fr-FR'); }); </script> </head> <body> <!-- fix the correct language code [-de] for [-fr] --> <a id="langSwitch-en" href="#">en</a> / <a id="langSwitch-fr" href="#">fr</a> <h2 data-l10n-id="name"></h2> <p data-l10n-id="instructions"></p> </body> </html>
+3
source

Source: https://habr.com/ru/post/972001/

More articles:


All Articles