# 手把手教你做epub電子書：以繁中純文字直排為例

[TOC]

## 一、為什麼你該自己製作epub？
1. 為了通過上架審核
現在有很多軟體標榜可以無痛幫你從Word或是Pages直接轉換成epub檔案，但是就像是當年Dreaweaver也可以直接做網站一樣，code很髒，效能不佳。上架到網路平台的時候可能會過不了審核。

2. 為了對應跨裝置閱讀
尤其電子書還需要考慮到不同裝置的適應性，要符合不同尺寸的閱讀器，還有iPad，使用Word或是Pages會直接爆版給你看。
如果你稍微懂一點terminal, CSS, HTML，非常推薦自己摸索看看。《台灣 EPUB 3 製作指引》有非常詳細的介紹。希望這篇文章能幫助到還在猶豫的你，或是程式麻瓜的你也能照著步驟順利做出自己的第一本電子書。

## 二、事前環境設置
1. 心理建設：看到error和code也不要怕！仔細看，你看得懂！
2. 下載[Sublime](https://www.sublimetext.com/)：編輯EPUB檔案原始碼
3. 安裝sublime外掛（非必要）
4. 下載[epub-check](https://www.w3.org/publishing/epubcheck/)：測試原始碼是否有bug，將原始碼封包變成EPUB
6. 找到你的terminal (Mac) ：用來跑epub-check
7. 點選畫面右上角的搜尋放大鏡，開啟Spotlight搜尋。

9. 輸入「terminal」，打開它。
10. 下載並安裝[calibre](https://calibre-ebook.com/)：預覽epub檔案

## 三、大致流程

1. 從《台灣 EPUB 3 製作指引》下載範例檔案
2. 用Sublime打開範例檔案
3. 照註釋更改每一頁的內容
a) 封面（p-cover.xhtml）：把封面丟進指定資料夾，更改下的圖片路徑
b) 更改書名頁（p-titlepage.xhtml）
c) 內文（p-001.xhtml）：每一個p-001.xhtml檔案都是一章。用快捷鍵在每一行加`<p></p>`
d) 更改版權頁（p-colophon.xhtml）
e) 移除扉頁內文（p--001.xhtml）
f) 更改目錄（p-toc.xhtml）+ Manifest清單（standard.opf）：把code複製貼上再稍微更改路徑和內文
4. 用terminal打開epubchecker，通過測試之後做成epub封包。
5. 用Calibre打開epub確認內容無誤。
6. 完成！

## 四、從《台灣 EPUB 3 製作指引》下載範例檔案
[《台灣 EPUB 3 製作指引》](https://github.com/dpublishing/epub3guide)是TDPF 台灣數位出版聯盟製作的繁體中文EPUB製作範例，適用於大多數的上架平台。裡面的說明寫得很清楚，基本上我們可以直接基於他們的範例，把內容置換成自己的就可以了。

1. 首先打開這個連結（https://github.com/dpublishing/epub3guide）
2. 點選畫面中的綠色按鈕「Code」，從下拉式選單當中選擇「Download ZIP」將檔案下載下來。

4. 下載之後解壓縮，打開檔案，依照以下路徑找 到我們要的檔案：「epub3guide-master > practices > 02_Reflow_Text_Vertical」。
5. 將「02_Reflow_Text_Vertical」複製並移動到之前下載好且解壓縮完成的「epubcheck-4.2.6」資料夾底下。
6. 將「02_Reflow_Text_Vertical」改名為你自己能認得的檔案名稱。如這裡的範例為「EPUB_Test」。請注意，這個檔案名稱必須是英文才能符合上架規範。也建議檔名不要使用空格，或使用半型下底線(_)連接，避免在跑terminal的時候造成錯誤。

## 五、用Sublime打開範例檔案
1. 打開之前下載好的Sublime
2. 從上方工具列中選擇「File > Open」
4. 找到剛剛的檔案「EPUB_Test」，在這一層點選「Open」。你可以看到右邊還有一些沒有打開的資料夾，不過沒關係，直接在這一層打開就可以了。

5. 將檔案打開之後你就可以從左側的目錄看到EPUB的原始碼了，接下來我們就是要來把這裡的內容改成自己的內容。

6. 番外篇：安裝Sublime套件讓你編輯更輕鬆！
a) 從Sublime上方工具列點選「Tools -> Command Palette」，輸入「install」，選擇「Install Package Control」。
b)跳出安裝完成的成功畫面之後，再次從上方工具列點選「Tools -> Command Palette」選擇你要安裝的外掛。推薦安裝：
**AutoFileName：**在輸入路徑的時候自動找檔，避免手殘打錯。
**ChineseLocalization：**害怕英文的話可以安裝這個，但本篇將依然使用英文介紹（因為我好懶得再改回來）。

## 六、更改封面

1. 將做好的封面檔案拖進以下資料夾「EPUB_Test -> item -> image」，將其它預設的圖片刪掉。
**注意：封面圖檔需為 .jpg 格式，封面尺寸以讀墨為例是1440x1960(px)**
2. 在Sublime打開「p-cover.xhtml」
3. 將以下黃框處替代為自己的內容（搜尋+置換快捷鍵「option + cmd + F」）
a) 2048改為1960
b) 「羅生門」改為你自己的書名
c) 「cover.jpg」改為剛剛放進資料夾當中的封面檔案名稱，此處範例為「cover_test.jpg」
4. 儲存檔案，完成封面修改。
5. 如需測試可跳至[步驟十一](https://hackmd.io/Z4w1p62sQ8WrgZG8M94aFA?both#%E5%8D%81%E4%B8%80%E3%80%81%E6%9B%B4%E6%94%B9%E5%85%A7%E9%A0%81%E8%B6%85%E9%80%A3%E7%B5%90%E7%9B%AE%E9%8C%84%EF%BC%88p-tocxhtml%EF%BC%89)，更改Manifest清單後打包成EPUB檔，用Calibre打開EPUB檔，測試檔案是否成功被更改。

## 七、更改書名頁
1. 在Sublime打開「p-titlepage.xhtml」
2. 將「羅生門」改為你自己的書名
3. （非必要）我個人喜歡的版面配置是將 `class="hltr"` 改為 `class="vrtl"` 。並將17行完全刪除，改為：
`<p>（輸入你的書名）</p>`。
4. 儲存修改

## 八、更改章節內容

### Part 1：將內文每一行前後加上`<p></p>`標籤
1. 按右上角的加號「+」，打開一個新的untitled文件。

2. 將第一章的內文貼到untitled文件下。本文有沒有空行或文首空兩格都沒有關係。

3. 快捷鍵「option + cmd + F」叫出搜尋置換功能。
a) 如果本文已以全形空兩格段落縮排且每行之間有空行：搜尋`\n\n`取代`</p>\n\n<p>`

b) 如果本文已以全形空兩格段落縮排且每行之間無空行：搜尋`\n`取代`</p>\n\n<p>`

**註：`\n`為換行之語法，`<p>`為標示段落開始之語法，`</p>`為標示段落結束之語法。`<p class="start-2em">`為段落縮排之樣式語法。**

4. 由於這樣的搜尋取代方式無法涵蓋全文第一行及最後一行，如已空兩格，請在第一行前方加上`<p>`標籤。
5. 或是叫ChatGPT做應該也可以

加完標籤的內文會長這樣：

### Part 2：將加好標籤的內文貼到「p-001.xhtml」檔案底下
1. 回到剛才「EPUB_test」更改封面的頁面，打開「p-001.xhtml」。
1. 將以下黃框處替代為自己的內容
a) 「羅生門」改為你自己的書名。
b) 移除<h2後方的「class="gfont p-top-2em"」（該樣式會將章節名稱改為黑體且縮排，可以依據個人喜好決定要不要移除）。
c) 移除第19行到22行從`<blockquote>`到`</p>`。
d) 將剛才在「untitled」文件下加好標籤的文字從19行開始貼起。
1. 儲存檔案，完成內文置換。

替換前的內容

替換後的內容

