Skip to content

Instantly share code, notes, and snippets.

@HadrienGardeur
Last active March 19, 2025 14:05
Show Gist options
  • Save HadrienGardeur/1263d7bdf2362f33e7ab9cd9521fb93b to your computer and use it in GitHub Desktop.
Save HadrienGardeur/1263d7bdf2362f33e7ab9cd9521fb93b to your computer and use it in GitHub Desktop.
Comparing new proposal for continuously scrolled comics with Kadokawa's example
<?xml version="1.0" encoding="UTF-8"?>
<package
xmlns="http://www.idpf.org/2007/opf"
version="3.0"
xml:lang="ja"
unique-identifier="bw-ecode"
prefix="rendition: http://www.idpf.org/vocab/rendition/#
ebpaj: http://www.ebpaj.jp/
fixed-layout-jp: http://www.digital-comic.jp/
kadokawa: http://www.kadokawa.co.jp/
access: http://www.access-company.com/2012/layout#
ibooks: http://vocabulary.itunes.apple.com/rdf/ibooks/vocabulary-extensions-1.0/"
>
<metadata xmlns:dc="http://purl.org/dc/elements/1.1/">
<!-- 作品名 -->
<dc:title id="title">作品名</dc:title>
<meta refines="#title" property="file-as">サクヒンメイ</meta>
<!-- 著者名 -->
<dc:creator id="creator01">著訳者名</dc:creator>
<meta refines="#creator01" property="role" scheme="marc:relators">aut</meta>
<meta refines="#creator01" property="file-as">チョヤクシャメイ</meta>
<meta refines="#creator01" property="display-seq">1</meta>
<!-- 出版社名 -->
<dc:publisher id="publisher">株式会社KADOKAWA</dc:publisher>
<meta refines="#publisher" property="file-as">カブシキガイシャカドカワ</meta>
<!-- 言語 -->
<dc:language>ja</dc:language>
<!-- ファイルid -->
<dc:identifier id="bw-ecode">04000000A00000000000</dc:identifier>
<!-- 更新日 -->
<meta property="dcterms:modified">2021-08-11T00:00:00Z</meta>
<!-- レンダリング指定 -->
<meta property="rendition:layout">pre-paginated</meta>
<meta property="rendition:orientation">auto</meta>
<meta property="rendition:spread">none</meta>
<meta property="rendition:flow">scrolled-continuous</meta>
<!-- etc. -->
<meta property="ebpaj:guide-version">1.1.3</meta>
<meta property="kadokawa:version">1.3.1</meta>
<meta property="kadokawa:fix">1.3.1</meta>
<meta property="ibooks:specified-fonts">true</meta>
<meta property="ibooks:binding">false</meta>
<meta name="book-type" content="comic"/>
<meta name="original-resolution" content="760x1000"/>
<meta name="orientation-lock" content="none"/>
<meta name="scroll-direction" content="ttb"/>
<!-- 基準サイズ -->
<meta property="fixed-layout-jp:viewport">width=760, height=1000</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="fixed-layout-jp" href="style/fixed-layout-jp.css"/>
<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"/>
<item media-type="text/css" id="style-karc" href="style/style-karc.css"/>
<item media-type="text/css" id="style-kadokawa" href="style/style-kadokawa.css"/>
<!-- image -->
<item media-type="image/jpeg" id="cover" href="image/cover.jpg" properties="cover-image"/>
<item media-type="image/jpeg" id="i-001" href="image/i-001.jpg"/>
<item media-type="image/jpeg" id="i-002" href="image/i-002.jpg"/>
<item media-type="image/jpeg" id="i-003" href="image/i-003.jpg"/>
<item media-type="image/jpeg" id="i-004" href="image/i-004.jpg"/>
<item media-type="image/jpeg" id="i-005" href="image/i-005.jpg"/>
<item media-type="image/jpeg" id="i-tatesuku" href="image/i-tatesuku.jpg"/>
<!-- xhtml -->
<item media-type="application/xhtml+xml" id="p-cover" href="xhtml/p-cover.xhtml" properties="svg" fallback="cover"/>
<item media-type="application/xhtml+xml" id="p-001" href="xhtml/p-001.xhtml" properties="svg" fallback="i-001"/>
<item media-type="application/xhtml+xml" id="p-002" href="xhtml/p-002.xhtml" properties="svg" fallback="i-002"/>
<item media-type="application/xhtml+xml" id="p-003" href="xhtml/p-003.xhtml" properties="svg" fallback="i-003"/>
<item media-type="application/xhtml+xml" id="p-004" href="xhtml/p-004.xhtml" properties="svg" fallback="i-004"/>
<item media-type="application/xhtml+xml" id="p-005" href="xhtml/p-005.xhtml" properties="svg" fallback="i-005"/>
<item media-type="application/xhtml+xml" id="p-tatesuku" href="xhtml/p-tatesuku.xhtml" properties="svg" fallback="i-tatesuku"/>
</manifest>
<spine page-progression-direction="rtl">
<itemref linear="yes" idref="p-cover" properties="rendition:page-spread-center"/>
<itemref linear="yes" idref="p-001" properties="rendition:page-spread-center"/>
<itemref linear="yes" idref="p-002" properties="rendition:page-spread-center"/>
<itemref linear="yes" idref="p-003" properties="rendition:page-spread-center"/>
<itemref linear="yes" idref="p-004" properties="rendition:page-spread-center"/>
<itemref linear="yes" idref="p-005" properties="rendition:page-spread-center"/>
<itemref linear="yes" idref="p-tatesuku" properties="rendition:page-spread-center"/>
</spine>
</package>
<?xml version="1.0" encoding="UTF-8"?>
<package
xmlns="http://www.idpf.org/2007/opf"
version="3.0"
xml:lang="ja"
unique-identifier="bw-ecode"
prefix="rendition: http://www.idpf.org/vocab/rendition/#">
<metadata xmlns:dc="http://purl.org/dc/elements/1.1/">
<dc:title id="title">作品名</dc:title>
<meta refines="#title" property="file-as">サクヒンメイ</meta>
<dc:language>ja</dc:language>
<dc:identifier id="bw-ecode">04000000A00000000000</dc:identifier>
<meta property="dcterms:modified">2021-08-11T00:00:00Z</meta>
<meta property="rendition:layout">scrolled</meta>
</metadata>
<manifest>
<!-- navigation -->
<item media-type="application/xhtml+xml" id="toc" href="navigation.xhtml" properties="nav"/>
<!-- image -->
<item media-type="image/jpeg" id="cover" href="image/cover.jpg" properties="cover-image" fallback="p-cover"/>
<item media-type="image/jpeg" id="i-001" href="image/i-001.jpg" fallback="p-001"/>
<item media-type="image/jpeg" id="i-002" href="image/i-002.jpg" fallback="p-002"/>
<item media-type="image/jpeg" id="i-003" href="image/i-003.jpg" fallback="p-003"/>
<item media-type="image/jpeg" id="i-004" href="image/i-004.jpg" fallback="p-004"/>
<item media-type="image/jpeg" id="i-005" href="image/i-005.jpg" fallback="p-005"/>
<item media-type="image/jpeg" id="i-tatesuku" href="image/i-tatesuku.jpg" fallback="p-tatesuku"/>
<!-- xhtml -->
<item media-type="application/xhtml+xml" id="p-cover" href="xhtml/p-cover.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-003" href="xhtml/p-003.xhtml"/>
<item media-type="application/xhtml+xml" id="p-004" href="xhtml/p-004.xhtml"/>
<item media-type="application/xhtml+xml" id="p-005" href="xhtml/p-005.xhtml"/>
<item media-type="application/xhtml+xml" id="p-tatesuku" href="xhtml/p-tatesuku.xhtml"/>
</manifest>
<spine>
<itemref idref="cover"/>
<itemref idref="i-001"/>
<itemref idref="i-002"/>
<itemref idref="i-003"/>
<itemref idref="i-004"/>
<itemref idref="i-005"/>
<itemref idref="i-tatesuku"/>
</spine>
</package>
@HadrienGardeur
Copy link
Author

