打造 E-ink 專用的瀏覽器 (X) — 支援全文翻譯對照

Daniel Kao
Jun 10 · 5 min read

寫著寫著,竟然寫到第十篇了,真是一段漫長的歲月(嚴格來說,其實也只有幾個月而已)。這次開發的功能,對我個人來說,是個 killer feature 啊!雖然還有其他的幾十個功能也是。

單純瀏覽網頁的話,其實不大需要全文翻譯的功能。但總有些時候,會需要看外文的網頁,而外文裡可能有許多單字,或是看外文的速度沒有那麼快,閱讀起來會很辛苦。這時,如果能夠跟 Chrome 一樣,提供全文翻譯的話,對於使用體驗上會好很多。如果是有學習語言需求的話,能讓翻譯的結果跟原文對照著看,會是更好的呈現方式。

在文石(Onyx)的電子書閱讀器上透過內建 Reader App 閱讀書籍時,可以開啟雙畫面,一邊是電子書的內容,另一邊是原文翻譯出來的結果。原文翻譯的功能,其實是利用了系統的 Multi-Window 功能,把畫面切成兩半,一半是 Reader App;另一半則是另一個內建的字典 App。內建的字典 App 可以用來查詢單字,句子,以及文章。Reader App 很巧妙地把這兩件事串起來,讓使用者只要點選雙開翻譯畫面,就能馬上看到翻譯的結果。

雙開翻譯畫面對我來說超有用的,而且我發現它的翻譯品質比想像中來得好,大概每一頁有八成以上九成是準確的翻譯,少部分內容才需要自己看著原文確定它真正的意思是什麼。下面附上一頁 Kilian Jornet (越野跑步大神) 的介紹書籍 Courir ou mourir 法文版內容,右邊是翻譯出來的中文效果。要不是有些句子一看就不合理,大部分的句子通順到連我自己都寫不出來。

既然 Onyx 自己內建的 Reader App 可以這麼做,不曉得第三方的 App 是不是也有可能在文石的設備上達成類似的功能呢?很早之前就有這個想法,但一直不知道怎麼實作,就這麼擱著。最近幾天終於研究出來作法了,也很順利地把它套用在 EinkBro App中。下面就要來解釋怎麼做到的。

實作細節

開關 Multi-Window 模式

Multi-Window 模式是在 Android 7.0 加入的功能。隨著手機愈來愈大,和平板的普及化,Android 開始支援一次可以開啟兩個 App。但是提供的支援很陽春,只能把畫面切成兩半,一邊塞一個 App。而且啟動方式很很很難用,必須先進到最近開啟的程式列表,長按其中一個程式的 icon,才會跳出一個選單讓使用者啟動分割畫面。在大部分的 Android 設備中,Multi-Window 模式都是要使用者手動啟動的。

https://developer.android.com/guide/topics/ui/multi-window

但是,既然在 Onyx 上的 Reader App 能夠一鍵就進入分割畫面模式,說不定我也可以做到。後來,真的讓我研究出來了!其實方式很簡單,只要透過 intent 發個 action 就行了!

在 756 行可以分別看到啟動和關閉分割畫面的 action 字串。把它塞到 intent 中再餵給 sendBroadcast() 就可以了。

呼叫字典程式的全文翻譯功能

在系統中,Reader App 和字典 App 分屬兩個不同的程式。Reader App 能把字典 App 叫起來,最常見的方式就是透過 intent 的傳遞,把相關的參數傳入。系統會幫忙找到能處理該 intent 的 App,並把參數餵給它。

觀察了一下當 Reader App 進入雙開翻譯模式時,字典 App 的 CloudTranslationActivity 被啟動了。所以應該是該 Activity 收到了需要翻譯的需求,開始執行。

在經過一番研究後,找到了它需要的 intent action 和參數資料格式,就可以正確地啟動字典翻譯功能。

取得需要翻譯的網頁全文

萬事俱備,只欠東風。東風就是需要被翻譯的網頁內容。

網頁內容千奇百怪,如果直接抓取整個網頁的 text,其中會有很多不必要的資訊,像是標題,側邊欄,其他相關文章連結說明,留言,等等等。

這時,之前開發好的閱讀模式就可以派上用場了。閱讀模式的主要功能正是把不相干的元件都去除,只留下真正重要的內容。如果先在網頁上套用閱讀模式,再抓取內容,就可以得到比較純正的內容。把這些內容再拿去翻譯,才不會顯示雜亂無章。

閱讀模式功能採用的 Readability.js 很好心的提供了一個 textContent 的變數,讓我可以直接拿到裡頭的純文字部分。(第 563 行)

經過上述三個環節,就大功告成啦。由於這功能只支援 Onyx 的設備,所以我在工具列中加了一個全文翻譯的按鈕,但只有在 Onyx 的設備中才會顯示。

以後,希望能夠另外開發利用 Google Translate Web 畫面的全文翻譯功能,這麼一來,就可以不用只受限於 Onyx 的設備。

示範畫面

示範影片

EinkBro

專門為 Eink 設備設計的瀏覽器;支援點擊翻頁,加粗字體,直排,閱讀模式等 Eink 特別需要的功能,並且加強介面的圖案文字對比,讓瀏覽體驗更加順暢。

EinkBro

隨著電子書閱讀器的硬體效能愈來愈好,一台在手,除了可以滿足傳統的電子書閱讀功能外,還可以利用它進行一般平板上可以操作的功能,像是安裝 Android App,或是看網頁。但不論是哪一家的電子書閱讀器,內建的瀏覽器充其量只能稱得上堪用,完全沒有針對電子紙的特性量身訂做。為了解決這個問題,我開始開發一款符合自己在電子書閱讀器上使用習慣的瀏覽器,並把過程記錄於此,希望能幫助到其他也有類似需求的人。https://f-droid.org/en/packages/info.plateaukao.einkbro/

Daniel Kao

Written by

Mobile App Developer

EinkBro

隨著電子書閱讀器的硬體效能愈來愈好,一台在手,除了可以滿足傳統的電子書閱讀功能外,還可以利用它進行一般平板上可以操作的功能,像是安裝 Android App,或是看網頁。但不論是哪一家的電子書閱讀器,內建的瀏覽器充其量只能稱得上堪用,完全沒有針對電子紙的特性量身訂做。為了解決這個問題,我開始開發一款符合自己在電子書閱讀器上使用習慣的瀏覽器,並把過程記錄於此,希望能幫助到其他也有類似需求的人。https://f-droid.org/en/packages/info.plateaukao.einkbro/

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store