Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

條漫的呈現方式 #5

Open
WillyYeh opened this issue Jun 29, 2018 · 3 comments
Open

條漫的呈現方式 #5

WillyYeh opened this issue Jun 29, 2018 · 3 comments
Labels
提昇 新功能、新需求、新內容

Comments

@WillyYeh
Copy link
Collaborator

WillyYeh commented Jun 29, 2018 •
edited
Loading

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>
@ccyanni ccyanni added the 提昇 新功能、新需求、新內容 label Jul 31, 2018
@ccyanni
Copy link
Collaborator

ccyanni commented Jul 31, 2018

按 @WillyYeh 的研究，目前看來 APL (W3C?) 仍是朝向 CSS Scroll Snap Point 的方向前進。條漫是個比較新的議題，或許可以看看九月東京的 W3C Workshop 會不會有進一步的討論。

@WillyYeh
Copy link
Collaborator Author

好久沒處理條漫了，最近有機會又回頭看了相關討論和範例。
先提一個 EPUB 3.0 的範例，
在這個 IDPF 專案下有個 EPUB 3.0 的垂直捲動漫畫範例，
OPF 的標注是

<meta property="rendition:layout">reflowable</meta>
<meta property="rendition:flow">scrolled-doc</meta>

這個範例有幾個點可以切入：

  1. 指定全書檔案預設為 reflowable，然後把所有圖片都接在單一 XHTML 中。
  2. 使用 <meta property="rendition:flow">scrolled-doc</meta> 指定章節切換採捲動方式。

如果探究 rendition:layout 的定義，reflowable 有天地左右留白，pre-paginated 則否，且必須以 viewport 指定的數值為準；當 rendition:flow 為 scrolled-doc 或 scrolled-continuous，則 pre-paginated 需視捲動方向而定來決定顯示的實際寬高。綜合兩設定的加成結果後，以垂直捲動（條漫）為例，就是流式的內容在捲動模式時，左右會有留白，版式的內容則否；若使用者跳離捲動模式時，流式內容的長條影像會被切頁、版式內容的長條影像會被縮小到適應螢幕高度。

另外有個問題是：版式加捲動模式可以搭配 spine item 指定左右頁的設定，變成左右雙頁拼接且上下捲動顯示，這樣的模式就不符合條漫的期望顯示方式了，因此得引入 <meta property="rendition:spread">none</meta> 設定來關閉相鄰兩頁採左右拼接的方式。

結論：
我建議條漫的作法為：

  1. 每張影像可以採適切的長條比例，然後每張圖用一個 xhtml 包起
  2. OPF 的 spine item 不要指定左右頁
  3. OPF 的 metadata 設定如下：
<meta property="rendition:layout">pre-paginated</meta>
<meta property="rendition:spread">none</meta>
<meta property="rendition:flow">scrolled-continuous</meta>

以 Readium 開啟這樣的 EPUB，基本上就會是期望中條漫的顯示方式了。

@JackieFei
Copy link

discuss at w3c/epub-specs#2412

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
提昇 新功能、新需求、新內容
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@WillyYeh @ccyanni @JackieFei