HadrienGardeur commented Mar 19, 2025

This Gist explores the difference between what's currently in use in Japan vs my proposal for continuously scrolled comics in EPUB.

This was taken from a public example provided by Kadokawa at the following URL: https://kadokawa-epub.bookwalker.co.jp/%E3%83%80%E3%82%A6%E3%83%B3%E3%83%AD%E3%83%BC%E3%83%89

Here are my thoughts about the current Kadokawa example:

  • This examples goes "all in" when it comes to rendition metadata with the usual (but undefined in the spec) combination of rendition:layout set to pre-paginated and rendition:flow set to scrolled-continuous
  • To be extra cautious, it also sets rendition:spread to none and every single resource in the <spine> to rendition:page-spread-center
  • It uses XHTML in the <spine> with the equivalent images as a fallback, which seems to be the opposite of how you would normally use fallbacks. This is probably used at ingest to extract images without parsing the XHTML.
  • As it is usually the case in Japan, there are a lot of additional namespaces introduced in this OPF: ebpaj, fixed-layout-jp, kadokawa and access
  • A custom metadata is introduced to set the scroll direction to TTB (top to bottom): <meta name="scroll-direction" content="ttb"/>
  • Most of these namespaces are used to indicate conformance through the use of a version property
  • The viewport is also set twice using metadata with both original-resolution (for Kindle) and fixed-layout-jp:viewport
  • And finally, there's a Kindle-specific metadata to identify that the publication is a comic: <meta name="book-type" content="comic"/>

My counter-proposal is based on a proposal made in 2024 to introduce a new values for rendition:layout: https://gist.github.com/HadrienGardeur/273a9d195f4a938880aa0bf8d2fc5dd9

Compared to Kadokawa's example:

  • It relies on a single rendition metadata with rendition:layout set to scrolled
  • There's no need to set a scroll direction in this example, since ttb would be the default value for that mode
  • All the other rendition metadata are dropped (and IMO they could all be deprecated in EPUB 3.4, along with their spine override equivalents)
  • The spine points to the images directly, with a fallback to XHTML

I believe that this achieves the same goal in a much more concise manner.

As a sidenote, I think that we should probably revisit a few things though:

  • Is there a need to express the viewport in the OPF for comics? With two extensions dedicated specifically for that (including one from Kindle), we might want to discuss it again.
  • Is there a need to explicitly identify that an EPUB conforms to a country-specific profile? There are three extensions used for that in Kadokawa's example. IMO, this could be handled using dcterms:conformsTo
  • Is there a need to identify that a publication is a comics? Kindle seems to require something along those lines, it's worth exploring why.

@shiestyle
Copy link

We use many metadata and they ware set for compatibility with Apple and Amazon's reading systems more than 10 years ago.
But some of them can be deleted now, actually. We just left them because they don't have any bad effects.

In Japan, some reading systems have two engines for text and comics, so it's useful if they can determin by OPF.

@HadrienGardeur
Copy link
Author

In Japan, some reading systems have two engines for text and comics, so it's useful if they can determin by OPF.

This feels like an important piece of information that hasn't been brought up until now. We should cover this issue within the Digital Comics TF as well.

Is this achieved using these various version metadata or using the Kindle metadata (book-type)?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment