epub for comic books
mouse 699 · person cloud · link
CSS
HTML
HowTo
Kobo
Reference
Tools
eReader
Last update
2021-12-23
2021
12-23
« — »

standard layout

/page.css

1
2
3
4
@page, html, body, div.main, img { margin: 0; padding:0; }
div.main { width: 100%; text-align: center; }
img.page.long { height: 100%; margin: 0 auto; }
img.page.wide { width:  100%; margin: auto 0; }

/content.opf

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<?xml version="1.0" encoding="UTF-8"?>
<!-- https://wiki.mobileread.com/wiki/EPUB -->
<!-- https://github.com/kobolabs/epub-spec -->
<!-- https://gist.github.com/daniel-j/613a506a0ec9c7037897c4b3afa8e41e -->
<package xmlns="http://www.idpf.org/2007/opf" version="2.0" unique-identifier="uuid_id">
  <metadata xmlns:opf="http://www.idpf.org/2007/opf" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:dcterms="http://purl.org/dc/terms/" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
    <dc:title>nice title</dc:title>
    <dc:creator opf:role="aut">cool author</dc:creator>
    <dc:identifier id="uuid_id" opf:scheme="uuid">03f88c01-3018-49f9-a94f-5a37b33bc682</dc:identifier>
    <dc:language>en</dc:language>
    <meta name="cover" content="i0001"/>
  </metadata>
  <manifest>
    <item id="p0001" href="pages/0001.xhtml" media-type="application/xhtml+xml"/>
    <item id="p0002" href="pages/0002.xhtml" media-type="application/xhtml+xml"/>
    ...

    <item id="i0001" href="images/0001.jpg" media-type="image/jpeg"/>
    <item id="i0002" href="images/0002.jpg" media-type="image/jpeg"/>
    ...

    <item id="page_css" href="page.css" media-type="text/css"/>

    <item id="ncx" href="toc.ncx" media-type="application/x-dtbncx+xml"/>
  </manifest>
  <spine toc="ncx">
    <itemref idref="p0001"/>
    <itemref idref="p0002"/>
    ...
  </spine>
</package>

/toc.ncx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<?xml version="1.0" encoding="UTF-8"?>
<!-- https://wiki.mobileread.com/wiki/NCX -->
<!-- https://docs.fileformat.com/ebook/ncx/ -->
<ncx xmlns="http://www.daisy.org/z3986/2005/ncx/" version="2005-1" xml:lang="eng">
  <head>
    <meta name="dtb:uid" content="03f88c01-3018-49f9-a94f-5a37b33bc682"/>
    <meta name="dtb:depth" content="1"/>
    <meta name="dtb:totalPageCount" content="0"/>
    <meta name="dtb:maxPageNumber" content="0"/>
  </head>
  <docTitle>
    <text>nice title</text>
  </docTitle>
  <docAuthor>
    <text>cool author</text>
  </docAuthor>
  <navMap>
    <navPoint id="n1" playOrder="1" class="chapter">
      <navLabel><text>Page 1</text></navLabel>
      <content src="pages/0001.xhtml"/>
    </navPoint>
    <navPoint id="n2" playOrder="2" class="chapter">
      <navLabel><text>Page 2</text></navLabel>
      <content src="pages/0002.xhtml"/>
    </navPoint>
    ...
  </navMap>
</ncx>

/pages/####.xhtml

1
2
3
4
5
6
7
8
9
10
11
12
13
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>page ####</title>
  <link rel="stylesheet" type="text/css" href="../page.css"/>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
  <div class="main">
    <img src="../images/####.jpg" alt="page ####" class="page long|wide"/>
  </div>
</body>
</html>

fixed layout

/META-INF/com.kobobooks.display-options.xml

1
2
3
4
5
6
<?xml version="1.0" encoding="UTF-8"?>
<display_options>
  <platform name="*">
     <option name="fixed-layout">true</option>
  </platform>
</display_options>

/page.css

1
2
3
4
5
6
@page { margin: 0; padding: 0; }

body { /* kobo sage: 1440x1920 (3:4) */
  width:  1440px;
  height: 1920px;
}

/content.opf

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<?xml version="1.0" encoding="UTF-8"?>
<!-- https://wiki.mobileread.com/wiki/EPUB -->
<!-- https://wiki.mobileread.com/wiki/OPF  -->
<!-- https://wiki.mobileread.com/wiki/Fixed_layout_ePub -->
<!-- https://github.com/kobolabs/epub-spec#fixed-layout-fxl-support -->
<package xmlns="http://www.idpf.org/2007/opf" version="2.0" unique-identifier="uuid_id" prefix="rendition: http://www.idpf.org/vocab/rendition/#">
  <metadata xmlns:opf="http://www.idpf.org/2007/opf" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:dcterms="http://purl.org/dc/terms/" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
    <dc:title>nice title</dc:title>
    <dc:creator opf:role="aut">cool author</dc:creator>
    <dc:identifier id="uuid_id" opf:scheme="uuid">03f88c01-3018-49f9-a94f-5a37b33bc680</dc:identifier>
    <dc:language>en</dc:language>
    <meta name="cover" content="i0001"/>
    <meta property="rendition:layout">pre-paginated</meta>
    <meta property="rendition:spread">none</meta>
    <meta property="rendition:orientation">portrait</meta>
  </metadata>
  <manifest>
    <item id="p0001" href="pages/0001.xhtml" media-type="application/xhtml+xml"/>
    <item id="p0002" href="pages/0002.xhtml" media-type="application/xhtml+xml"/>
    ...

    <item id="i0001" href="images/0001.jpg" media-type="image/jpeg"/>
    <item id="i0002" href="images/0002.jpg" media-type="image/jpeg"/>
    ...

    <item id="page_css" href="page.css" media-type="text/css"/>

    <item id="ncx" href="toc.ncx" media-type="application/x-dtbncx+xml"/>
  </manifest>
  <spine toc="ncx"><!-- page-progression-direction="rtl" -->
    <itemref idref="p0001" linear="yes"/>
    <itemref idref="p0002" linear="yes"/>
    ...
  </spine>
</package>

/toc.ncx

same as the standard layout

/pages/####.xhtml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>page ####</title>
  <link rel="stylesheet" type="text/css" href="../page.css"/>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <meta name="viewport" content="width=1440, height=1920"/>
</head>
<body>
  <div class="main">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 1440 1920">
      <image width="1440" height="1920" xlink:href="../images/####.jpg"/>
    </svg>
  </div>
</body>
</html>

See also: KCC gui/cli & github hp, ebooks.stackexchange, python gist