Try   HackMD

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

一、為什麼你該自己製作epub？

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

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

二、事前環境設置

  1. 心理建設：看到error和code也不要怕！仔細看，你看得懂！

  2. 下載Sublime：編輯EPUB檔案原始碼

  3. 安裝sublime外掛（非必要）

  4. 下載epub-check：測試原始碼是否有bug，將原始碼封包變成EPUB

  5. 找到你的terminal (Mac) ：用來跑epub-check

  6. 點選畫面右上角的搜尋放大鏡，開啟Spotlight搜尋。

    Image Not Showing Possible Reasons
    • The image file may be corrupted
    • The server hosting the image is unavailable
    • The image path is incorrect
    • The image format is not supported
    Learn More →
    Image Not Showing Possible Reasons
    • The image file may be corrupted
    • The server hosting the image is unavailable
    • The image path is incorrect
    • The image format is not supported
    Learn More →

  7. 輸入「terminal」，打開它。

    Image Not Showing Possible Reasons
    • The image file may be corrupted
    • The server hosting the image is unavailable
    • The image path is incorrect
    • The image format is not supported
    Learn More →

  8. 下載並安裝calibre：預覽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 製作指引》是TDPF 台灣數位出版聯盟製作的繁體中文EPUB製作範例，適用於大多數的上架平台。裡面的說明寫得很清楚，基本上我們可以直接基於他們的範例，把內容置換成自己的就可以了。

  1. 首先打開這個連結（https://github.com/dpublishing/epub3guide）

  2. 點選畫面中的綠色按鈕「Code」，從下拉式選單當中選擇「Download ZIP」將檔案下載下來。

    Image Not Showing Possible Reasons
    • The image file may be corrupted
    • The server hosting the image is unavailable
    • The image path is incorrect
    • The image format is not supported
    Learn More →

  3. 下載之後解壓縮，打開檔案，依照以下路徑找 到我們要的檔案：「epub3guide-master > practices > 02_Reflow_Text_Vertical」。

  4. 將「02_Reflow_Text_Vertical」複製並移動到之前下載好且解壓縮完成的「epubcheck-4.2.6」資料夾底下。

  5. 將「02_Reflow_Text_Vertical」改名為你自己能認得的檔案名稱。如這裡的範例為「EPUB_Test」。請注意，這個檔案名稱必須是英文才能符合上架規範。也建議檔名不要使用空格，或使用半型下底線(_)連接，避免在跑terminal的時候造成錯誤。

    Image Not Showing Possible Reasons
    • The image file may be corrupted
    • The server hosting the image is unavailable
    • The image path is incorrect
    • The image format is not supported
    Learn More →

五、用Sublime打開範例檔案

  1. 打開之前下載好的Sublime

  2. 從上方工具列中選擇「File > Open」

  3. 找到剛剛的檔案「EPUB_Test」，在這一層點選「Open」。你可以看到右邊還有一些沒有打開的資料夾，不過沒關係，直接在這一層打開就可以了。

    Image Not Showing Possible Reasons
    • The image file may be corrupted
    • The server hosting the image is unavailable
    • The image path is incorrect
    • The image format is not supported
    Learn More →

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

    Image Not Showing Possible Reasons
    • The image file may be corrupted
    • The server hosting the image is unavailable
    • The image path is incorrect
    • The image format is not supported
    Learn More →

  5. 番外篇：安裝Sublime套件讓你編輯更輕鬆！
    a) 從Sublime上方工具列點選「Tools -> Command Palette」，輸入「install」，選擇「Install Package Control」。
    b)跳出安裝完成的成功畫面之後，再次從上方工具列點選「Tools -> Command Palette」選擇你要安裝的外掛。推薦安裝：
    **AutoFileName：**在輸入路徑的時候自動找檔，避免手殘打錯。

    Image Not Showing Possible Reasons
    • The image file may be corrupted
    • The server hosting the image is unavailable
    • The image path is incorrect
    • The image format is not supported
    Learn More →

    **ChineseLocalization：**害怕英文的話可以安裝這個，但本篇將依然使用英文介紹（因為我好懶得再改回來）。

六、更改封面

  1. 將做好的封面檔案拖進以下資料夾「EPUB_Test -> item -> image」，將其它預設的圖片刪掉。
    注意：封面圖檔需為 .jpg 格式，封面尺寸以讀墨為例是1440x1960(px)
    Image Not Showing Possible Reasons
    • The image file may be corrupted
    • The server hosting the image is unavailable
    • The image path is incorrect
    • The image format is not supported
    Learn More →
  2. 在Sublime打開「p-cover.xhtml」
  3. 將以下黃框處替代為自己的內容（搜尋+置換快捷鍵「option + cmd + F」）
    a) 2048改為1960
    b) 「羅生門」改為你自己的書名
    c) 「cover.jpg」改為剛剛放進資料夾當中的封面檔案名稱，此處範例為「cover_test.jpg」
    Image Not Showing Possible Reasons
    • The image file may be corrupted
    • The server hosting the image is unavailable
    • The image path is incorrect
    • The image format is not supported
    Learn More →
  4. 儲存檔案，完成封面修改。
  5. 如需測試可跳至步驟十一，更改Manifest清單後打包成EPUB檔，用Calibre打開EPUB檔，測試檔案是否成功被更改。