### Part 3：新增新的一章
每一個「p-00x.xhtml」檔案皆為一章。如需新增章節：
1. 請「cmd+A」、「cmd+C」複製你在「p-001.xhtml」當中完成的內容，完全取代「p-002.xhtml」整頁的內容。
2. 重複Part 1步驟將內文加上`<p>`標籤。
3. 重複Part 2步驟，更改`<h2>`標籤之間的章節名稱，取代19行開始至`</div>`之前的內文。
4. 如超過第三章，請開一個新的untitled文件，將「p-001.xhtml」當中完成的內容，複製貼上，按「cmd+S」儲存。在確認儲存畫面中，確認檔案路徑在xhtml文件夾底下，將檔案名稱命名為「p-004.xhtml」。重複步驟2到4貼上新的內文。如需新增更多章節，請以此類推。
5. 儲存檔案，完成內文置換。
6. 建議先不要一次把所有章節全部做完。完成一章之後先跳至[步驟十一](https://hackmd.io/Z4w1p62sQ8WrgZG8M94aFA?both#%E5%8D%81%E4%B8%80%E3%80%81%E6%9B%B4%E6%94%B9%E5%85%A7%E9%A0%81%E8%B6%85%E9%80%A3%E7%B5%90%E7%9B%AE%E9%8C%84%EF%BC%88p-tocxhtml%EF%BC%89)，更改Manifest清單後打包成EPUB檔，用Calibre打開EPUB檔，測試檔案是否成功被更改。文末有常見的debug教學。

## 九、更改版權頁（p-colophon.xhtml）
相信到了這個步驟，大家應該對xhtml格式有點感覺了。只剩下一點點了！加油！
1. 打開「p-titlepage.xhtml」
3. 將`<title>`之間的「羅生門」改為自己的書名
4. 移除17行到43行之間的內容
5. 在第17行加入以下內容

<h2 class="font-140per align-center gfont ">（你的書名）</h2>

<hr/>

<p class="align-center m-top-1em50">作者：<br /></p>

<p><br /></p>

<p class="align-center">出版單位</p>

<p class="align-center">（你的出版單位）</p>

<p class="align-center">202x年x月初版</p>

<hr />

6. 儲存檔案，完成內文置換。

## 十、移除封面頁到書名頁之間的頁面（扉頁）內文（p-fmatter-001.xhtml）
如果沒有使用到扉頁，可以直接將本頁`<p>`標籤的內容淨空即可。

## 十一、更改內頁超連結目錄（p-toc.xhtml）
1. 打開「p-toc.xhtml檔案」
1. 將「巴黎茶花女遺事」改為你自己的書名
1. 刪除第22行「製作緣起」
1. 將「內文」改為第一章的章節名稱
1. 將「製作解說」改為第二章的章節名稱
3. 如果有更多章節，複製以下code貼上在新的一行。
`<p class="m-top-2em"><a href="p-001.xhtml">內文</a></p>`
1. 將「p-001.xhtml」改為相對應的章節檔案，將「內文」改為相對應的章節名稱。例如：
`<p class="m-top-2em"><a href="p-003.xhtml">第三章</a></p>`
1. 儲存檔案，完成內文置換。

## 十二、更改EPUB檔案中的目錄（navigation-documents.xhtml）

1. 打開「navigation-documents.xhtml」
1. 移除第18行「製作緣起」
1. 將「內文」改為第一章的章節名稱
1. 將「製作解說」改為第二章的章節名稱
1. 如果有更多章節，複製以下code貼上在新的一行。
`<li><a href="xhtml/p-001.xhtml">內文</a></li>`
2. 將「p-001.xhtml」改為相對應的章節檔案，將「內文」改為相對應的章節名稱。例如：
`<li><a href="xhtml/p-003.xhtml">第三章</a></li>`
1. 儲存檔案，完成內文置換。

## 十三、更改Manifest清單（standard.opf）

好的，恭喜你已經完成了所有最花時間的步驟了。接下來這個步驟，是為了讓系統可以讀出關於書籍的基本內容，顯示在閱讀器的格式上。並且知道你所有的檔案路徑，這樣它才知道怎麼把在這個步驟之前做好的檔案連在一起。這個步驟最容易噴bug了，不過沒問題！你已經克服前面最麻煩的步驟了！
### Part 1：更改`<metadata>`內容
1. 將「羅生門」改為你自己的書名。
1. 將「芥川龍之介」改為你自己的作者名稱。
1. 移除20行至22行的譯者資訊
1. 將「台灣數位出版聯盟」改為你自己的出版社名稱。如為獨立出版，可以寫自己的名字。
1. Unique Identifier是僅屬於這本EPUB的ID。可以從[UUID Generator](https://www.uuidgenerator.net/)產生一串代號，複製貼上取代「uuid:」後的一串英數交雜碼。申請ISBN之後，可以將這一串代碼改為`<dc:identifier id="isbn">urn:isbn:（你的ISBN）</dc:identifier>`。並且將第6行的unique-identifier改為`unique-identifier="isbn"`
3. 將「2019–11–01」改為今天的日期，例如「2022–12–10」


### Part 2：更改`<manifest>`內容
1. 移除以下3行，這些是我們沒有用到的檔案。
1. 將「cover.jpg」改為你的封面檔案名稱。

1. 如果有更多章節，複製以下code貼上在新的一行。
`<item media-type="application/xhtml+xml" id="p-001" href="xhtml/p-002.xhtml"/>`
1. 將「p-001.xhtml」改為相對應的章節檔案。例如：
`<item media-type="application/xhtml+xml" id="p-004" href="xhtml/p-004.xhtml"/>`

### Part 3：更改`<spine>`內容
1. 移除以下code，因為我們沒有用到這個插圖檔案
`<itemref linear="yes" idref="p-fmatter-001" properties="page-spread-left"/>`
1. 如果有更多章節，複製以下code貼上在新的一行。
`<itemref linear="yes" idref="p-001" properties="page-spread-left"/>`
1. 將「p-001.xhtml」改為相對應的章節檔案。例如：
`<itemref linear="yes" idref="p-004" properties="page-spread-left"/>`
1. 儲存檔案完成變更。

### 十四、使用epubchecker製作epub封包
1. 打開terminal
1. 輸入epubchecker路徑，例如：
`cd Downloads/epubcheck-4.2.6`
1. 輸入指令
`java -jar [指向epubcheck.jar路徑] [EPUB內容路徑] -mode exp -save`
指令範例
`java -jar epubcheck.jar EPUB_Test -mode exp -save`
2. 準備收到一大堆的error。可是不怕！
3. 常見錯誤：
a) `ERROR(RSC-001): ./EPUB_Test.epub(-1,-1): File "item/image/cover.jpg" could not be found.`這表示在文件中我們定義了「cover.jpg」，但是因為這個檔案已經被刪掉了，所以我們要找出在哪裡定義了「cover.jpg」，並且把那行code刪掉。我最土砲的做法就是在有可能出現這個檔案的地方搜尋，以這次為例，我是在「standard.opf」找到沒有刪乾淨的code。

b) `ERROR(RSC-007): ./EPUB_Test.epub/item/xhtml/p-cover.xhtml(21,89): Referenced resource "item/image/cover_test.jpg.jpg" could not be found in the EPUB.`
檔案名稱錯誤，重複了兩次「.jpg」。這行有說錯誤是出現在「p-cover.xhtml」的第21行。找到錯誤，修正它。

