dpublishing / epub3guide Goto Github PK

View Code? Open in Web Editor NEW

133.0 12.0 17.0 73.15 MB

台灣 EPUB3 制作指引

Shell 0.03% HTML 24.17% CSS 75.80%

epub3 digital-publishing epub eprdctn

epub3guide's Introduction

台灣 EPUB 3 製作指引

關於本指引

目的

本製作指引（以下稱本指引）主要提供給出版社在製作一般EPUB格式電子書時作為參考使用。

由於EPUB 3格式有著相當多元的製作方式與表現手法。結果在製作時難以決定該使用何種方法，也不容易掌握其表現程度。以此，本指引作為一份中介規格書，提供出版社製作時參考使用，以解決這些問題。

同時，本指引不僅用於EPUB 3格式電子書製作使用，也提供電子書平台業者於製作EPUB 3閱讀程式時，作為一個須支援的技術規格說明，以求出版社所製作出的電子書得以在不同閱讀程式上有近乎一致的表現，達到一源多用的目的。

概要

本指引適用的書籍種類為：小說等文字書（Reflowable），以及漫畫、雜誌等圖文書（Fixed-Layout）。

文字書僅提供簡單體裁，不包含如文字方向混合（直排與橫排混合）以及多欄排版、文繞圖等具有特殊設計表現。部分進階的表現會在本指引中標註為「選擇性」，閱讀程式開發商可嘗試實作，出版社使用這些表現時需注意可能無法正常顯示。

圖文書僅限於漫畫，或者難以重製的雜誌，使用一頁一圖包裝成EPUB 3固定版面格式（簡易型Fixed-Layout）。使用HTML排版，或者加入MediaOverlay語音朗讀功能的複雜固定版面不是本指引的對象。

EPUB 3內使用HTML5與CSS3等網頁技術，各作業系統與瀏覽器組版引擎對於基本元素的解釋有相當的差異，這是發生在網頁上的既有現象，且電子書閱讀程式多半不會提供規格說明；也不一定提出測試方法讓出版社得以確認表現。為求單一檔案在不同閱讀器上能夠顯示一致，也是本指引的目的。

本指引以日本電子書出版社協會（電書協）公佈之EPUB 3 File Creation Guide為底本進行擴展，加入台灣數位出版產業之需求與特性。該範本在日本已經成為出版社與販售平台溝通的良好範例，並且具備文字直排等細節，且基於IDPF下Readium Foundation所公布的Readium程式作為基礎，提供範本與樣式表，為電子書表現的最大公約數。足以供中文電子書所使用。

我們也希望本指引提供的範本能夠適用至各種電子書製作軟體，令產製出的EPUB 3文件能夠具備通用性。令電子書的生產到販賣過程能夠更加順暢。

最終希望海內外各販售平台在提供閱讀程式時，能夠滿足本指引中的各項需求，以能夠完整呈現出版社所製作出的EPUB 3電子書，減少針對不同平台修改、調整的麻煩，降低書檔流通的障礙，讓電子書流通更為穩定確實。

本指引依照IDPF所公布的EPUB 3.01規範為基礎，並且EPUB 3.1規範。規範中未普遍實作，但為出版社重要需求的部分以附件提出，希望能取得海內外閱讀程式開發商的共識，作為添補修正。

檔案說明

此儲存庫中存放包含「台灣 EPUB 3 製作指引」之本文內容（Markdown 與 EPUB 格式），並針對文中所提及之設計規範與建議，提供 CSS 設計樣版以利電子書製作與閱讀器實作者參考。

範本全文

參考範例

CSS 樣版
樣式參考範本

EPUB 3 實作案例參考

除了本指引所提供之上述參考範例外，另外也針對出版者常見的製作情境與需求，台灣數位出版聯盟亦使用公共版權與開放授權內容，提供以下貼近實際出版需求的實作案例。實作案例除使用本指引之參考 CSS 樣版外，也包含部分超出指引範圍但具實用性的效果應用展示。針對超出指引範圍之內容，出版者需自行測試不同平台、閱讀器之呈現相容性。

橫排文字書：巴黎茶花女遺事採民國初年林紓、王壽昌所翻譯之小仲馬作品《茶花女》，封面為穆夏所繪製的畫作。內容為橫排的文字書，主要說明了標題與段落語法，對齊方式、字體指定、強調與連結、行距與間距等基本排版元素。
直排文字書：羅生門採民國初年魯迅所翻譯之芥川龍之介作品《羅生門》，封面為以 CC BY-SA 2.0 授權的攝影作品。內容為直排的文字書，主要說明了指定直排的方式，指定語言的方式，標點符號的使用方式以及直排特有縱中橫排、轉向的作法，也補充了行頭凸排與段落縮排與提排的指定方式。
文字書嵌入字體：航海家金唱片採美國太空總署置放到航海者一號太空船內金屬唱片中的各國問候語句，封面為公共領域的照片。內容為使用嵌入字體排列的中文注音符號、台語注音符號與泰文，主要說明如何標注注音符號，並且套用嵌入字體、調整排版達到最適宜的顯示效果。以及如何取得開放授權的字體嵌入 EPUB 中使用，以避免發生缺字的狀況。
文字書註解與圖表：全球報業營運趨勢與產業現況採開放授權書籍《新聞業的危機與重建》第一章，取得作者戴伊筠同意授權使用，封面為公共領域的照片。內容為論文，有大量圖表，故本書使用了 EPUB 中的圖片一覽與表格一覽目錄。同時也說明表格與圖片的呈現與對齊方式，以及連結、註釋結構與樣式的調整。
文字書圖文混排：阿麗思漫遊奇境記採民國初年趙元任所翻譯之路易斯卡洛爾作品《Alice in wonderland》，封面為採 CC0 授權的插畫作品，內頁插畫為公共領域作品。內容為圖文混排，用以說明如何指定圖片尺寸與限制最大尺寸，並且配合實驗性的文繞圖排版。以及如何使用對齊、圖片邊界與框線來修飾。
固定版型圖文書：清明上河圖採故宮開放資料之清院本清明上河圖。內容為基本的固定版型圖文書，可供製作漫畫、雜誌與排版複雜的圖書參考。
重排式文字書與固定版型圖文書混排：詩經採《詩經》國風・周南兩則，配合國家圖書館所藏善本《詩經圖譜慧解》第二冊之版畫。內容為重排式文字與固定版型整頁圖片內容混合排列。用以說明如何在文字書中插入整頁圖片，或連續整頁圖片，例如書中連續照片、漫畫與跨頁圖片等。
圖文影音書：仲夏夜之夢簡介採維基百科上對莎士比亞戲劇「仲夏夜之夢」的簡介，並且加上開放授權與公共領域的影片與聲音檔。內容使用了固定版面HTML排版，可供製作多媒體圖文書時參考使用。
圖文朗讀書：水調歌頭採蘇軾水調歌頭，錄音檔為開放授權使用之音檔，封面為故宮開放資料。內容使用了EPUB 3 Media Overlay朗讀功能，可供繪本等製作時參考使用。Media Overlay雖為EPUB 3的標準功能，但並非所有閱讀程式都支援。
實驗性 RWD 設計：貧賤夫妻採鍾理和作品《貧賤夫妻》，封面為行政院客家委員會開放授權的美濃老照片。內容使用了幾項實驗性功能，一是軟換頁功能，二是 RWD 響應式設計，讓書的排版可以按照螢幕尺寸大小進行調整。但不見得能夠應用在所有電子書閱讀程式上。

產生 EPUB 封裝檔

為利於內容編修與版本管控，所有 EPUB 內容均以未封裝原始檔之方式存放。可使用 EPUBCheck 指令將本儲存庫中提供之 EPUB 原始內容產生為封裝後的 EPUB 檔案。關於更多 EPUBCheck 資訊可參考 EPUBChecker 官網。

下載 EPUBCheck，並安裝 Java 相依元件。下載網址： https://github.com/w3c/epubcheck/releases
執行 EPUBCheck，指定 EPUB 原始檔路徑進行內容檢查與封裝。以下指令以 EPUBCheck 4.2.2 為例，請自行更換範例中 epubcheck.jar 路徑。
- 指令格式
```
java -jar [指向epubcheck.jar路徑] [EPUB內容路徑] -mode exp -save
```
- 指令範例
```
java -jar /epubcheck-4.2.2/epubcheck.jar ./practices/01_Reflow_Text_Horizontal -mode exp -save
```
如需一次產生本指引所有範本與案例之 EPUB 檔案，可參考 pack-all.sh 之 shellscript 指令碼自行修改。

epub3guide's People

Contributors

Stargazers

Watchers

Forkers

ccyanni alrin0000 bobbytung citypig jamessa janegogotdi classicality mountainchan terrychen0331 bonniej larachung joeykkk coolleng2525 mingster kkpan11 linyuyu mgrn

epub3guide's Issues

將 /samples/台灣EPUB 3製作指引.epub 改放在 / 底下

目前放在 /samples/ 底下相對沒有那麼明顯，且以此檔案的內容屬性來說應該是與 tdpf-epub3guide.md 在同個層級，或許可以考慮改位置

範本疑問

《台灣EPUB 3製作指引流式版面範本》內容的「文字黃色」，卻套用 class="color-cyan"
《台灣EPUB 3製作指引固定版面範本》內容為橫排文字，不適合指定成右翻 (rtl)

中文標點符號差異

關於標點符號使用的 unicode 字符，
readmoo.com 當初參考的是教育部重訂標點符號手冊
以下列出兩者間差異：

破折號：

破折號由兩個EM DASH（U+2014）構成，RS使用字體需要使用字體功能使其連結。若出版社希望在任何狀況下都讓破折號連結時，可以使用─ U+2500 BOX DRAWINGS LIGHT HORIZONTAL代替，RS也必需讓此符號於直排時向右轉90度。

教育部版用後者 U+2500

間隔號：

間隔號U+00B7並非所有的字體都為全形符號，RS採用字體需要將其造為全形。間隔號也可使用・ U+30FB KATAKANA MIDDLE DOT，RS採用字體必需包含此字元。

教育部版用不同於所提的兩建議，而是使用 U+FF0E FULLWIDTH FULL STOP

條漫的呈現方式

APL 對於條漫有做出 sample
但使用了 Chrome 目前尚未支援的 CSS Scroll Snap Points
這要推行就還有段距離。
以下提出兩個方案供大家討論：

以 APL 方式來做，EPUB3 書檔為版式，搭配 CSS Scroll Snap Points
EPUB3 書檔為流式，
HTML 的 <head> 帶：

<meta property=“rendition:flow”>scrolled-continuous</meta>

HTML 的 <body> 內嵌一或數個 <svg> 帶 viewBox 包 <image>：

<svg viewBox=“0 0 690 1380" preserveAspectRatio=“xMinYMin slice”>
       <image width=“690” height=“1380" xlink:href=“images/img.jpeg”></image>
</svg>

透明背景 png 用於缺字、表格、公式的考量

最近與公司內部編輯團隊溝通此份文件，
對於透明背景 png 提出意見與各先進討論：

由於各家閱讀程式因應讀者需求，多半提供接近夜間模式（黑底白字）的閱讀模式，這時若 png 圖檔是黑色內容、透明背景，則會難以閱讀，敝公司是會刻意避開透明背景 PNG 圖（直接白底黑字 JPEG）。

中文與其他語言缺字的處理建議

草稿內對於缺字的處理如下：

缺字圖片

備註：

Unicode Ext-B之後不在HKSCS內的漢字，一律以圖片顯示

要以哪款字型製作圖片，依照出版社指示

