ETBlue 外星人吟遊地球: -步驟-技術文件翻譯小工具：在原稿中，自動秀出專業詞彙的中英對照

去年，菜鳥我為了加強自己的學習效率，自告奮勇的參與 Rails Guide 的中文翻譯任務。過程中，發現有一個步驟，浪費了我許多時間：查對詞彙表。

翻譯技術文件的時候，許多專業詞彙，往往還沒有標準的譯法，但是，在同一系列的技術文件中，這些詞彙又必須要統一，以免讓讀者混淆。所以，一份統一的詞彙表，是有必要存在的。

不過，詞彙表出現後，又有另一個問題。一系列的技術文件，通常篇數很多，需要好幾個人共同完成；於是，新加入的譯者，必須在閱讀每個段落的過程中，不斷翻閱現有的詞彙表，以免不小心把應該統一的詞彙給翻譯錯了。甚至，即使是同一個譯者，也常常翻譯到後面，就忘記前面的譯法，導致前後不一的情況。

而本菜鳥... 身為未來的程式設計師，當然不能坐視這個問題不管！（握拳）

要讓詞彙大一統的方式，我想到兩種：

在開始翻譯之前，先將詞彙表的全部資料，丟進某個迴圈，用迴圈把原稿 textile 檔案中，每個有出現在詞彙表的英文單字，直接取代成詞彙表中的中文單字。
同理，不是直接取代，而是在英文字彙旁邊顯示中文單字 ---- 只要有顯示就好，不管是在網頁中顯示，還是在 gedit 文字編輯器中顯示，對我來說都可以。

第一種方法，有個翻譯面的問題，同一個字彙，在不同的情況下，會有不同的意義，即使專業詞彙也是如此。所以，我很快的排除掉這個作法。

第二種方法，既可保留完整的英文原文，又可給譯者正確的中文詞彙提示，對我來說是理想的解方。至於實作的方式，由於菜鳥我只知道 web 前端的 javascript 語言，所以就選擇在網頁上實作，而不是在文字編輯軟體中實作（寫 gedit 外掛應該是件很艱難的事情，我覺得）。

中英對照的效果，就像這樣：（網頁是下載回來後在本機開啟，所以只有 html 頁面內容，沒有原本 rails guide 網站上的 css 編排效果）

使用前，純英文的網頁

使用後，顯示詞彙表上所有詞彙的中英對照的網頁（紅色英文，綠色中文）

實際的步驟如下：

連到該文件的網頁，按 Ctrl + S 儲存到自己的電腦中。以我為例，我就是連到 Ruby on Rails 指南手冊網站，選擇我要翻譯的文章後儲存，檔案的格式會是 html。
如果，你的原稿檔案不是網頁檔，而是一般的 odt / doc 檔案的話，到 LibreOffice / OpenOffice / M$ Office 文書軟體中，選擇檔案File > 另存新檔Save as... ，檔案格式選擇 html ，文書軟體就會自動幫你把檔案轉換成 html 格式（用這個格式，文件在瀏覽器中顯示才會正常）。
連到詞彙表的 Google Spreadsheet 網頁，選擇 File > Download > Download as csv ，將詞彙表以 csv 的格式，儲存到自己的電腦中。以我為例，我就是連到 Rails Guide 翻譯詞彙表的頁面。
如果，你的詞彙表不是 google docs 檔案，而是普通的 ods 或 xls 試算表檔案的話，原理也是一樣，到 LibreOffice / OpenOffice / M$ Office 文書軟體中，選擇檔案File > 另存新檔Save as...，檔案格式選擇 csv 即可。
這邊要注意的是，為了方便 javascript 程式抓取，你的詞彙表中，英文詞彙要放在第二欄，中文詞彙要放在第三欄，建議翻譯方式要放在第四欄，就跟我的 Rails Guide 詞彙表一樣。這樣等一下就不需要去修改程式了。
養成好習慣，將原稿的 html 檔案，跟詞彙表的 csv 檔案，放到同一個資料夾中。不放也是可以，只是資料比較容易散亂。
在原稿的 html 檔案上，按右鍵，選擇「在別的程式中開啟... > gedit（Ubuntu）」或是「開啟檔案... > 記事本 Notepad（Windows）」，用純文字編輯器打開檔案。
往下捲動到檔案的最後面，可以看到像這樣一段文字：
</body>
</html>

插入下面這段文字：（紅色字是插入的部份）
<script type="text/javascript">

var csvFile=new XMLHttpRequest();
var filePath="file:///home/etblue/Codes/translation/rails-guide-glossary-list-zh_tw.csv"

csvFile.open("GET", filePath, false);
csvFile.send();

glossary = csvFile.responseText.split("\n");
for(var i=0;i<glossary.length;i++)
{
words=glossary[i].split(",");
var en=" "+words[1]+" ";
var zh=words[2];
var suggest=words[3];
var pattern=new RegExp(en,'g');
document.body.innerHTML = document.body.innerHTML.replace(pattern,'<b style="color: red;">'+en+'<small style="color: green;">中譯:'+zh+',翻譯方式:'+suggest+'</small></b> ');
}

