l20n.js
L20n reinvents software localization. Users should be able to benefit from the entire expressive power of natural languages. L20n keeps simple things simple, and at the same time makes complex things possible. This is the JavaScript implementation of L20n.
I'd like to localize a placeholder attribute with L20N. I can't find anything in their documentation, and doing this (unsurprisingly) doesn't work.
<input type="text" data-l10n-id="email" />
Source: (StackOverflow)
How would I use l20n if I wanted to create something like this:
About <strong>Firefox</strong>
I want to translate the phrase as a whole but I also want the markup. I don't want to have to do this:
<aboutBrowser "About {{ browserBrandShortName }}">
<aboutBrowserStrong "About <strong>{{ browserBrandShortName }}</strong>">
...as the translation itself is now duplicated.
I understand that this might not be in the scope of l20n, but it is probably a common enough case in the real world. Is there some kind of established way to go about this?
Source: (StackOverflow)
How to localize the placeholder from textarea or input?
If i use the following example it puts the translation direct as text into the textarea.
...
<textarea name="message" rows="20" cols="30" placeholder="Message" data-l10n-id="Message"></textarea>
...
Language File
...
<Message "Foo Bar">
...
Source: (StackOverflow)
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" rel='nofollow' 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.
Source: (StackOverflow)
I'm using the bower version of l20n to localize an ember-cli app.
I'm localizing the app using the following flow:
I've created an initializer which creates an l20n context object based off of the user's language setting.
Using an ember helper, I pass each word from the DOM onto the l20n context object to be translated.
In handlebars template :
{{l20n-helper 'stringVariable'}}
In ember helper:
export function translate(word){
return Ember.l20n.getSync(word);
}
export default Ember.Handlebars.makeBoundHelper(translate);
This works, but I've just tagged a global variable onto Ember in order to make the l20n context accessible to the helper. I know that is not best practice. I'm trying to figure out how to create an ES6 module that will serve only to store the l20n context object. That way, inside my ember helper, I could just do:
import l20n from "/????"
and prevent the l20n object from bogging down the rest of the app.
Thanks in advance for any help!!!
Update:
One solution is to use application.register, like so:
application.register('l20n:main', ctx, {instantiate: false});
BUT, then my problem would be accessing the container from my helper. This:
var l20n = this.container.lookup('l20n:main');
won't work because container is not available to helpers!
Source: (StackOverflow)
According to the l20n documentation example, the library can support "complex language plurals".
In the Firefox download panel, a string like this shows up while
downloading file:
4 hours, 1 minute and 26 seconds remaining.
Unfortunately, the given example seems not work with the 3.0.4 release.
HTML markup:
<span data-l10n-id="minutesAgo" data-l10n-args="{'minutes':52}"></span>
Language file (en-US.l20n):
# Date time
<pluralDateTime($n) {
$n == 0 ? "zero" :
$n % 100 == 1 ? "one" :
$n % 100 == 2 ? "two" :
$n % 100 == 3 || $n % 100 == 4 ? "few" :
"many"
}>
<_minutes {
one: "minute",
two: "minutes",
few: "minutes",
many: "minutes"
}>
<minutesAgo "{{ $minutes }} {{ _minutes[pluralDateTime($minutes)] }} ago">
Current Result:
52 undefined ago
Expected result:
52 minutes ago
What is the current syntax for plurals?
Source: (StackOverflow)
L20N is setup in my ReactJS project and I am calling getSync on the context after its ready event has fired (so things should be good to go). However, rather than my expected string including other Entity values and variable expansion, I get the raw Entity string.
The string I get looks like this:
{{$user.name}} - {{appName}}
But of course, I'm expecting something like this:
Ben Taylor - My Cool App
I have tried to recreate the problem in this plunker. Unfortunately, it works fine! When you run it, the alert box shows the expected L20N expanded string.
What could cause the Entity value to be returned raw? I have a valid context and there are no errors in inspector, so it appears all is configured fine. I'm wondering if there is some interaction with something else I'm doing that is breaking L20N. Any ideas appreciated!
I am unable to include the app I'm working on, but needless to say it has more moving parts. It is a React app based on this template.
Source: (StackOverflow)
I am localizing my phonegap/cordova app with Mozilla L20n
All works fine, the problem is that the text appears after a few milliseconds that the page html and css has loaded, giving a jump effect, the text is not there and then it appears. Is there anyway to solve this issue?
Source: (StackOverflow)
I am using l20n.js to provide localization for an Angular app. It works for elements inside index.html, but the localized text is not displayed inside of an Angular partial view. Here is my project structure:
<!--app/index.html-->
<!doctype html>
<html>
<head>
<script src="bower_components/angular/angular.js"></script>
<link rel="localization" rel='nofollow' href="locales/manifest.json">
<script src="bower_components/l20n/l20n.js"></script>
</head>
<p data-l10n-id="about"></p>
<!--This is where partial.html gets rendered-->
<p ng-view=""></div>
</html>
<!--app/locales/en-US/strings.l20n-->
<pass "This text is rendered in the browser">
<fail "This text doesn't show up at all">
<!--app/views/partial.html-->
<p>This text is being displayed, so I know the partial view is being rendered.</p>
<p data-l10n-id="fail"></p>
My current working theory is that there is some kind of race condition; Angular is re-rendering something, l20n doesn't realize that a re-rendering took place and doesn't grab the translated text from the resource file. How can I fix this?
Source: (StackOverflow)
In this example, I can see how to access the variables inside an LOL resource
<brandName {
nominative: "Firefox",
genitive: "Firefoksa",
dative: "Firefoksowi",
accusative: "Firefoksa",
instrumental: "Firefoksem",
locative: "Firefoksie"
}>
<about "O {{ brandName.locative }}">
However, I also want to be able to do something similar in javascript, for example:
document.l10.get('brandName.nominative');
This doesn't work for me though. I debugged a bit, but I feel like I'm wasting time and there's probably a simple way to do this already. Is there?
Source: (StackOverflow)