背景為透明，請以8bit PNG格式保存

日本電子書RS多半會搭配明體與黑體兩套字體，而字體會包含JIS 4161-1993所含字符。

繁體中文目前沒有像JIS 4161-1993那樣的字碼標準，若使用BIG 5碼標準則會有多種缺字狀況發生（如王建「煊」、游錫「堃」）。一般印刷用內文字體則是通常包含Unicode 3.0中的中日韓統一表意文字20,902字，以及HKSCS香港增補字符集5,033字。

Ext-B後的生罕用字雖然有部分會回退（Fallback）到系統字體，但系統字體不一定包含所有文字，所以建議比照日文處理JIS 4161-1993外字符（外字處理），製作成圖片插入內文，加上CSS來顯示。

但以上處理僅限於處理漢字缺字，當遇到泰文、越南文等文字時，需要討論該如何處理，

一般來說在macOS與iOS上會回退到其他語文的系統字體，但在Windows及Android上則常顯示為缺字。

推薦方式有二：

一、同樣將文字處理成圖片插入內文

這種處理方式遇到較長的單詞或語句時會造成斷行問題。

二、以文字插入，加上lang標籤，再嵌入該語種的開放字體來處理。

日本電書協指南中不建議嵌入字體，但目前各瀏覽器與RS對於嵌入字體的支援相對完善。加上Google提供開放授權各語種的Noto字體可以使用，各語種字體的檔案尺寸也相對中文要小，大約數百KB到數MB而已。

若使用這種處理方式，需要各位測試自己RS的支援狀況。

兩個以上OPF的敘述

根據Rakuten Kobo Jeff Xu提供的意見：

META-INF中的container.xml

本文件不提供具有兩個以上OPF檔案的範例，若有兩個以上OPF檔案時，請依照EPUB 3規範適當處理。

這一段來自日本電書協的描述過舊，實際上目前RS幾乎沒有做多重OPF檔案的支援，而一般流通的EPUB 3檔案也不會加入二個以上的OPF檔案。也就是說：EPUB 3規範有，但實際不通用。

建議隨著現狀刪除這一段落，各位意見如何？

英文 's 的注意事項

關於 's 在英文中用於所有格或縮寫時，
有時後會看到使用 "`s" 而非 "'s"。
這樣的內容在顯示時會讓名詞與所有格間有巨大的空白，
如：John’ s
建議 ’ s 應該避免使用，
而應該採用 's。

閱讀程式需支援與內容不得使用的HTML元素與CSS屬性

在草稿中有兩段落：

RS需支援的HTML元素以及CSS屬性
RS不需支援的HTML元素與CSS屬性

請各位檢視，並且判斷是否需要增減，如：

不需支援但廣泛應用在既有電子書的元素與屬性
少用、且與自己RS相容性有關希望不支援的元素與屬性。

文字直排與翻頁方向的判斷依據

包裝文件（Package Document/OPF檔案）

遵守翻頁方向

書的翻頁方向必需依從包裝文件中Spine元素的page-progresson-direction屬性，不管內容文件或者樣式表中使用哪一種writing-mode。

而XHTML內容文件中的文字排列方向，則依照各XHTML中Body元素所指定的writing-mode屬性。當writing-mode指定於html元素時，必需繼承於body元素。

例如page-progression-direction指定為rtl（由右向左）時，而xhtml的writing-mode指定為horizontal-tb（橫排）時，期待文字於螢幕內「由左向右」顯示，而新的頁面則是「由右向左」增加。

這是文件中對於翻頁方向的規範，
我們團隊剛巧討論翻頁方向與文字走向的判斷依據，
翻到 Readium 對於這問題較完善的討論：Readium-CSS
Readium 的判斷依據：

先判斷 OPF/metadata/dc:language 的值（包含第一與第二語言）
然後是看 OPF/spine/@page-progression-direction 的值
其他判斷依據還有 HTML 的 xml:lang 宣告
最終文字走向仍得依據 CSS 的 dir 與 writing-mode 的值

