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

[Rplus]

因為 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; 後的效果
可以在不破壞文字原色調的前題下，區別出中英文段落，也更容易判讀中英文的區塊

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

---

---

---

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

1. 跳往 translate 頁面
2. 調整 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 至全螢幕高
內層的處理翻譯段落的分離

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

有興趣的可以討論討論~ ❤️

[Rplus]

Google 翻譯有時很鳥就先無視吧…

[Rplus]

今天發現，
Google Translate 的轉址有做些調整
原本的 http:// 是可以執行的，但目前已經要通通改成 https:// 囉~

有在使用的要記得更新一下轉址的 code~

ref: Rplus/extension-contextMenu@7d4a428

[l443018]

感謝！今天來找有沒中英對照的方法，這篇文章正是我需要的！

[Rplus]

耶～ 很高興有所幫助 ：P