翻譯 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/