從零開始的電子書 epub (壹)
流式版型 (Float Layout)
本文接續上一篇說明電子書的規範與架構之後，接著介紹電子書中最常見的版型——流式版型：
讓文字隨著視窗流動
流式版型的特色，就是讓電子書像網頁一般，在不同螢幕大小的裝置讓文字重新編排，以最適於該裝置的形式提供閱讀。因此，同樣一篇文章，在電腦螢幕可能只有四十行，每行三十個字；到了手機螢幕卻變成有八十行，每行則只有十五個字，以適應手機螢幕寬度較窄但高度較高的閱讀方式。
甚至，有些裝置的閱讀器還會提供調整字體大小的功能，即使是不同的字體大小，流式版型也會重新調整文字排列，不會讓文章超出版面。
那麼問題來了…
問：要怎麼設定讓電子書成為流式版型呢？
答：什麼都不用做 (喂)
電子書預設就是流式版型
電子書的格式之所以被提出，為的就是讓書本內容在不同電子裝置上得以被舒適地閱讀；OPS 規範中也明確定義書的內容必須以 xhtml 建構，確保內容在各裝置的一致性。因此，我們並不需要做什麼特別的設定，要的僅僅是對一些例外情況做 CSS 調整：
——例如：中文小說的『竪排右書』排版。
向左走？向右走？
儘管在網頁的世界中，大部分中文網頁都已經是『橫排左書』的排版方式，我們也都已經習慣『由左至右、由上而下』的閱讀順序；但在中文書籍中，特別是小說類書籍，仍有多數內容使用『竪排右書』、也就是『由上而下、由右至左』的閱讀順序排版。
為了讓內容在電子書上面以竪排右書的方式呈現，我們需要對 CSS 進行一些設定：
@namespace "http://www.w3.org/1999/xhtml";
@namespace epub "http://www.idpf.org/2007/ops";html {
-ms-writing-mode: tb-rl;
-epub-writing-mode: vertical-rl;
-webkit-writing-mode: vertical-rl;
writing-mode: vertical-rl;
}
epub 3 支援 CSS 3，令許多原本不可能的事情一下成真——例如改變文字的排列方向。調整 CSS 設定的 writing-model。
t、b、r、l 即 top、bottom、right、left
vertical 等同於 tb，即由上至下排列；bt 則表示由下至上排列
horizontal 等同於 lr，即由左至右排列；rl 則表示由右至左排列
在設定 writing-model 時，必須特別注意『連號前後的順序』，tb-rl 與 rl-tb 代表的是完全不同的意思：tb-rl 為『由上至下，再由右至左』，是中文小說的常見排版；rl-tb 為『由右至左，再由上至下』，會變成從右邊開始書寫，完成一個『橫排』之後再寫下一個橫排的奇妙版型。
若要設定回一般網頁的橫排版型，可參考下列 CSS：
@namespace "http://www.w3.org/1999/xhtml";
@namespace epub "http://www.idpf.org/2007/ops";html {
-ms-writing-mode: lr-tb;
-epub-writing-mode: horizontal-tb;
-webkit-writing-mode: horizontal-tb;
writing-mode: horizontal-tb;
}
頁面方向
文字排列的方向不同，連帶影響的是閱讀方向也不同，當然書籍頁面的方向也會不同。一般來說，橫排左書的書籍頁面習慣由左至右，上一頁在左邊，下一頁在右邊，翻頁時是由右往左翻頁；竪排右書的書籍 (或是其他如圖畫書、漫畫等) 則相反，頁面習慣由右至左，下一頁在上一頁的左邊，翻頁時則是由左至右翻頁。
至於如何設置電子書的頁面方向？只要在 OEBPS/content.opf 檔案中，編輯 <spine> 的 page-progression-direction 屬性為 ltr（由左至右，預設）或 rtl（由右至左）即可。
...
<metadata>
<dc:title>Title</dc:title>
<dc:creator>author</dc:creator>
<dc:identifier id="bookid">urn:uuid:123-456-789</dc:identifier>
<meta name="cover" content="img" />
</metadata>
<manifest>
<item id="ncx" href="toc.ncx"
media-type="application/x-dtbncx+xml"/>
<item id="cover" href="cover.xhtml"
media-type="application/xhtml+xml"/>
<item id="ch1" href="ch1.xhtml"
media-type="application/xhtml+xml"/>
<item id="ch2" href="ch2.xhtml"
media-type="application/xhtml+xml"/>
<item id="ch3" href="ch3.xhtml"
media-type="application/xhtml+xml"/>
<item id="img" href="image/cover.png"
media-type="image/png"/>
</manifest>
<spine toc=”ncx” page-progression-direction="rtl">
<itemref idref=”cover” linear=”no”/>
<itemref idref=”ch1"/>
<itemref idref=”ch2"/>
<itemref idref=”ch3"/>
</spine>
...其他的小設定
在一本書籍當中，封面是重要的一環，許多人會將封面設置在 <metadata> 中，一些閱讀器也會從這邊抓取封面，以此作為在閱讀器書籍清單中顯示的封面。<meta> 中 content 的屬性須與 <manifest> 作為封面圖的 <item> id 一致。
封面頁除了在閱讀器的書籍清單顯示之外，也會作為書籍內容的一部分顯示在書籍當中。但是，讀者在進入書籍內容前，早已在書籍清單中看過封面，實在不需要在翻開書後再看一次封面，因此可以在 <spine> 中作為封面頁的 <itemref> 設置 liner 屬性為 no，意思為此項目不會出現在讀者的閱讀順序中，讀者進入這本書時將會忽略此項目，直接進入下一個內容。
後記
本篇文章主要介紹流式版型的一些特性與設定。流式版型雖然有利於在不同裝置間閱讀，但對於版型的可控性其實很低，較適合以文字為主的內容；而對於一些需高度依賴版型的內容（例如以圖畫為主的圖文書），則需要採用另一種固定式版型 (Fixed Layout) 才行，此將留待下篇文章介紹。
