Git Product home page Git Product logo

epub3guide's People

Contributors

bobbytung avatar ccyanni avatar jamessa avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

epub3guide's Issues

中文標點符號差異

關於標點符號使用的 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

對於MathML的支援

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

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

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

條漫的呈現方式

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

  1. 以 APL 方式來做,EPUB3 書檔為版式,搭配 CSS Scroll Snap Points
  2. 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>

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

包裝文件(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 的判斷依據:

  1. 先判斷 OPF/metadata/dc:language 的值(包含第一與第二語言)
  2. 然後是看 OPF/spine/@page-progression-direction 的值
  3. 其他判斷依據還有 HTML 的 xml:lang 宣告
  4. 最終文字走向仍得依據 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      "作者名2"
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!

英文 's 的注意事項

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

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

在草稿中有兩段落:

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

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

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

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

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

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

表格(包含直排中橫排表格)的處理方式

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

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

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

2018-06-21 7 40 26

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

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

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

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

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

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

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

流式書檔書封與章名頁

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

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

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

缺字圖片

備註:

  • 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的支援狀況。

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

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

◎換頁

class="pagebreak"

  1. BW:Android 支援,iOS 不支援
  2. ibooks:支援
  3. google play:不支援

class="pagebreak-before"

  1. BW:Android 支援,iOS 不支援
  2. ibooks:支援
  3. google play:不支援

class="pagebreak-both"

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

兩個以上OPF的敘述

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

META-INF中的container.xml

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

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

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

audio 標籤的呈現

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

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>

範本疑問

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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.