Skip to content

Commit

Permalink
加入10本EPUB 3實作案例參考
Browse files Browse the repository at this point in the history
  • Loading branch information
專業技術組 committed Dec 18, 2019
1 parent 45a6751 commit e436fd5
Show file tree
Hide file tree
Showing 236 changed files with 30,076 additions and 4 deletions.
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1 +1,2 @@
*.epub
.DS_Store
56 changes: 52 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ EPUB 3內使用HTML5與CSS3等網頁技術,各作業系統與瀏覽器組版

## 檔案說明

此儲存庫中存放包含「台灣 EPUB 3 製作指引」之本文內容(Markdown 與 EPUB 格式),並針對文中所提及之設計規範與建議,提供 CSS 設計樣版以利電子書製作與閱讀器實作者參考。為利於內容編修與版本管控,所有 EPUB 內容均以解壓縮後之原始檔方式存放。
此儲存庫中存放包含「台灣 EPUB 3 製作指引」之本文內容(Markdown 與 EPUB 格式),並針對文中所提及之設計規範與建議,提供 CSS 設計樣版以利電子書製作與閱讀器實作者參考。

### 範本全文

Expand All @@ -46,10 +46,58 @@ EPUB 3內使用HTML5與CSS3等網頁技術,各作業系統與瀏覽器組版
- [Reflow 直排](https://github.com/dpublishing/epub3guide/blob/master/samples/EPUB%20reflow%20sample_%E7%9B%B4%E6%8E%92)
- [Reflow 橫排](https://github.com/dpublishing/epub3guide/blob/master/samples/EPUB%20reflow%20sample_%E6%A9%AB%E6%8E%92)

### 產生 EPUB 檔方式

可使用 EPUBChecker 指令將本儲存庫中提供之 EPUB 原始內容產生為封裝後的 EPUB 檔案。關於更多 EPUBChecker 資訊可參考 EPUBChecker 官網: https://github.com/w3c/epubcheck
### EPUB 3 實作案例參考

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

1. [橫排文字書:巴黎茶花女遺事](https://github.com/dpublishing/epub3guide/tree/master/practices/01_Reflow_Text_Horizontal)
採民國初年林紓、王壽昌所翻譯之小仲馬作品《茶花女》,封面為穆夏所繪製的畫作。
內容為橫排的文字書,主要說明了標題與段落語法,對齊方式、字體指定、強調與連結、行距與間距等基本排版元素。

2. [直排文字書:羅生門](https://github.com/dpublishing/epub3guide/tree/master/practices/02_Reflow_Text_Vertical)
採民國初年魯迅所翻譯之芥川龍之介作品《羅生門》,封面為以 CC BY-SA 2.0 授權的攝影作品。
內容為直排的文字書,主要說明了指定直排的方式,指定語言的方式,標點符號的使用方式以及直排特有縱中橫排、轉向的作法,也補充了行頭凸排與段落縮排與提排的指定方式。

3. [文字書嵌入字體:航海家金唱片](https://github.com/dpublishing/epub3guide/tree/master/practices/03_Embed_Fonts_And_Ruby)
採美國太空總署置放到航海者一號太空船內金屬唱片中的各國問候語句,封面為公共領域的照片。
內容為使用嵌入字體排列的中文注音符號、台語注音符號與泰文,主要說明如何標注注音符號,並且套用嵌入字體、調整排版達到最適宜的顯示效果。以及如何取得開放授權的字體嵌入 EPUB 中使用,以避免發生缺字的狀況。

4. [文字書註解與圖表:全球報業營運趨勢與產業現況](https://github.com/dpublishing/epub3guide/tree/master/practices/04_Image_Table_And_Footnote)
採開放授權書籍《新聞業的危機與重建》第一章,取得作者戴伊筠同意授權使用,封面為公共領域的照片。
內容為論文,有大量圖表,故本書使用了 EPUB 中的圖片一覽與表格一覽目錄。同時也說明表格與圖片的呈現與對齊方式,以及連結、註釋結構與樣式的調整。

5. [文字書圖文混排:阿麗思漫遊奇境記](https://github.com/dpublishing/epub3guide/tree/master/practices/05_Wrap_Text_Around_Image)
採民國初年趙元任所翻譯之路易斯卡洛爾作品《Alice in wonderland》,封面為採 CC0 授權的插畫作品,內頁插畫為公共領域作品。
內容為圖文混排,用以說明如何指定圖片尺寸與限制最大尺寸,並且配合實驗性的文繞圖排版。以及如何使用對齊、圖片邊界與框線來修飾。

6. [固定版型圖文書:清明上河圖](https://github.com/dpublishing/epub3guide/tree/master/practices/06_Fixed_Layout_Image)
採故宮開放資料之清院本清明上河圖。
內容為基本的固定版型圖文書,可供製作漫畫、雜誌與排版複雜的圖書參考。

7. [重排式文字書與固定版型圖文書混排:詩經](https://github.com/dpublishing/epub3guide/tree/master/practices/07_Reflow_FXL_Mixed)
採《詩經》國風・周南兩則,配合國家圖書館所藏善本《詩經圖譜慧解》第二冊之版畫。
內容為重排式文字與固定版型整頁圖片內容混合排列。用以說明如何在文字書中插入整頁圖片,或連續整頁圖片,例如書中連續照片、漫畫與跨頁圖片等。

8. [圖文影音書:仲夏夜之夢簡介](https://github.com/dpublishing/epub3guide/tree/master/practices/08_Audio_Video)
採維基百科上對莎士比亞戲劇「仲夏夜之夢」的簡介,並且加上開放授權與公共領域的影片與聲音檔。
內容使用了固定版面HTML排版,可供製作多媒體圖文書時參考使用。

9. [圖文朗讀書:水調歌頭](https://github.com/dpublishing/epub3guide/tree/master/practices/09_Media_Overlay)
採蘇軾水調歌頭,錄音檔為開放授權使用之音檔,封面為故宮開放資料。
內容使用了EPUB 3 Media Overlay朗讀功能,可供繪本等製作時參考使用。Media Overlay雖為EPUB 3的標準功能,但並非所有閱讀程式都支援。

10. [實驗性 RWD 設計:貧賤夫妻](https://github.com/dpublishing/epub3guide/tree/master/practices/10_RWD_Experimental)
採鍾理和作品《貧賤夫妻》,封面為行政院客家委員會開放授權的美濃老照片。
內容使用了幾項實驗性功能,一是軟換頁功能,二是 RWD 響應式設計,讓書的排版可以按照螢幕尺寸大小進行調整。但不見得能夠應用在所有電子書閱讀程式上。


### 產生 EPUB 封裝檔

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

```shell
epubcheck [目錄名稱] --mode exp --save
```
```

如需一次產生所有範例與參考之 EPUB 檔案,可參考 `pack-all.sh` 之指令自行產生。
12 changes: 12 additions & 0 deletions practices/01_Reflow_Text_Horizontal/META-INF/container.xml
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<?xml version="1.0"?>
<container
version="1.0"
xmlns="urn:oasis:names:tc:opendocument:xmlns:container"
>
<rootfiles>
<rootfile
full-path="item/standard.opf"
media-type="application/oebps-package+xml"
/>
</rootfiles>
</container>
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html
xmlns="http://www.w3.org/1999/xhtml"
xmlns:epub="http://www.idpf.org/2007/ops"
xml:lang="zh-TW" lang="zh-TW"
>
<head>
<meta charset="UTF-8"/>
<title>目錄</title>
</head>
<body>

<nav epub:type="toc" id="toc">
<h1>目錄</h1>
<ol>
<li><a href="xhtml/p-cover.xhtml">封面</a></li>
<li><a href="xhtml/p-fmatter-001.xhtml">製作緣起</a></li>
<li><a href="xhtml/p-titlepage.xhtml">書名頁</a></li>
<li><a href="xhtml/p-toc.xhtml">目錄</a></li>
<li><a href="xhtml/p-001.xhtml">內文</a></li>
<li><a href="xhtml/p-002.xhtml">製作解說</a></li>
<li><a href="xhtml/p-colophon.xhtml">版權頁</a></li>
</ol>
</nav>

</body>
</html>
90 changes: 90 additions & 0 deletions practices/01_Reflow_Text_Horizontal/item/standard.opf
Original file line number Diff line number Diff line change
@@ -0,0 +1,90 @@
<?xml version="1.0" encoding="UTF-8"?>
<package
xmlns="http://www.idpf.org/2007/opf"
version="3.0"
xml:lang="zh-TW"
unique-identifier="unique-id"
prefix="ibooks: http://vocabulary.itunes.apple.com/rdf/ibooks/vocabulary-extensions-1.0/ rendition: http://www.idpf.org/vocab/rendition/#"
>

<metadata xmlns:dc="http://purl.org/dc/elements/1.1/">

<!-- 作品名 -->
<dc:title id="title">巴黎茶花女遺事</dc:title>

<!-- 作者名 -->
<dc:creator id="creator01">小仲馬</dc:creator>
<meta refines="#creator01" property="role" scheme="marc:relators">aut</meta>
<meta refines="#creator01" property="display-seq">1</meta>

<dc:creator id="creator02">林紓</dc:creator>
<meta refines="#creator02" property="role" scheme="marc:relators">tlr</meta>
<meta refines="#creator02" property="display-seq">2</meta>

<dc:creator id="creator03">王壽昌</dc:creator>
<meta refines="#creator03" property="role" scheme="marc:relators">tlr</meta>
<meta refines="#creator03" property="display-seq">3</meta>

<!-- 出版社名 -->
<dc:publisher id="publisher">台灣數位出版聯盟</dc:publisher>

<!-- 語言 -->
<dc:language>zh-TW</dc:language>

<!-- 檔案id -->
<dc:identifier id="unique-id">urn:uuid:d7a8d311-7cd0-40df-9443-65847561dec1</dc:identifier>

<!-- 更新時間 -->
<meta property="dcterms:modified">2019-11-01T00:00:00Z</meta>

<!-- iBook指定字體 -->
<meta property="ibooks:specified-fonts">true</meta>

</metadata>

<manifest>

<!-- navigation -->
<item media-type="application/xhtml+xml" id="toc" href="navigation-documents.xhtml" properties="nav"/>

<!-- style -->
<item media-type="text/css" id="book-style" href="style/book-style.css"/>
<item media-type="text/css" id="style-reset" href="style/style-reset.css"/>
<item media-type="text/css" id="style-standard" href="style/style-standard.css"/>
<item media-type="text/css" id="style-advance" href="style/style-advance.css"/>
<item media-type="text/css" id="style-check" href="style/style-check.css"/>

<!-- image -->
<item media-type="image/jpeg" id="cover" href="image/cover.jpg" properties="cover-image"/>
<item media-type="image/png" id="tdpf" href="image/tdpf.png" />
<item media-type="image/png" id="moc" href="image/moc.png" />


<!-- xhtml -->
<item media-type="application/xhtml+xml" id="p-cover" href="xhtml/p-cover.xhtml" properties="svg"/>
<item media-type="application/xhtml+xml" id="p-fmatter-001" href="xhtml/p-fmatter-001.xhtml"/>
<item media-type="application/xhtml+xml" id="p-titlepage" href="xhtml/p-titlepage.xhtml"/>
<item media-type="application/xhtml+xml" id="p-toc" href="xhtml/p-toc.xhtml"/>
<item media-type="application/xhtml+xml" id="p-001" href="xhtml/p-001.xhtml"/>
<item media-type="application/xhtml+xml" id="p-002" href="xhtml/p-002.xhtml"/>

<item media-type="application/xhtml+xml" id="p-colophon" href="xhtml/p-colophon.xhtml"/>

<!-- font -->

</manifest>

<spine page-progression-direction="ltr">
<itemref linear="yes" idref="p-cover" properties="rendition:layout-pre-paginated
rendition:spread-none
rendition:page-spread-center"/>
<itemref linear="yes" idref="p-fmatter-001" properties="page-spread-left"/>
<itemref linear="yes" idref="p-titlepage" properties="page-spread-left"/>
<itemref linear="yes" idref="p-toc" properties="page-spread-left"/>
<itemref linear="yes" idref="p-001" properties="page-spread-left"/>
<itemref linear="yes" idref="p-002" properties="page-spread-left"/>
<itemref linear="yes" idref="p-colophon" properties="page-spread-left"/>

</spine>

</package>
Loading

0 comments on commit e436fd5

Please sign in to comment.