由於不是所有 EPUB 都會正確地設定 OPF/spine/@page-progression-direction，
因此 RS 的判斷流程還請多加注意。

`台灣EPUB 3製作指引.epub`無法使用kindlegen產生mobi

*************************************************************
 Amazon kindlegen(MAC OSX) V2.9 build 1028-0897292 
 A command line e-book compiler 
 Copyright Amazon.com and its Affiliates 2014 
*************************************************************

Info(prcgen):I1047: Added metadata dc:Title        "台灣EPUB 3製作指引"
Info(prcgen):I1047: Added metadata dc:Creator      "台灣數位出版聯盟"
Info(prcgen):I1047: Added metadata dc:Creator      "作者名２"
Info(prcgen):I1047: Added metadata dc:Publisher    "台灣數位出版聯盟"
Info(prcgen):I1052: Kindle support cover images but does not support cover HTML. Hence using the cover image specified and suppressing cover HTML in content.     URL: /var/folders/8g/6fpvydb138qbrsbdn1z6c4mr0000gn/T/mobi-01idc2/item/xhtml/p-cover.xhtml
Info(prcgen):I1002: Parsing files  0000042
Warning(htmlprocessor):W28001: CSS style specified in content is not supported by Kindle readers. Removing the CSS property: 'max-height' in file: /var/folders/8g/6fpvydb138qbrsbdn1z6c4mr0000gn/T/mobi-01idc2/item/style/style-standard.css
Warning(htmlprocessor):W28001: CSS style specified in content is not supported by Kindle readers. Removing the CSS property: 'max-width' in file: /var/folders/8g/6fpvydb138qbrsbdn1z6c4mr0000gn/T/mobi-01idc2/item/style/style-standard.css
Warning(htmlprocessor):W28001: CSS style specified in content is not supported by Kindle readers. Removing the CSS property: 'max-height' in file: /var/folders/8g/6fpvydb138qbrsbdn1z6c4mr0000gn/T/mobi-01idc2/item/style/style-advance.css
Warning(htmlprocessor):W28001: CSS style specified in content is not supported by Kindle readers. Removing the CSS property: 'max-width' in file: /var/folders/8g/6fpvydb138qbrsbdn1z6c4mr0000gn/T/mobi-01idc2/item/style/style-advance.css
Info(prcgen):I1015: Building PRC file
Info(prcgen):I1006: Resolving hyperlinks
Warning(prcgen):W14001: Hyperlink not resolved:  /var/folders/8g/6fpvydb138qbrsbdn1z6c4mr0000gn/T/mobi-01idc2/item/xhtml/p-038.xhtml#toc_index_1
Warning(prcgen):W14002: Some hyperlinks could not be resolved.
Error(prcgen):E24010: Hyperlink not resolved in toc (One possible reason can be that the link points to a tag with style display:none):/var/folders/8g/6fpvydb138qbrsbdn1z6c4mr0000gn/T/mobi-01idc2/item/xhtml/p-038.xhtml#toc_index_1
Error(prcgen):E24001: The table of content could not be built.
Info(prcgen):I1016: Building enhanced PRC file
Warning(prcgen):W14001: Hyperlink not resolved:  /var/folders/8g/6fpvydb138qbrsbdn1z6c4mr0000gn/T/mobi-01idc2/item/navigation-documents.xhtml
Info(prcgen):I1007: Resolving mediaidlinks
Info(prcgen):I1011: Writing mediaidlinks
Info(prcgen):I1009: Resolving guide items
Info(prcgen):I1038: MOBI file could not be generated because of errors!

「EPUB reflow sample」BW閱讀器測試記錄

◎區塊元素-指定高度、寬度、內邊界
當最後一行空間不足時
1.BW：區塊會斷開分別顯示在上、下兩頁
2.ibooks：區塊會斷開分別顯示在上、下兩頁
3.google play：會自動換頁，區塊可完整的顯示在下一頁，不會斷開

