Menu
I am using l20n.js to add localization to an Angular.js app. Here's my project structure:
<!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": [ "en-US", "fr-FR"],
"default_locale": "en-US",
"resources": [
"{{locale}}/strings.l20n",
]
}
<name "Search by name - EN">
<instructions "Enter one or more names - EN">
<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.
420
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.
115
Use the L20n JavaScript API requestLocales()
<!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>
answered Oct 27 '22 01:10
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With