Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

W3C 數位出版東京工作坊趨勢分享

813 views

Published on

W3C 數位出版東京工作坊趨勢分享/Readmoo 群傳媒研發總監 葉文熙

Published in: Technology
  • Be the first to comment

W3C 數位出版東京工作坊趨勢分享

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

×