精益求精， ePub 電子書制作手記

什么是 ePub 

---

　　ePub 是 Electronic Publication 的縮寫，意為電子出版，是一個自由的開放標准，屬於一種可以“自動重新編排”的內容，也就是文字內容可以根據閱讀設備的特性，以最適於閱讀的方式顯示。ePub 檔案內部使用了 XHTML 或 DTBook （一種由DAISY Consortium提出的XML標准）來展現文字、並以 .zip 壓縮格式來包裹檔案內容。ePub 格式中包含了數位版權管理（DRM）相關功能可供選用。

 

ePub 格式的優勢

---

 　　說白了，ePub 就是一個把書籍內容包含在內的壓縮包，解壓后的文件一般包含 CSS（樣式表文件）、HTML（章節內容文件）、JPG（插圖）、TFF（內嵌字體文件）。

• ePub 中的所有內容基本上都是XML。ePub 文件可使用標准 XML 工具創建，不需要任何專門或者私有的軟件。
• ePub 內容（eBook 的具體內容）基本上都是 XHTML 1.1 。
• 大多數 ePub XML 模式都來自現成的、可免費獲得的、已發布的規范。 最關鍵的在於 ePub 元數據是 XML，ePub 內容是 XHTML。如果您的文檔構建系統產生的結果用於 Web 或基於 XML，那么也可用於生成 ePub。

 

ePub 基本架構

---

 

 

 

 

 

更多的詳細介紹可以參考《ePub OPF 電子出版品結構資料 中文規範書v1.0》

 ePub 電子書制作，走起！

---

　　子曰:“工欲善其事,必先利其器。”制作電子書也是如此，想要制作出質量上乘的電子書就必須得有利器的協助，Jutoh 和 Sigil 便是這兩把利器，這兩者就好比倚天劍和屠龍刀，刀劍合璧，天下歸心。當然光有刀劍可不行，沒有鞘來裝盛的武器可是會傷及自身的，Word 就是這么一把鞘。

　　得到了這三樣至寶，就得學會怎樣使用。一般來說，電子書的制作分一下幾個流程：

1. 用 Word 標記樣式；
2. 將 Word 文件導入到 Jutoh 中，進行章節分割，並設計封面、目錄，編譯生成 ePub 電子書
3. 使用 Sigil 對 ePub 電子書進行調整
4. 使用 Calibre 將 ePub 格式轉換成 mobi、azw3 等格式（如果需要內嵌字體，則在這之前，可以先使用 FontRepack 嵌入字體）。

　　怎么使用 Word 就不必我一一贅述了，但要想制作精美的電子書還得需要好的樣式模板，你可以根據自己的愛好定制模板，也可以使用現成的模板。

　　這里對『樣式模板』做一個簡單的說明（詳細說明可以參考這個帖子）：

　　常用的樣式大致分三種：段落樣式、字符樣式（或者叫行內樣式）、鏈接樣式。

　　顧名思義，段落樣式管這一段長什么樣，字符樣式只針對特定的字符，鏈接樣式有點特別，你把它用在段落上就像段落樣式，用在字符上就像字符樣式。一般很少用鏈接樣式，除了標題系列。

　　通過模板規范導入的文本后，你就得到了一個已經完成的 Word 文件，下面打開 Jutoh，新建一個項目並導入這個 Word 文件。

　　通過 Jutoh，你可以完成：

• 制作電子書的目錄
• 完善電子書的元數據
• 給電子書增加封面
• 編譯成 ePub 格式的電子書
• ……

　　上一步中編譯出來的 ePub 其實就已經可以供人閱讀了，如果你對電子書有更高的要求，可以使用 Sigil 給電子書進行調整、增加富文本。

• Sigil 編輯元數據：

 

• Sigil 讓多看全屏顯示封面

在 content.opf 里的下把需要全屏顯示的頁后面都加上“properties=”duokan-page-fullscreen”

 

• 首行縮進與段落間距

style.css 中使用 text-indent 來控制行首縮進
text-indent: 2em; 的意思就是行首縮進 2 個字符

用 margin 控制段落間距

.p {
margin-top: 0.00em;
margin-bottom: 0.00em;
margin-left: 0.00em;
margin-right: 0.00em;
}

你還可以這樣寫：

.p {margin: 0em 0em 0em 0em;}

• 注：單位 em 是字符的意思，px 是像素。

 其他比較常見的 CSS 代碼這里舉個例子：