七、更改書名頁

  1. 在Sublime打開「p-titlepage.xhtml」
  2. 將「羅生門」改為你自己的書名
  3. （非必要）我個人喜歡的版面配置是將 class="hltr" 改為 class="vrtl" 。並將17行完全刪除，改為：
    <p>（輸入你的書名）</p>。
  4. 儲存修改
    Image Not Showing Possible Reasons
    • The image file may be corrupted
    • The server hosting the image is unavailable
    • The image path is incorrect
    • The image format is not supported
    Learn More →

八、更改章節內容

Part 1：將內文每一行前後加上<p></p>標籤

  1. 按右上角的加號「+」，打開一個新的untitled文件。

    Image Not Showing Possible Reasons
    • The image file may be corrupted
    • The server hosting the image is unavailable
    • The image path is incorrect
    • The image format is not supported
    Learn More →

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

    Image Not Showing Possible Reasons
    • The image file may be corrupted
    • The server hosting the image is unavailable
    • The image path is incorrect
    • The image format is not supported
    Learn More →

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

    Image Not Showing Possible Reasons
    • The image file may be corrupted
    • The server hosting the image is unavailable
    • The image path is incorrect
    • The image format is not supported
    Learn More →

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

    Image Not Showing Possible Reasons
    • The image file may be corrupted
    • The server hosting the image is unavailable
    • The image path is incorrect
    • The image format is not supported
    Learn More →

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

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

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

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

Part 2：將加好標籤的內文貼到「p-001.xhtml」檔案底下

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

替換前的內容

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

替換後的內容

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. 建議先不要一次把所有章節全部做完。完成一章之後先跳至步驟十一，更改Manifest清單後打包成EPUB檔，用Calibre打開EPUB檔，測試檔案是否成功被更改。文末有常見的debug教學。

九、更改版權頁（p-colophon.xhtml）

相信到了這個步驟，大家應該對xhtml格式有點感覺了。只剩下一點點了！加油！

  1. 打開「p-titlepage.xhtml」
  2. 將<title>之間的「羅生門」改為自己的書名
  3. 移除17行到43行之間的內容
  4. 在第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 />
  1. 儲存檔案，完成內文置換。

十、移除封面頁到書名頁之間的頁面（扉頁）內文（p-fmatter-001.xhtml）

如果沒有使用到扉頁，可以直接將本頁<p>標籤的內容淨空即可。

十一、更改內頁超連結目錄（p-toc.xhtml）

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

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

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

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

好的，恭喜你已經完成了所有最花時間的步驟了。接下來這個步驟，是為了讓系統可以讀出關於書籍的基本內容，顯示在閱讀器的格式上。並且知道你所有的檔案路徑，這樣它才知道怎麼把在這個步驟之前做好的檔案連在一起。這個步驟最容易噴bug了，不過沒問題！你已經克服前面最麻煩的步驟了！

Part 1：更改<metadata>內容

  1. 將「羅生門」改為你自己的書名。
  2. 將「芥川龍之介」改為你自己的作者名稱。
  3. 移除20行至22行的譯者資訊
  4. 將「台灣數位出版聯盟」改為你自己的出版社名稱。如為獨立出版，可以寫自己的名字。
  5. Unique Identifier是僅屬於這本EPUB的ID。可以從UUID Generator產生一串代號，複製貼上取代「uuid:」後的一串英數交雜碼。申請ISBN之後，可以將這一串代碼改為<dc:identifier id="isbn">urn:isbn:（你的ISBN）</dc:identifier>。並且將第6行的unique-identifier改為unique-identifier="isbn"
  6. 將「2019–11–01」改為今天的日期，例如「2022–12–10」

Part 2：更改<manifest>內容

  1. 移除以下3行，這些是我們沒有用到的檔案。

  2. 將「cover.jpg」改為你的封面檔案名稱。

  3. 如果有更多章節，複製以下code貼上在新的一行。
    <item media-type="application/xhtml+xml" id="p-001" href="xhtml/p-002.xhtml"/>

  4. 將「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"/>
  2. 如果有更多章節，複製以下code貼上在新的一行。
    <itemref linear="yes" idref="p-001" properties="page-spread-left"/>
  3. 將「p-001.xhtml」改為相對應的章節檔案。例如：
    <itemref linear="yes" idref="p-004" properties="page-spread-left"/>
  4. 儲存檔案完成變更。

十四、使用epubchecker製作epub封包

  1. 打開terminal

  2. 輸入epubchecker路徑，例如：
    cd Downloads/epubcheck-4.2.6

  3. 輸入指令
    java -jar [指向epubcheck.jar路徑] [EPUB內容路徑] -mode exp -save
    指令範例
    java -jar epubcheck.jar EPUB_Test -mode exp -save

  4. 準備收到一大堆的error。可是不怕！

  5. 常見錯誤：
    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」就可以了。

  6. 修正錯誤、儲存檔案之後回到terminal，按鍵盤上網上的箭頭就能重複上一次輸入的內容，再重新跑一次相同的指令。重複上一步驟debug。最常見的錯誤就是該宣告的檔案沒有宣告，或是宣告了不存在的檔案，或是修改了之後忘記按儲存。找出來修正就可以了。

  7. 最後看到這個畫面表示你de完了所有bug，已成功打包成epub檔案。

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

十五、用Calibre打開epub確認內容無誤

  1. 打開Calibre
  2. 將epub檔案拖曳進畫面，就會看到自己製作的檔案出現在上面了！
  3. 快速點擊兩下檔名可以打開檔案，確認顯示方式是否如自己所想。如需修改則重複之前的步驟重新生成檔案。
    注意：如果修改之後想要再跑一次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

Last changed by 
Guest
0
856
Published on HackMD