</script>
</body>
</html>
為了避免網頁轉換問題，實際上複製程式碼的時候，請複製下面這段：

	<script type="text/javascript">

	var csvFile=new XMLHttpRequest();
	var filePath="file:///home/etblue/Codes/translation/rails-guide-glossary-list-zh_tw.csv"

	csvFile.open("GET", filePath, false);
	csvFile.send();

	glossary = csvFile.responseText.split("\n");
	for(var i=0;i<glossary.length;i++)
	{
	words=glossary[i].split(",");
	var en=" "+words[1]+" ";
	var zh=words[2];
	var suggest=words[3];
	var pattern=new RegExp(en,'g');
	document.body.innerHTML = document.body.innerHTML.replace(pattern,'<B style="color:red;">'+en+'<small style="color:green;">中譯:'+zh+',翻譯方式:'+suggest+'</small></B> ');
	}

	</script>

view raw translation-glossary-script hosted with ❤ by GitHub

其中，粗體黑字的部份，也就是詞彙表的位址的部份，要換成你自己電腦中的詞彙表位址。
在詞彙表的 csv 檔案上按右鍵，選擇「用其他程式開啟...」，用 Firefox / Chrome 等瀏覽器打開檔案。打開時，會先跳出一個「是否要下載這個檔案」的小視窗，我們不用理它，只要到瀏覽器的網址列，把 csv 檔案的網址複製下來即可。
複製位址後，回到文字編輯器中，將 file:///home/etblue/Codes/translation/rails-guide-glossary-list-zh_tw.csv 換成你自己的詞彙表位址。
在文字編輯器裡，將原稿的 html 儲存後關閉，然後，用正常的方式（滑鼠雙點或者在上面按enter）打開原稿檔案，電腦就會用預設的 Firefox / Chrome / IE 等瀏覽器，將英文原稿打開，並且在幾秒鐘後，顯示中英對照。大功告成！

這段中英對照的 javascript ，依據文件的大小，所需要的執行時間也不同，以我為例，我的這篇 active record validations and callbacks 文件就很長，打開中英對照的時候，瀏覽器要停頓個 15 秒左右，才會恢復正常，中間因為等待太久，還會跳出這個小視窗：

此時按「繼續continue」即可，讓它靜靜地跑完吧！

順利打開後，就可以一邊開著這個網頁，一邊開著文字編輯器，對照著做翻譯了。實際的範例請看我放在自己的虛擬主機上的這個頁面（注意，瀏覽器會呆掉約 15 秒鐘，請盡量在沒有開其他分頁的狀況下打開此頁）：http://www.etblue.idv.tw/code/active_record_validations_callbacks.html

至於你自己的原稿檔案，只要存在自己的電腦裡，直接打開，就會有一樣的效果，不需要上傳到任何的網路主機上。

就這樣囉，祝翻譯順利 ^_^

-- 補充： script 功能說明 --

這段 javascript 有幾個限制，其一，就是之前在步驟中提過的，你的詞彙表必須調整成跟我一樣的格式，程式才不會抓錯欄位。當然，看得懂的高手們也可以自行修改程式，讓它符合你自己的詞彙表設定。

第二個限制，是英文詞彙必須在句子中間，如果是一個段落的第一個字，或是一個句子的最後一個字，都不會被程式抓取。

程式中設定，抓取的詞彙必須前後都和空白相連，形成「空白英文詞彙空白」的格式，否則不會被抓取。為什麼要這樣設計呢？因為，如果不這樣做的話，長字彙會被程式自由切開變成短字彙，像是程式搜尋「cord」的時候，會把「record」的後半段也當成是「cord」，造成斷字錯誤。所以，必須告訴電腦「前後都有空白的才算是一個英文字」。但是，也因為這樣，在句點前面的英文字，以及在一個段落最開頭的英文字，或是夾在引號之間的英文字，都會被程式略過。之所以沒有特別針對這個問題做修正，是因為專業詞彙往往在技術文件中密集出現，偶爾漏掉幾個也不錯，看起來反而比較沒那麼花 ^^b

這樣設計還有另一個好處，只要夾在兩個空白之間，不管是單一字彙「record」，或是組合的字詞「Active Record」，只要登錄在詞彙表中，都能夠正確的辨認出來，而不會讓「Active Record」被分開解讀成「Active」和「Record」。

第三個限制，是抓詞時會區分大小寫。技術文件中，常會出現需要大寫開頭的專業詞彙，像是 Active Record ，但是它們不是大寫的時候，往往有另外的平常的意義。因此，這段 script 設計成會區分詞彙的大小寫。也就是說，你的詞彙表可能要為此而稍做調整，把詞彙的大小寫整理過一遍。

第四個限制，從第二個限制引申而來，那就是單數、複數、或者其他變化形，會被認定成不同的詞彙。如果某個專有詞彙常常有單複數的變化的話，最好把兩者都放入詞彙表中。

以上，歡迎高手幫忙改進 ^^