Localization of Messages Module
michael-fischer opened this issue · comments
I am hoping that I am just missing something simple but... How do you provide strings specific to a locale if the likely subtags are removed? For example, Is it possible to have "buenos días" show up if I try to create messages as follows?:
var messages = {
"root":
{
"actions": "Actions",
"activityNotes": "Activity Notes",
"add": "Add",
"addAGroup": "Add a group",
greeting: "Hello"
},
"es": {
"actions": "Acciones",
"activityNotes": "Notas sobre la actividad",
"add": "Añadir",
"addAGroup": "Añadir un grupo",
greeting: "hola"
},
"es-419": {
greeting: "buenos días"
}
};Michael Fischer
Hi @michael-fischer, what problem exactly are you experiencing? es-419 remains es-419 after likelySubtags are removed.
See https://gist.github.com/rxaviers/5d1a5f491155bcf1c777 and feel free to add new comments if you still have questions.
PS: If you're talking about Globalize message module, what I am exemplifying above is also true.
Yes, I am referring to the globalize message module. I've just modified what we worked on before to be the javascript at the end. When the call to translate("greeting") occurs the languageId is replaced with "es" and not "es-419" so it does not look in the correct message list.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Globalize Hello World (plain javascript)</title>
</head>
<body>
<h1>Globalize Hello World (plain javascript)</h1>
<div id="requirements">
<h2>Requirements</h2>
<ul>
<li>You need to download the `cldrjs` dependency yourself. Read README.md for instructions.
</li>
</ul>
</div>
<div id="demo" style="display: none">
<h2>Demo output</h2>
<p>Now: <span id="date"></span></p>
<p>A number: <span id="number"></span></p>
<p>Plurals:</p>
<ul>
<li><span id="plural-0"></span></li>
<li><span id="plural-1"></span></li>
<li><span id="plural-2"></span></li>
</ul>
<p>Test Message: <span id="TestMessage"></span></p>
<p>Greeting: <span id="greeting"></span></p>
</div>
<!--
First, we load Globalize's dependencies (`cldrjs` and its supplemental
module).
-->
<script src="cldrjs/cldr.js" type="text/javascript"></script>
<script src="cldrjs/cldr/unresolved.js"></script>
<script src="cldrjs/cldr/event.js" type="text/javascript"></script>
<script src="cldrjs/cldr/supplemental.js" type="text/javascript"></script>
<!--
Next, we load Globalize and its modules. Note they are already available on
this repository. If it's not, read Usage on Getting Started on the root's
README.md.
-->
<script src="Globalize/globalize.js" type="text/javascript"></script>
<script src="Globalize/globalize/message.js" type="text/javascript"></script>
<script src="Globalize/globalize/date.js" type="text/javascript"></script>
<script src="Globalize/globalize/number.js" type="text/javascript"></script>
<script src="Globalize/globalize/plural.js" type="text/javascript"></script>
<script src="jquery/jquery-1.8.3.min.js" type="text/javascript"></script>
<script>
$.when(
$.get("cldr/main/en/ca-gregorian.json", null, null, "json"),
$.get("cldr/main/en/numbers.json", null, null, "json"),
$.get("cldr/main/de/ca-gregorian.json", null, null, "json"),
$.get("cldr/main/de/numbers.json", null, null, "json"),
$.get("cldr/main/de-DE/ca-gregorian.json", null, null, "json"),
$.get("cldr/main/de-DE/numbers.json", null, null, "json"),
$.get("cldr/main/es/ca-gregorian.json", null, null, "json"),
$.get("cldr/main/es/numbers.json", null, null, "json"),
$.get("cldr/main/es-419/ca-gregorian.json", null, null, "json"),
$.get("cldr/main/es-419/numbers.json", null, null, "json"),
$.get("cldr/supplemental/timeData.json", null, null, "json"),
$.get("cldr/supplemental/weekData.json", null, null, "json"),
$.get("cldr/supplemental/likelySubtags.json", null, null, "json"),
$.get("cldr/supplemental/plurals.json", null, null, "json")
).then(function () {
// Normalize $.get results, we only need the JSON, not the request statuses.
return [].slice.apply(arguments, [0]).map(function (result) {
return result[0];
});
}).then(Globalize.load).then(function () {
var lang = "es-419";
var en = Globalize(lang);
// Use Globalize to format dates.
document.getElementById("date").innerHTML = en.formatDate(new Date(), {
datetime: "medium"
});
var messages = {
"root":
{
"actions": "Actions",
"activityNotes": "Activity Notes",
"add": "Add",
"addAGroup": "Add a group",
greeting: "Hello"
},
"de": {
"actions": "Aktionen",
"activityNotes": "Aktivitätshinweise",
"add": "Hinzufügen",
"addAGroup": "Gruppe hinzufügen"
},
"de-DE": {
greeting: "Guten Tag!"
},
"es": {
"actions": "Acciones",
"activityNotes": "Notas sobre la actividad",
"add": "Añadir",
"addAGroup": "Añadir un grupo",
greeting: "hola"
},
"es-419": {
greeting: "buenos días"
}
};
Globalize.loadTranslations(messages);
var value = JSON.stringify(messages);
// Use Globalize to format numbers.
document.getElementById("number").innerHTML = en.formatNumber(12345.6789);
// Use Globalize to format a message with plural inflection.
var pluralData = {
one: "{0} result",
other: "{0} results"
};
document.getElementById("plural-0").innerHTML = en.formatPlural(0, pluralData);
document.getElementById("plural-1").innerHTML = en.formatPlural(1, pluralData);
document.getElementById("plural-2").innerHTML = en.formatPlural(2, pluralData);
document.getElementById("TestMessage").innerHTML = Globalize(lang).translate("actions");
document.getElementById("greeting").innerHTML = Globalize(lang).translate("greeting");
document.getElementById("requirements").style.display = "none";
document.getElementById("demo").style.display = "block";
});
</script>
</body>
</html>Don't know if this would help but it doesn't look like the code considers the variant when looking for messages and neither the languageId nor the maxLanguageId refer to 419.
I'm afraid you're not using the latest cldrjs version. Could you check?
No, that would be great if that is what it is. I am on 0.3.9. I'll update and get back to you.
Sorry, got distracted by work. Updated Globalize and cldrjs. Works good. Plus I like the new currency support.
Awesome. Glad it worked just fine.
Heads up... Globalize has a new message module that now supports ICU MessageFormat. It has just been updated. Check it out https://github.com/jquery/globalize/