翻譯 Firefox OS Apps (下集)
L10n 指令碼
Firefox OS 大多數的預設 Apps，均使用類似下列指令碼的標籤而載入 L10n.js 函式庫：
若要在自己的 Apps 中使用此函式庫，則必須將 l10n.js 檔案複製到本端專案並更改來源屬性。
載入完畢後，L10n.js 函式庫隨即具備「navigator.mozL10n」物件，讓用戶端順利進行翻譯作業。
mozL10n 最常用的函式與屬性另列於下。
get 函式
「get」函式可針對目前語言而取得已翻譯的字串。此函式將使用 1 組鍵值參數與 1 組選填的 args 參數。鍵值參數將指定語系檔所定義的鍵值。
navigator.mozL10n.get("mylabel")
針對內含參數的字串，則 args 參數可傳送 1 組 JSON 格式的參數。
//properties file
welcome = Welcome {{user}}!
//JavaScript
alert( navigator.mozL10n.get(“welcome”, { user: "Martin" }));
localize 函式
「localize」函式可添加翻譯屬性，以動態方式建立內容。此函式將使用 id 參數、元素參數、選填的 args 參數。元素參數將指定應翻譯的元素。id 參數則指定 L10n-based 的屬性 id，以利指派至元素。選填的 args 參數則可建立 data-l10n-args 屬性並設定其 JSON 值。
var button2 = document.querySelector("#button2");
if (button2) {
button2.onclick = function () {
var myElement = document.createElement('span');
var lblTxt =document.createTextNode("My Label");
myElement.appendChild( lblTxt );
navigator.mozL10n.localize(myElement, 'label3'{ arg: "myarg" });
document.body.appendChild(myElement);
}
};
如此將形成下列 HTML：
My Label
另可立刻翻譯其他文字。
ready 函式
在目前文件翻譯完畢之後，可用「ready」函式定義回呼 (Callback)。
var button1 = document.querySelector("#button1");
if (button1) {
button1.onclick = function () {
navigator.mozL10n.language.code = "fr";
navigator.mozL10n.ready( function() {
alert(navigator.mozL10n.get("button1"));
});
}
};
language 屬性
「language」屬性包含 1 組語言代碼所用的 Getter 與 Setter，且同樣有 1 組 Getter 可支援由右至左 (阿拉伯文與希伯來文) 與由左至右的語言。
var mycode = navigator.mozL10n.language.code; navigator.mozL10n.language.code = "fr"; navigator.mozL10n.language.direction //returns rtl or ltr
L10n_Date 指令碼
針對日期與時間的調整，Gaia 應用程式則透過 l10n_date.js 函式庫而延伸了 L10n.js 的功能。就 l10n.js 函式庫來說，其建置的某些功能並無法相容於所有瀏覽器。你同樣可到 Gaia 的原始碼中找到此函式庫，並使用本文 L10n.js 段落所提過的相同屬性結構。只要是使用此函式庫的 Gaia Apps，均必須透過共享的語系檔集合與 date.ini 檔案，才能匯入特定語言的語系檔。Gaia 的原始碼也提供此 date.ini 檔案；另可至 https://github.com/mozilla-b2g/gaia/tree/master/shared/locales/date directory 找到特定語言的語系檔。針對一個禮拜是以哪天起算、簡短日期的格式、各月份的名稱等，均是透過這些語系檔所定義。若要在自己的 Apps 中使用這些函式庫，則需將所有檔案複製到特定專案中。而 ini 與指令碼檔案均以類似方式載入到 L10n.js 函式庫。
若使用的函式為 L10n_date 函式庫的格式，語系檔中的字串即可使用標準的 C++ 日期/時間格式程式碼。若以此為範例來檢查 Gaia Clock App 的語系檔，則該檔案在 en-US 語言中，應包含下列 dateFormat 的輸入項。
dateFormat = %A, %B %e
若使用 L10n_Date 函式庫中的 formatLocale 函式，就會回傳：
“Full Weekday Name” “Full Month Name” “Day of the Month” (Thursday January 29)。此語系檔的法文版本將以下列順序定義相同的鍵值：
dateFormat = %A %e %B
如此將產生：
“Full Weekday Name” “Day of the Month” “Full Month” (jeudi 25 janvier)。
只要納入 L10n_Date 函式庫，mozL10n 物件 (navigator.mozL10n.DateTimeFormat()) 即可使用新的函式。一旦將此物件實體化 (Instantiated) 之後，就有多個可翻譯日期的函式。最好用的函式如下：
localeFormat 函式
「localeFormat」函式將使用 1 組日期物件參數與 1 組格式參數，且將回傳符合指定格式的日期。此函式應搭配 L10N.js 的 get 函式，形成翻譯日期的格式。
button3.onclick = function () {
navigator.mozL10n.language.code = "fr";
navigator.mozL10n.ready( function() {
var d = new Date();
var f = new navigator.mozL10n.DateTimeFormat();
var format = navigator.mozL10n.get('dateFormat');
var formatted = f.localeFormat(d, format);
alert( formatted );
});
}
localeDateString、localeTimeString、localeString 函式
這 3 組函式屬於 localeFormat 函式的變化。localeFormat 函式將根據日期語系檔中的下列鍵值，進而回傳既定的日期格式：
//en-US //localeString returns dateTimeFormat_%c = %a %b %e %Y %I:%M:%S %p //localeDateString returns dateTimeFormat_%x = %m/%d/%Y //localeTimeString rerturns dateTimeFormat_%X = %I:%M:%S %p
fromNow 函式
「fromNow」函式將使用 1 組日期/時間參數，並回傳 1 組特定語言格式的字串，藉以呈現「目前的日期/時間」與「參數所傳入的日期/時間」的時間差。而此字串將使用日期語系檔中定義的格式。例如：
//Executed on 7/25/2013 12:11:00
var d = new Date("July 25, 2013 11:13:00");
var f = new navigator.mozL10n.DateTimeFormat();
alert( f.fromNow(d));
若是 en-US 語言，將會發出「58 Minutes Ago」的警示。字串另將依照日期語系檔中的「minutes-ago-long」格式而定。
minutes-ago-long={[ plural(value) ]}
minutes-ago-long[zero] = just now
minutes-ago-long[one] = a minute ago
minutes-ago-long[two] = {{value}} minutes ago
minutes-ago-long[few] = {{value}} minutes ago
minutes-ago-long[many] = {{value}} minutes ago
minutes-ago-long[other] = {{value}} minutes ago
快來加入我們！
若要進一步了解翻譯實例，可參閱 Mozilla 開發者社群網站 (Mozilla Developer Network，MDN) 中的《Creating localizable web applications》一文。
在你翻譯自己的 Firefox OS Apps 之後，會不會想協助 Firefox OS 的翻譯呢？快從這裡取得相關的貢獻資訊。
原文鏈結：https://hacks.mozilla.org/2013/08/localizing-firefox-os-apps/