c) `WARNING(OPF-003): ./EPUB_Test.epub(-1,-1): Item "item/image/cover_test.jpg" exists in the EPUB, but is not declared in the OPF manifest.`
這個簡單。這表示我們在檔案中放了「cover_test.jpg」的檔案，但卻沒有在「standard.opf」當中宣告。這和(1)重複，把原本的檔案路徑改成「cover_test.jpg」就可以了。

1. 修正錯誤、儲存檔案之後回到terminal，按鍵盤上網上的箭頭就能重複上一次輸入的內容，再重新跑一次相同的指令。重複上一步驟debug。最常見的錯誤就是該宣告的檔案沒有宣告，或是宣告了不存在的檔案，或是修改了之後忘記按儲存。找出來修正就可以了。
2. 最後看到這個畫面表示你de完了所有bug，已成功打包成epub檔案。

1. 到epubcheck的檔案路徑底下找到已經生成的檔案。
**注意：如果修改之後想要再跑一次epubcheck，需刪除這個檔案。否則新生成的檔案將不會自動覆蓋原本的檔案。**

## 十五、用Calibre打開epub確認內容無誤
1. 打開Calibre
1. 將epub檔案拖曳進畫面，就會看到自己製作的檔案出現在上面了！
1. 快速點擊兩下檔名可以打開檔案，確認顯示方式是否如自己所想。如需修改則重複之前的步驟重新生成檔案。
**注意：如果修改之後想要再跑一次epubcheck，需刪除這個檔案。否則新生成的檔案將不會自動覆蓋原本的檔案。**
4. 恭喜你完成了第一本自己的電子書！

## 十六、參考資料
1. DARK櫻薰（餅神萬事屋），《電子書製作免費資源整理與軟體安裝教學》，https://cxc.today/zh/store/wingdarks/work/7104/reader/33337

2. 《台灣 EPUB 3 製作指引》，https://github.com/dpublishing/epub3guide

## 十七、附註
讀墨上架直排內文，請於style-standard.css檔案，刪除原本第71行：

.vrtl {
  -webkit-writing-mode: vertical-rl;
}

改為：

.vrtl {
  writing-mode: vertical-rl;
  -epub-writing-mode: vertical-rl;
  -epub-hyphens: auto;
  -webkit-hyphens: auto;
  -webkit-writing-mode: vertical-rl;
}

這樣才能在網頁版的閱讀器上正確顯示直排。

---
有什麼不清楚的地方歡迎留言在下方，或是有錯誤的地方也請指正。如果你順利地靠著這篇文章做出電子書，也請跟我說！我會很高興的！

——曠生雨，12/10/2022