rplus.github.io [POST] 自訂 Google Translate 樣式為中英文段落交錯以利比對

因為 FB 寫了篇英翻中的介紹文， https://www.facebook.com/photo.php?fbid=1118960684838380

就順便來整理一下自己在使用的中英對照翻譯流程

PS: 這主要是為了練習英文，並不是為了要看中文我自己看英文是比較需要跟著讀才有辦法閱讀快些 XDD 所以利用這個中英對照的技巧，我可以加速理解文章所表達的概要，再視情況看英文細讀

我用的是 Chrome，也只會講 Chrome，接下來以這篇文章為例： Let’s Write Beautiful CSS Comments http://seesparkbox.com/foundry/lets_write_beautiful_css_comments

會先講講思路順序，再來談談怎麼自動套用~

1. 瀏覽器內建翻譯

基本上就是 Google 翻譯完後會把內文的字換掉只有 hover 過去後，才會用 popover 的方式呈現原文

但是這方式滑鼠要不停地移動才能看到原文而且字又小的跟鬼一樣，超費勁

所以我用的是第二種方法~

2. 使用 translate.google.com 來幫助翻譯整個網站

基本的作法就是去 https://translate.google.com/ 把目標網址貼到英文欄位裡再點擊翻譯後連結網址大致就會變成這樣~ https://translate.google.com/translate?sl=en&tl=zh-TW&js=y&prev=_t&hl=zh-TW&ie=UTF-8&u=http%3A%2F%2Fseesparkbox.com%2Ffoundry%2Flets_write_beautiful_css_comments&edit-text=&act=url

沒意外的話，就可以看到如下的畫面(不怎重要，圖縮小些)

這時應該有些人會覺得：「啊不是跟第一個方式一樣，都只有中文而沒有英文呀？」

## 1 的結構	## 2 的結構

看一下這個比較圖後就能發現： translate.google.com 刷過的網頁結構會有原始英文存在~ 這個就是我們想拿來作中英對照的物件了~

那接下來就是想辦法讓它跑出來就行哩！

那想必大家一開 devTools 應該就都看得出來是這個 class 被上了 display: none !important; 而消失了

關掉隱藏的規則後就跑出來了~

不過這樣中英夾雜的排序並不利於人眼掃描閱讀

把它變成 block 後就比較好理解段落，也比較好比對了

下圖為英文段落加上 opacity: .5; 後的效果可以在不破壞文字原色調的前題下，區別出中英文段落，也更容易判讀中英文的區塊

基本上的流程就是這樣啦~

接下來講講如何快速執行上面的兩個動作：

跳往 translate 頁面
調整 translate 頁面的 CSS

1. 跳往 translate 頁面

方法有很多種，最簡單的是加個 bookmarklet

javascript: (() => {
  window.open('https://translate.google.com/translate?sl=auto&tl=zh-TW&u=' + location.href);
})();

要看翻譯長文的時候就點一下書籤

不然也可以加網址列搜尋的快速鍵，有興趣的可以看這篇進階應用方式 https://www.facebook.com/rplus.tw/posts/1100295126704936

又或者有些地方沒法執行 JS

例如：有時會把部份網站的 JS 關掉…

那你也可以自己寫一個 extension 來處理右鍵選單的部份~ 基本上也是很簡單地跳轉頁面而已

以我自己寫的套件為例： https://github.com/Rplus/extension-contextMenu/blob/7d4a4289d799764640caa7d526982ac30acfb7f4/extension/context.js#L34-L42

這邊若你希望動作不是新開分頁，而是直接跳轉的話，調整一下 window.open 為 location.href 重新賦值即可

2. 調整翻譯頁樣式

請安裝 Stylish，這可以客製各網站的 CSS https://chrome.google.com/webstore/detail/stylish/fjnbnpbmkenffdnngjfgmeleoegfcffe 然後去裝這個 style 吧~ ( 我懶得一個個解釋了… Orz https://userstyles.org/styles/127892/google-translator-rlpus

主要是分兩層 iframe 在處理樣式，外層的要把無用的 navbar 移除 + 調整 iframe 至全螢幕高內層的處理翻譯段落的分離

而至於註解掉的那行是比較奇妙的呈現需求：中文淡、英文深