More Related Content
More from ecrowdmedia
W3C 數位出版東京工作坊趨勢分享
- 1. W3C Workshop on Digital Publication Layout and Presentation (from Manga to Magazines) Readmoo 群傳媒研發總監 葉文熙 W3C 數位出版東京工作坊趨勢分享
- 4. 其實， 不論是 Manga 或是 Magazines， 都是 Fixed Layout ！？
- 5. 什麼是 Fixed Layout (EPUB FXL) Fixed Layout 就是固定的版面， 平面出版品轉 EPUB 的 一般解
- 6. 1. FXL Image 只有圖，且多半一頁就一張圖 2. FXL Text 包含可搜尋的文字，圖的數量不定 EPUB FXL 包含在 2012 年 3 月公布的 EPUB 3.0 ➔ 還定義了頁面走向與翻頁方向等 斯斯有兩種，「EPUB FXL」也有兩種
- 7. 一頁一張圖 可以很簡單，也可以很複雜 ➔ 一頁一個 XHTML 一張圖，<body> 包 <img> 夠簡單吧 ◆ 記得要在 <head> 加 <viewport> 指定長寬喔 ➔ 用 <body> 包 <svg>，或一頁就直接是 SVG 也可以 ◆ 可以只有圖 ◆ 可以加上一大堆線條與色塊 ◆ 可以加上文字、CSS、transform Matrix ◆ ……
- 8. 真簡單，來做 Manga 吧 嘿！我手上有 jpeg / png / pdf / cbz 了，來做吧！ （或是掃紙本自炊的……呃？） 1. 把 頁面/圖 排進 spine a. HTML body/section/img b. HTML/svg/img c. SVG/img 2. 指定雙頁並排的頁面位置 ➔ 於是， 現今市面上的漫畫 EPUB， 就可以這樣上架銷售了。 （其實，寫真集也是喔）
- 9. 以日本 EBPAJ EPUB FXL 為例
- 10. 有人說，只有這樣不夠 ➔ 漫畫大國日本說：輸出國際，對話框多國語言這麼做 ➔ 韓國人說：韓國人發明的 Webtoon 直捲怎麼做？ ➔ 法國人說：我們在做有視差滾動的橫向捲軸漫畫 ➔ 法國人又說：場景切換要有過渡動畫，我們自訂規範格式 ➔ 日本人又說：EPUB FXL 包圖太麻煩了， 我們只要 spine 對 img 行不行？ 現在，這些通稱為 Digital Sequential Art 了！
- 12. Digital Sequential Art 快速成長中
- 13. 但不一定是 EPUB 格式 86% is EPUB FXL: ➢ Books: 14% ➢ Manga: 76% ➢ Magazine: 10%
- 14. ● 新工具讓進階排版需求更容易達成 ○ Grid ○ Flexbox ● 創作者設計彈性版面 ○ 不同尺寸 ○ 不同長寬比 ○ 不同運算處理能力 CSS 效果展示： https://www.chenhuijing.com/slides/41-w3c-workshop-2018 CSS 越來越強大
- 15. 等等，EPUB FXL Text 咧？ ● 圖文內容用 viewport 與 CSS 定位到頁面固定位置 ○ 圖文等內容有各自的 x, y 軸座標 ○ 其實還有 z 軸，這樣才能控制圖文疊合 ○ 不同螢幕大小可自動縮放 ● 用 CSS 與 字型檔 豐富文字呈現樣貌，文字細節不失真 ● 用 <a> 或 <map> 提供超連結跳轉 ● 閱讀軟體 / 搜尋引擎 可提供內文搜尋 ● 可支援雜誌 EPUB 的版面編排 Adobe 分享日本對排版細節的追求與堅持
- 16. 其實， 不論是 Manga 或是 Magazines， 也可以是 Unfix Fixed Layout！
- 17. EPUB FXL 的問題與期望 ● 不支援 Responsive ○ 配合 CSS3 + Viliostyle.js ● 視障者無法使用 ● 內容分析不易（Content Intelligence） ● 版面掌控在作者/出版社，而非閱讀器/使用者 ● 視覺圖像敘事需要標準制定 ○ BD-Manga-Comic
- 18. 其他值得關注發展 ➔ CSS3 發展快速，但仍有諸多語言文字支援度不佳 ➔ 部分排版需求應採修改字型檔搭配 CSS font-variant ◆ 注音符號聲符位置 ◆ 依據字句情境調整字型變化（喜怒哀樂）
- 19. Thank you