.head {
font-weight: bold;
/*加粗*/
font-size:1.5em;
/*字號*/
color: #985C00;
/*字體顏色*/
line-height:130%;
/*行高*/
text-decoration:underline;
/*下划線*/
text-align: right;
/*右對其*/
text-indent: 0.00em;
/*首行縮進*/
adobe-hyphenate: none; hyphens: none; -moz-hyphens: none; -webkit-hyphens: none;
/*分割線*/
margin-top: 0.00em;
/*外邊距-上*/
margin-left: 0.00em;
/*外邊距-左*/
margin-right: 0.00em;
/*外邊距-右*/
margin-bottom:0.5em;
/*外邊距-下*/
padding: 5px 5px 5px 5px;
/*內邊距*/
border-width: 0.1em;
/*設置四條邊框的寬度*/
}

你還可以參考《CSS參考手冊》

 

富文本，大顯神通

---

用過 Kindle 的童鞋都知道，Kindle 閱讀電子書有個彈窗注釋的功能，這個彈窗注釋，就是富文本的一種。

由於注釋一般需要上標，類似這樣的一段文字：

后世將李白^[1]和杜甫並成為“李杜” 。

STEP 1）所以需要在 style.css 中添加上這么一段代碼：

.footnote {
        text-align: justify;
        text-indent: 0em; 
        line-height: 110%;
        font-size: 0.85em;
        font-family: "zw","宋體","明體","明朝",serif;
}

STEP 2）然后在需要注釋的地方插入如下代碼：

<a id="ref_footnotebookmark_start_1_1"></a><span style=" font-size: 0.75em; vertical-align: super;"><a href="#ref_footnotebookmark_end_1_1">[1]</a></span>

那么文本就變成這樣了：

后世將李白<a id="ref_footnotebookmark_start_1_1"></a><span style=" font-size: 0.75em; vertical-align: super;"><a href="#ref_footnotebookmark_end_1_1">[1]</a></span>和杜甫並成為“李杜” 。

紅色部分：聲明一個 ID，ID 的名稱是"ref_footnotebookmark_start_1_1"

綠色部分：規定紫色部分的樣式

藍色部分：跳轉到另一個 ID，ID 的名稱是"ref_footnotebookmark_end_1_1"，"#"是指向的意思。

紫色部分：顯示的上標

STEP 3）在章節的末尾插入如下代碼

<p class="footnote" id="ref_footnotebookmark_end_1_1"><span style=" font-size: 0.75em; vertical-align: super;"><a href="#ref_footnotebookmark_start_9_1">[1]</a></span>李白，字太白，號青蓮居士。</p>

 

很遺憾的是，多看並不支持這種代碼，它另有一種規范。

STEP 1）在 style.css 中插入如下代碼：

/** Duokan Extent Start **/
sup img {
        line-height: 1.2;
        width: 1em;
    height: 1em;
    margin: 0;
    padding: 0em;
        vertical-align: text-top;
}

li.duokan-footnote-item {
        font-family:"ht","微軟雅黑","黑體","zw",sans-serif;
        text-align: left;
        font-size: small;
        line-height: 1.2;
        padding: 0px;
}
/** Duokan Extent End **/

STEP 2）注釋需要一張15x15的圖片代替上標顯示，你可以使用這個也可以自己制作一張。

STEP 3）在 Sigil 中將這個圖片添加到 Images 文件夾內，命名為 note.png

STEP 4）在需要注釋的地方插入如下代碼：

<sup><a class="duokan-footnote" href="#ref_footnotebookmark_end_1_1" id="ref_footnotebookmark_start_1_1"><img alt="" src="../Images/note.png" /></a></sup>

那么段落變成這個樣子：

后世將李白^{<a class="duokan-footnote" href="#ref_footnotebookmark_end_1_1" id="ref_footnotebookmark_start_1_1"><img alt="" src="../Images/note.png" /></a>}和杜甫並成為“李杜” 。

STEP 5）在章節末尾添加腳注代碼：

<ol class="duokan-footnote-content">

<li class="duokan-footnote-item" id="ref_footnotebookmark_end_1_1">
<a href="#ref_footnotebookmark_start_1_1">這里是注釋</a>
</li>

</ol>

如果有多個注釋可以這樣寫：

<ol class="duokan-footnote-content">

<li class="duokan-footnote-item" id="ref_footnotebookmark_end_1_1">
<a href="#ref_footnotebookmark_start_1_1">注釋一</a>
</li>
  
<li class="duokan-footnote-item" id="ref_footnotebookmark_end_1_2">
<a href="#ref_footnotebookmark_start_1_2">注釋二</a>
</li>
  
<li class="duokan-footnote-item" id="ref_footnotebookmark_end_1_3">
<a href="#ref_footnotebookmark_start_1_3">注釋三</a>
</li>

</ol>

更多信息可參閱《 多看電子書規范擴展開放計划》

-----------------The END------------------