How do I indicate which language to render in the browser using l20n.js?
html, javascript, json, l20n, localization
Solution
By default, L20n uses the browser's language settings to determine which locale to show to the user. I'm guessing that your browser has 'en' or 'en-US' in the language setting somewhere. You can preview your setting by opening the developer console (Ctrl+Shift+K in Firefox, Ctrl+Shift+J in Chrome) and typing `navigator.language` or (in newer versions of Firefox) `navigator.languages`.
In Firefox, you can change your language preferences by going into `about:preferences#content`, and clicking 'Choose' under 'Languages'. In Chrome, there is a similar panel in the Settings, but it actually doesn't modify the `navigator.language` property, which is a known bug. You'll need to download and install a 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 a piece of UI to let your users change the language of the app. For instance, you could have a drop-down menu with all languages that you support, which calls `document.l10n.requestLanguages` when a new option is selected.
Problem
I am using l20n.js to add localization to an Angular.js app. Here's 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 swap out English (i.e. the `/locales/en/strings.l20n` file) for French? It renders en-US despite indicating `lang="fr-FR"` in `index.html`.