線上電子書顯示品質之研究與改善

Allen Kuo (kwyshell)
10 min readMay 12, 2024

--

現在人的空間有限,雖然紙的溫度對於讀者而言是最真切美好的感受,但是使用電子書取代部分閱讀已經是不得不的選擇。

然而電子書的製作品質與顯示技術對於喜歡看紙本書的人實在有些無法接受。良莠不齊的呈現品質對於閱讀體驗真的是無比傷害,也影響了讀者吸收知識的效率。

電子書格式

最常見的電子書格式不外乎,ePub 格式與 PDF 格式。ePub 格式與過去Windows 常見的 CHM 都是一種 WEB 顯示技術。這種格式都是在 Client (裝置端) 渲染而成的。因此,觀賞效果就跟網頁是類似的。而PDF就更不用說了,幾乎是書本印刷的標準格式了。是一個非常成成熟的文件格式。有著精良的版面設計與良好的列印品質。所以 PDF 幾乎是所有紙本書本的原始數位版本。然而 PDF 卻是不易於編輯的檔案格式。我們可以稱呼他為最適合印列輸出的顯示格式。

PDF 如此的終於還原作者的原始的製作版面,其效果就如同電影放映般那樣的播放原本錄製的結果。所以 A4 的 PDF 就應該用 A4 的顯示設備才能達到最佳的觀賞效果。這點造就了他精美的列印效果,卻也讓他難以在各種尺寸大小的電子閱讀器、螢幕上有著良好個觀賞效果。

仔細觀察上圖,ePub 與 PDF 電子書有著完全不同的顯示風格。PDF 是如此精美,就如同他列印出來的書本那般,但是卻很像張圖片那樣,維持固定的格式,無法針對顯示的尺寸、螢幕做出最佳的調整。相反的,ePub 的顯示基於 XML/CSS 等網頁渲染技術,整體而言偏向於簡單的文字輸出,最大優點他的版面是動態的,是可程式化的。當然也不乏製作精美的 ePub 檔案,但其製作難度大與且複雜的 ePub 電子書需要負擔高昂與緩慢的渲染成本,進而影響觀賞的流暢度。

DK Eyewitness — Be More Japan The Art of Japanese Living ePub

DK Publisher 一直以製作精美書本著稱。近年來他們也逐步把顯示技術由PDF 置換成 ePub。然而就算是 DK 這樣注重製作品質的公司也無法把 ePub 製作的如同 PDF 那樣精美。但這個選擇絕對是為了更好適應各種顯示設備而必須做出的抉擇。

總的來說,PDF 電子書與紙本書更類似,版面也相同。就像用螢幕看書本那種感覺。雜誌類,攝影類,旅遊刊物的不二選擇。ePub 因為類似網頁風格,所以更適合不同尺寸大小的閱讀器。常見的電子書中標示 流式版 (Float Layout) 都是這類電子書。當然 ePub 也有固定格式 (Fixed Layout),繪本類,圖畫書等等都是這類。

電子書的顯示與閱讀品質

現行的電子書(特別是中文書)的顯示品質可以說是差強人意。多數而言都必須遷就於原本書本的製作格式。此外,前端(WEB)與裝置的顯示技術不夠完善也是原因之一。

PDF 電子書的顯示

由於PDF並不具備自適應顯示能力,顯示設備必須配合 PDF 的版面大小來尋求最佳顯示結果。所以多數電子書服務都會選擇將 PDF 在服務端就渲染成適合的圖片大小,然後傳輸到裝置端以圖片的方式顯示。

顯示流程約略為:

  1. 評估裝置的 DPI,比方顯卡的 DPI 設定或是網頁的 "window.devicePixelRatio" 比例。
  2. 檢查 PDF 文件的 DPI 值。
  3. 輸出尺寸就是以 PDF SIZE * DEVICE_DPI / PDF_DPI

這樣得到的結果就約等同 PDF 期望的觀賞效果。

然而事實上,很多電子書服務為了節省頻寬與保護內容的原則,一來都會降低成像品質或是用運了錯誤的渲染設計。往往顯示結果看來模糊不清。

左邊是一張原始的 PDF 類型電子書的顯示效果。由於電子書頁應該只是簡單的由 PDF 然後根據顯示比例產生適合的大小,然後輸出到裝置端顯示。但是這樣的輸出有可能會造成字體不清晰,文字辨識度低。尤其對筆劃多的中文字體,這樣的顯示結果很容易讓觀賞者眼睛疲倦,又嚴重影響閱讀的沉浸感。

為了改善閱讀效果,我開發了一個閱讀效果強化的 Filter 來提升閱讀品質。只要將螢幕上的畫面輸送到 Filter 中強化後再輸出,就能提升品質。

為了在計算與品質取得平衡,我通常只會套用 "Basic Enhanced"。這個我稱為基礎強化功能,主要是讓文字與背景更為分離。另外,些微增加對比度與淡化效果。幾個簡易組合計算便能產生莫大的閱讀提升。

除了基礎強化功能外,我們也能利用 AI 來強化閱讀效果。AI Scaler 算法中,我們可以使用神經網路的放大算法 Remacri 來計算。可用 x1 或是 x4 再配合超採樣的算法來讓文字進一步達到美化、清晰又能維持一定的圖像品質,更能保持圖形的彩度。比如在 AI x4 放大圖中,再使用 LANCZOS 算法來取得我們要的輸出比例。當然我平常只有在特定的書本上我會使用這樣的Filter 算法。因為這個算法非常耗損 GPU 與 CPU 的運算。

GPU Loading for Remacri
CPU Loading for enhanced filter

