An .epub starts off life as a /META_INF and /OEBPS folders, plus a mimetype file.
The mimetype file is by far the easiest file in the application. It doesn't ever change, and contains the following content
application/epub+zipThis is it's internet media type, which is used to let people know what the format is.
In this folder we again just have some more meta files, specifically container.xml, which lets the reader know where the other files are located. It's code can, for the most part, simply be copied and pasted as is.
<?xml version="1.0"?>
<container version="1.0" xmlns="urn:oasis:names:tc:opendocument:xmlns:container">
<rootfiles>
<rootfile full-path="OEBPS/content.opf" media-type="application/oebps-package+xml"/>
</rootfiles>
</container>This is where all of the action lays. Here we have all of the pages required (in .xhtml, and including the table of contents, or toc.xhtml), as well as other necessary files such as content.opf, toc.ncx, and auxilary files you decide to include, such as a folder for the css and the book cover.
This is the first file structure that the .epub reader will actually read. It lets it know the order of each item and what should be in the file.
<?xml version="1.0" encoding="UTF-8" ?>
<package xmlns="http://www.idpf.org/2007/opf" xmlns:dc="http://purl.org/dc/elements/1.1/" unique-identifier="db-id" version="3.0">
<metadata>
<dc:title id="t1">Book Title</dc:title>
<dc:creator opf:role="aut">Author Name</dc:creator>
<dc:identifier id="db-id">isbn</dc:identifier>
<meta property="dcterms:modified">2016-12-31T15:25:13.941</meta>
<dc:language>en</dc:language>
</metadata>
<manifest>
<item id="toc" properties="nav" href="toc.xhtml" media-type="application/xhtml+xml" />
<item id="ncx" href="toc.ncx" media-type="application/x-dtbncx+xml" />
<item id="template_css" href="template.css" media-type="text/css" />
<item id="chapter_1" href="chapter_1.xhtml" media-type="application/xhtml+xml" />
<item id="chapter_2" href="chapter_2.xhtml" media-type="application/xhtml+xml" />
<item id="chapter_3" href="chapter_3.xhtml" media-type="application/xhtml+xml" />
</manifest>
<spine toc="ncx">
<itemref idref="toc" />
<itemref idref="chapter_1" />
<itemref idref="chapter_2" />
<itemref idref="chapter_3" />
</spine>
</package>This is broken up into three parts. The metadata section contains exactly that; meatdata about the book. In particular, this is where things like the author and one of the places title will be read from, so you'll want to keep it in mind. You can see more of the optional metadata tags here(ADD LINK)
The second section, manifest, contains a list of all the files in the .epub document, specifically those in the /OEPBS folder. The files must be listed here in order to be usable.
Lastly we see the spine, which lists the items in order of how they will appear in the book.
This is one of the more complex files in the book, containing a detailed description of the spine. It lists the order of each section and the order it should be in.
<?xml version="1.0" encoding="UTF-8" ?>
<ncx version="2005-1" xml:lang="en" xmlns="http://www.daisy.org/z3986/2005/ncx/">
<head>
<meta name="dtb:uid" content="isbn"/>
<meta name="dtb:depth" content="1"/>
</head>
<docTitle>
<text>Title</text>
</docTitle>
<navMap>
<navPoint id="chapter_1" playOrder=1>
<navLabel><text>Chapter 1</text></navLabel>
<content src="chapter_1.xhtml" />
</navPoint>
<navPoint id="chapter_2" playOrder=2>
<navLabel><text>Chapter 2</text></navLabel>
<content src="chapter_2.xhtml" />
</navPoint>
</navMap>
</ncx>Here you should be able to logic through a lot of it, however we see each chapter and .xhtml section is encased by a navMap and navPoint. The play order is of course the order in which the sections should be listed. Lastly, although it is optional, the dtb:depth is how many sub headings you'll have to work with. In our table of contents we only have one level of pages, so we'll enter one.
Contrary to what you've seen above, the toc.xhtml page does not determine formatting, however is viewed by the reader as the table of contents. It is not technically necessary, however I would absolutely recommend having one.
Since the toc.xhtml is not as necessary, it's format can vary and change however you'd like. That said, here is an example page which has the title at top, and a list of the other chapters and links.
<?xml version="1.0" encoding="utf-8"?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops">
<head>
<title>toc.xhtml</title>
<link href="CSS/template.css" rel="stylesheet" type="text/css" />
</head>
<body>
<nav id="toc" epub:type="toc">
<h1 class="frontmatter">Table of Contents</h1>
<ol class="contents">
<li><a href="chapter_1.xhtml">Chapter 1</a></li>
<li><a href="chapter_2.xhtml">Chapter 2</a></li>
<li><a href="copyright.xhtml">Copyright</a></li>
</ol>
</nav>
</body>
</html>Similar to the toc.xhtml, this page simply deals with the book content. As an example I'm including chapters 1, howver they're each made up of lorem ipsum. They are as follows
<?xml version="1.0" encoding="utf-8"?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops">
<head>
<title>chapter_1.xhtml</title>
<link href="CSS/template.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>Chapter 1</h1>
<p>Nullam eros diam, hendrerit vel nibh in, malesuada aliquet massa. Nam blandit egestas massa, sit amet efficitur erat luctus vel. In eu leo at nibh egestas venenatis vel nec eros. Nulla bibendum sapien vel velit iaculis, in feugiat risus vestibulum. Suspendisse placerat laoreet eros, et ullamcorper est ornare eu. Praesent imperdiet lacus vel vehicula accumsan. Donec fringilla odio velit. Cras tempus est in lacus eleifend, cursus pellentesque lorem vehicula. Ut metus turpis, posuere eget imperdiet eget, bibendum in tortor. Mauris id dolor tellus. Suspendisse at nisi tellus. Duis lectus arcu, pulvinar et pretium in, tincidunt facilisis nulla. Nulla ullamcorper aliquam ullamcorper. Nunc ultricies nibh vitae urna hendrerit varius.</p>
<!-- Here you may use classes and the like and then update the styling in
/css/template.css. You would presumably have more paragraphs and chapters. -->
</body>
</html> Chapter 2 would look identical, however would be named chapter_2.xhtml or whatever name you set for it in the .ncx and the .opf.
And finally, the css file, which we have decided to name template.css, but may be anything. Again this of course may be anything, however here is a nice design I recently wrote. It's sometimes not good practice to include font sizes, colors, or other items since ebook readers let the reader modify these among other things, however it can also add a little flavor to the book. I personally like to add some css, however try to keep it minimal as to not inhibit the reading experience.
h1 {
text-align: right;
}
h1, h2, h3, h4, h5 {
color: #666;
font-family: sans-serif;
font-size: 2.2em;
}
p {
color: #444;
font-family: serif;
font-size: 1.3em;
}
a {
text-decoration: none;
color: #1EAEDB;
}
li {
list-style: upper-roman;
color: #444;
font-family: sans-serif;
font-size: 1.2em;
line-height: 1.4em;
}For those wondering, all of the .xhtml files and the .opf do not need specific names. Although mimetype and container.xml must have the same name throughout, the rest do not, and even the folder OEBPS may be named differently. In fact a common alternative is EPUB. The only issue is when doing this you will have to go back and modify the code wherever they use these names for it to find the correct styles.
Additionally, when running the file, you don't have to compile it to view the book. Although this does not work with all .epub viewers, a trick I have when using calibre is to simply open the .opf file using the built in ebook-viewer, which allows you to view it without repeatedly re zipping and naming the book.