epub电子书排版

下载到一本电子书是竖排从右往左,翻页也是从右往左,找了很久的资料,搜到了这两篇
https://blog.forecho.com/e-book-traditional-vertical-conversion-simplified-horizontal.html
https://medium.com/parenting-tw/%E5%BE%9E%E9%9B%B6%E9%96%8B%E5%A7%8B%E7%9A%84%E9%9B%BB%E5%AD%90%E6%9B%B8-epub-%E5%A3%B9-72da1aca6571
终于搞定了,感谢作者

主要内容:
向左走?向右走?

儘管在網頁的世界中,大部分中文網頁都已經是『橫排左書』的排版方式,我們也都已經習慣『由左至右、由上而下』的閱讀順序;但在中文書籍中,特別是小說類書籍,仍有多數內容使用『竪排右書』、也就是『由上而下、由右至左』的閱讀順序排版。

為了讓內容在電子書上面以竪排右書的方式呈現,我們需要對 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,意思為此項目不會出現在讀者的閱讀順序中,讀者進入這本書時將會忽略此項目,直接進入下一個內容。

暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