從零開始的電子書 epub (貳)

Walker Chen
Parenting 數位研發
6 min readFeb 26, 2019

固定式版型 (Fixed Layout)

Photo by Calle Macarone on Unsplash

上篇文章提到了流式版型的特性,以及在設定時要注意的一些細節;本文則接續介紹另一種版型:固定式版型。

站住!不許走

有些書籍內容(例如圖文書)不像流式版型的內容,適合跟著螢幕的大小跟比例而調動;圖跟文必須緊密相連,才能保留原本要傳達的意義。為了因應這些內容,epub 提供了固定式版型的設定,讓創作者能夠更好地發揮。

從內容開始

固定式版型的內容遵循 OPS 規範,可由 xhtml 建構;與流式版型不同的是,除了 xhtml 之外,固定式版型也支援 svg、bitmap images 等組成內容,因此創作者也可將圖文輸出成圖片來呈現。

不論以哪種檔案類型來編輯內容,首先要定義 ICB (initial containing block) dimensions,可看作是定義版型的大小 / 比例,以此來固定版型。

若內容是以 xhtml 建構,須在 <head> 中定義 viewport 的 meta 屬性:

<head>
...
<meta name="viewport" content="width=1200, height=600"/>
...
</head>

而若是 svg,則是定義其 viewBox 屬性:

<svg xmlns="http://www.w3.org/2000/svg"
version="1.1" width="100%" height="100%"
viewBox="0 0 844 1200">
...
</svg>

(四個參數分別為 min-x、min-y、width、height)

最後若是 bitmap images,則會以圖片的原始寬高來直接設定。

綁定內容順序

OPS 的內容完成後,接下來就是 OPF 的部分,首先來看 opf 檔案與流式版型有哪些不同:

由於接下來在 <metadata> 中會設定 rendition 屬性,因此在 <package> 中加入 prefix 屬性,並將其對應到 http://www.idpf.org/vocab/rendition/# (原先在流式版型中的設定還是要有)。

<package ... 
prefix="rendition: http://www.idpf.org/vocab/rendition/#">
<metadata>
...
<meta property="rendition:layout">pre-paginated</meta>
<meta property="rendition:orientation">auto</meta>
<meta property="rendition:spread">auto</meta>
</metadata>
...
<spine toc="ncx" page-progression-direction="rtl">
...
<itemref idref="s4" properties="rendition:page-spread-left"/>
...
</spine>
</package>

接著在 <metadata> 中設定 rendition,總共有 layout、orientaion、spread 三個面向:

rendition:layout 主要設定書籍內容的分頁版型,有兩個值可以設定:

reflowable:
書籍內容沒有被事先分頁,當螢幕足夠一次呈現兩頁時,系統會自動不斷地將下一頁遞補呈現。

pre-paginated:
書籍的部份內容 (spine item) 有被事先分頁,通常適用於一張圖版面過大,不得被拆開成兩頁呈現時,確保這兩頁必須在同一面呈現。

rendition:orientation 是設定閱讀裝置要以哪種方向開啟書籍內容:

auto:
原始設定,依閱讀裝置當前的方向來開啟書籍內容。

landscape:
強制閱讀裝置以水平模式開啟書籍內容。

portrait:
強制閱讀裝置以垂直模式開啟書籍內容。

rendition:spread 則是設定當閱讀裝置為何種情況時,能夠雙頁顯示:

none:
設定裝置在不論何種情況下都只能單頁呈現,不會雙頁顯示。

landscape:
閱讀裝置只在水平模式下才會雙頁顯示。

portrait:
閱讀裝置只在垂直模式下才會雙頁顯示。

both:
不論閱讀裝置在何種情況下都能雙頁顯示。

auto:
由閱讀系統自行判斷裝置是否適合雙頁顯示。

編輯目錄

編輯完 opf 之後,這本書基本上就已經成形了,接著提供目錄便大功告成。相較於以文字為主的流式版型,固定式版型多是以圖為主,層級也都是一頁一頁的單層結構,不像流式版型得動用到巢狀結構的目錄。

打開 ncx ,一般流式版型是透過支援巢狀結構的 <navMap> 來定義目錄(如下):

<ncx xmlns="http://www.daisy.org/z3986/2005/ncx/" version="2005-1">
...
<navMap>
<navPoint id="navpoint-1" playOrder="1">
<navLabel><text>Chapter 1</text></navLabel>
<content src="ch1.xhtml"/>
</navPoint>
...
</navMap>
</ncx>

固定式版型則是透過 <pageList> 來定義:

<ncx xmlns="http://www.daisy.org/z3986/2005/ncx/" version="2005-1">
...
<pageList>
<pageTarget type="normal" value="1">
<navLabel><text>1</text></navLabel>
<content src="s1.svg"/>
</pageTarget>
...
</pageList>
</ncx>

在 pageTarget 中,value 指的是該頁的頁數,type 則有三種類型:front、normal 與 special。front 指的通常是目錄頁、前言等使用的羅馬數字;normal 則是一般常用的阿拉伯數字;special 則指其他特殊數字。

到此,一本固定式版型的電子書已經完成,最後透過 OCF 規範將檔案以 zip 形式封裝成 epub 後就結束了。

後記

【補充】

本系列文所提到的 ncx 已是 epub 2 時代的產物,epub 3 改用 Navigation Document 來取代,詳細可參考 http://www.idpf.org/epub/301/spec/epub-contentdocs.html#sec-xhtml-nav

僅支援 epub 3 的閱讀裝置,將不再參考 ncx 檔案;相對地,僅支援 epub 2 的閱讀裝置也尚未支援 nav 檔。現階段通常建議兩種檔案並存,以因應不同的閱讀裝置。

--

--