◎換頁

class="pagebreak"

BW：Android 支援，iOS 不支援
ibooks：支援
google play：不支援

class="pagebreak-before"

BW：Android 支援，iOS 不支援
ibooks：支援
google play：不支援

class="pagebreak-both"

BW：Android 支援，iOS 不支援
ibooks：支援
3.google play：字級100%以下(含100%)不支援，橫式閱讀時可支援。字級100%以上直式、橫式都可支援。

表格（包含直排中橫排表格）的處理方式

在日本電書協指南中，沒有對於表格呈現的章節。

而印刷書中常會有直排書籍內有橫排表格的排版狀況，在電子書顯示中會遇到如下圖的問題。也就是橫排表格溢出顯示空間高度的問題，目前為止各RS都還沒有很好的處理方法。

橫排書中有直排表格則較少見，但同樣有內容溢出的問題。

本Issue希望能夠在本指引中加入對於表格的處理方式，提案有二：

一、比照日本製作電子書慣例，將表格以原有的排版方式做成圖片插入內文中。

這種方式製作上較為簡易，但表格內容不能被檢索，也不能保留原有的資料結構。

無障礙處理上也是個問題，不能支援TTS（文字轉語音）的機制。

二、將表格處理成標準的`<table>`結構，若表格行文方向與內文不同，則需要調整為一致。

這種方式可以保留資料結構、兼具無障礙處理。但製作上則較為麻煩。

希望各位可以按照自己RS的支援程度來決定使用何種方式。

流式書檔書封與章名頁

Guideline 針對書封與章名頁已有相關章節說明，
我們在此提出一個額外增加的建議：
如果流式書檔中的書封與章名頁內容是單一圖檔，
建議將該頁做成獨立的版式 xhtml。
最近在 BOOKWALKER 提供的輕小說 EPUB 書檔中有許多使用這種製作方式，
呈現的效果是很好的，
不知道各位的想法如何？

另外提供一個符合指引內文的EPUB範本

現在做的兩個流式（reflow）範本內容太多，反而與指引內文的範例頁面不一樣了。

identifier 的格式

看到文件中對於 identifier 的格式規範如下：

檔案id（unique-identifier）原則上使用urn:isbn:xxxxxxxxxxxx，ISBN間不加連字號。沒有ISBN時，輸入UUID。

問了一下 Yanni 後，看來應該參考 EPUB Identifier Schemes Registry 的寫法會比較合適。重點不在 urn:isbn: 的前置碼，而是使用 opf:scheme attribute 來定義。

ISBN
An International Standard Book Number.

<dc:identifier opf:scheme="isbn">9780000000001</dc:identifier>
<dc:identifier opf:scheme="isbn">urn:isbn:9780000000001</dc:identifier>

對於MathML的支援

請問目前各家對於MathML顯示運算與方程式的支援狀況如何？

除了直排書內直排方程式這種複雜的問題外（建議做成圖片檔案），一般橫排顯示是否正常？

若正常，則會推薦使用MathML作為標準顯示方式；若還有支援問題，則推薦做成圖檔。

雖然現階段 <audio> 屬於 RS不需支援的HTML元素與CSS屬性，
但是 EPUB 書檔內有 <audio> 標籤，
以現階段諸多 RS 都是以 browser 核心呈現書檔內容（App 多使用 WebView），
該 <audio> 的樣式就會是由瀏覽器決定。
但是多半高度與寬度較小，
在行動載具上就不方便觸控開啟播放。
過往 Readmoo 有收過內含 JS 自訂播放/停止按鈕的 EPUB 書檔，
也有 EPUB3 版式 + <audio> 的作法（如：語言學習雜誌）。
由於 CSS 只能控制 <audio> 的寬度，
因此最近 Chrome 修改 <audio> 呈現樣式的同時也增加了高度，
對於版式應用就可能會遮到其他內容。
在此詢問各位是否有較佳的解法？