當然電子書商不可能預先在服務端輸出就套用各種強化計算來增加品質。更不可能在 Client 端設計這些強化工具來提升讀者的閱讀體驗。因為這些都會無形的堆高營運的成本。

運算效能對比如下,

  • 原圖:16.98 it/s (每秒處理約 17 Pages)
  • 閱讀增強:3.32 it/s (每秒處理約 3 Pages)
  • 閱讀增強+AI x 1 強化:14.44 s/it (每Page 需要 14 秒)
  • 閱讀增強+AI x 4 強化:18.29 s/it (每Page 需要 18 秒)

另外,由於 AI 部分與圖形增強部分我是採用 python 來完成的。因為 python 目前來說可以說是使用 AI 最好的語言工具之一。但是 python 的缺點與優點其實也很明顯。相對於我之前使用 C/C++ 為主要工具,相比之下,python顯得真的是超級慢的。不過使用起來真的非常上癮,語言功能真的超多的,也超方便。所以我現在需要高精確、高度計算都會過度到 C/C++,然後再把成果拿回python這邊來分析整理。

ePub 電子書的顯示

ePub 電子書格式一般而言幾乎就沒甚麼顯示品質的問題。因為這個技術本身就是基於 WEB 顯示技術而設計的。通常而言,ePub 會被以網頁的形式輸送到前端顯示。而這些排版都是以簡單的圖片與文字為主。不會以 PDF 那般形似書本的多彩模式繪製。

由於 ePub 具有自適應的能力。所以一般而言不會如同 PDF 一樣告訴你這本書有多少頁數。因為頁數是隨著每頁能顯示多少內容而改變。比方這本書有1000 個字體。一個小的螢幕一個頁面只能顯示 10 個字體,另一個可以顯示50 個字體。這樣就會有 100 頁與 20 頁的差別。當如固定板式的 ePub 也能如 PDF 那般能把明確的頁數事先統計出來。

製作完善的電子書閱讀設備,理論上應該能完美的選擇最適合的文字大小、最精美的文字渲染效果,最適合的顯示文字。很多電子書商,也提供各種輸出效果給 ePub 類型的書本。

然而,ePub 的書本通常只適合小說或是以文字為主的書本。因為這樣的書本本身的構圖就偏向簡單風格。通常只有簡易文字排版與插圖。此外 ePub 也並非顯示都沒有問題。比方選用不適合的字體、錯誤的大小,渲染設計的低下等等也會造成一定程度的不良的影響。當然有時候個人偏好取向也是一種問題。

如上圖,最左邊為原圖。由於該電子書商選用的字體非常的細。背景顏色也有點灰暗。字體雖然清楚,但是看久了也吃力。如同 PDF 一樣,對於 ePub 也準備了一個基礎強化功能 “Basic Enhanced”。這也是我們預設套用於 ePub 類型電子書的強化方式。

基礎強化中,我們實施了,淡化、對比調整、文字增黑還有色彩還原的計算。在上圖中央,就是我使用了基礎強化功能的結果。此外,為了改善閱讀,我們其實可以為字體加黑與加深等方法。最右邊的就是成為BOLD的計算方式。

BOLD 強化計算,為了讓文字閱讀性更好,或是在不同的環境與設備上得到多樣的選擇,開發了一種可以增強文字顯示,卻又同時保持圖片的正確性的算法。(如上圖右方)

以下我們針對 BOLD 算法提供了兩種方法對策,

BOLD1 Filter

左邊是原本的 ePub 文字。在我的 Filter 中,提供了一種 BOLD1 Filter。這個 Filter 是基於圖形邊緣的計算法則。所以並沒有辦法保證總是能夠達到預期的結果。但通常對多數的 ePub 電子書都是有正向效果的。不過這個 BOLD1 算法為了保持文字周圍的銳利化,雖然文字看起來更粗了,但是缺點就是會增加文字周圍的鋸齒型狀。

BOLD2 Filter

為了改上 BOLD1 的問題,我開發了 BOLD2 Filter。不同於為了保持銳利的文字邊緣,我們選擇了使用類似 Alpha Blending 的技術並按照不同的文字權重來生成效果。

BOLD 的核心計算方式

這種算法在於如何找出文字或是圖片的邊緣,然後根據權重判斷來產生不同程度的效果。

左邊是原圖,右邊是我們進行邊界搜索。借助 OpenCV 強大算法,我們在邊緣尋找的時候,盡可能找到正確的文字邊緣,而不是圖片邊緣。因為只有文字是我們真正要強化的對象。但有時候事情總不是那麼美好,多少有些非文字的部分也會被誤判為邊緣。也許將來能借重AI的訓練模型來改善。

標記邊緣後,透過平滑處理、膨脹、侵蝕算法來美化標記的邊緣遮罩。隨後就是以這些遮罩來強化文字結果。

上圖中,右邊是我們增強 BOLD 的結果。整體看來會約略增加一些模糊與柔和效果。我們有時候也可以針對這些結果使用一些輕微的銳利度調整。

Difference and Invert (Original and Enhanced)

我們用圖像相減(為了方便觀看,DIFF後取反相),就能看出兩張圖受影響的部分。簡單來說,大多數文字周邊都得到了一定程度的增強。

結論

總而言之,電子書目前可以簡易歸納為,圖片形式的 PDF,WEB 向量形式的 ePub (流式或是版式) 或是混搭兩種模式的顯示方式。我們針對每一種顯示方式都提出了各項改善方針。要達到最好的顯示效果,就要搭配最好的尺寸、最好的渲染方式與最好的色彩選擇。有時候,為了讓閱讀清晰可見,轉為灰階模式,增強對比度也是一種很好的選擇。

--

--

No responses yet