EPUB Template - eBook Formatting

Thank you for visiting this eBook design tutorial. We now have an eBook design startup—BB eBooks—dedicated to helping independent authors and small presses get their eBooks formatted, converted, and ready for sale at all the major online retailers (e.g. Amazon's Kindle Store, Barnes & Noble's Nook, iBookstore, Smashwords, etc.) Please contact us for a no-obligation quote. For those writers, editors, and publishers looking to go the DIY route for eBook production (you probably are if you visited this page), we offer free online tutorials and apps to help you professionally design your eBook. Please visit our Developers page and let’s work together to improve the overall standards of eBooks. Also, please sign up for the mailing list for promotions, design & marketing tips, plus eBook industry news.

Looking for a complete guide on eBook design and development? Please consider The eBook Design and Development Guide, which contains everything you need to know about HTML, CSS, EPUB, and MOBI/KF8 to make an eBook like a pro. Pick it up at Amazon for $6.99 today.

Warning This Content is Out of Date. Please head on over to the BB eBooks Developers Page for the most up to date information on eBook creation.

The full tutorials for the eBook formatting series include a basic XHTML tutorial, a tutorial for converting your manuscript into XHTML, and a Calibre tutorial for converting XHTML into eBooks. For those looking for something more advanced, you can also peruse the Regular Expressions tutorial, as well as the EPUB and KindleGen tutorial. Templates for XHTML and EPUB are also available for your formatting arsenal. Additionally, there are some helpful hints for formatting for Smashwords in this tutorial.

These are standard templates for building an EPUB or MOBI. You can download an EPUB example here. The recommended directory structure is as follows:

mimetype (must be in the root folder)

META-INF/container.xml (must be in this folder)

OEPBS/content.opf (can be in any folder, but OEPBS is recommended)

OEPBS/toc.ncx

OEPBS/title.html

OEPBS/content.html files

OEPBS/image files

OEPBS/CSS stylesheets

mimetype
The mimetype file must be exactly 20 bytes. It is as follows:

application/epub+zip

container.xml
This file must be in the META-INF directory The only thing you ever need to alter is the full-path attribute in the <rootfile> tag:

<?xml version="1.0"?>
<container version="1.0" xmlns="urn:oasis:names:tc:opendocument:xmlns:container">
   <rootfiles>
      <rootfile full-path="OEPBS/content.opf" media-type="application/oebps-package+xml"/>
   </rootfiles>
</container>

content.opf

Sample is as follows:

<?xml version="1.0" ?>
<package version="2.0" xmlns="http://www.idpf.org/2007/opf" unique-identifier="BookId">
  <metadata xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:opf="http://www.idpf.org/2007/opf">
    <!--Required metadata-->
    <dc:title>Your eBook's Title</dc:title>
    <dc:language>en-us</dc:language> <!--Other examples include "en-gb" for British English, "fr" for French-->
    <dc:identifier id="BookId" opf:scheme="uuid">urn:uuid:MUST OBTAIN</dc:identifier> <!--Can generate at http://www.famkruithof.net/uuid/uuidgen-->
    <dc:creator>Your Name Here</dc:creator> <!--The Author-->
    <dc:publisher>Publisher here</dc:publisher> <!--Name of Publisher or yourself if self-published-->
    <dc:date>2000-01-01</dc:date> <!--Published Date in YYYY-MM-DD-->
    <meta name="cover" content="My_Cover_ID" /> <!--Required for KindleGen-->
    <!--Add extra metadata here (recommended)-->
    <dc:description>Book's Description</dc:description> <!--Backjacket description-->
    <dc:subject>Keyword 1</dc:subject>
    <dc:subject>Keyword 2</dc:subject>
    <dc:subject>Keyword 3</dc:subject>
    <dc:contributor opf:role="edt">Editor's Name</dc:contributor>
  </metadata>
  <!--Declarations for media-types in the Manifest Section
    "application/xhtml+xml" - XHTML content files
    "application/x-dtbncx+xml" - NCX table of contents
    "text/css" - CSS files
    "image/jpeg" - JPEG image
    "image/gif" - GIF image
    "image/png" - PNG Image -->
  <manifest>
    <!--Required in manifest-->
    <item href="cover.jpg" id="My_Cover_ID" media-type="image/jpeg" />
    <item href="toc.ncx" id="ncx" media-type="application/x-dtbncx+xml" />
    <item href="content1.html" id="html1" media-type="application/xhtml+xml" />
    <item href="content2.html" id="html2" media-type="application/xhtml+xml" />
    <!--Optional but recommended in Manifest-->
    <item href="extra.jpg" id="extraimg" media-type="image/jpeg" />
    <item href="mystylesheet.css" id="mycss" media-type="text/css" />
    <item href="coverpage.html" id="coverpg" media-type="application/xhtml+xml" />
    <item href="titlepage.html" id="titlepg" media-type="application/xhtml+xml" />
    <item href="toc.html" id="htmltoc" media-type="application/xhtml+xml" />
  </manifest>
  <spine toc="ncx">
    <itemref idref="coverpg" />
    <itemref idref="titlepg" />
    <itemref idref="html1" />
    <itemref idref="html2" />
    <itemref idref="htmltoc" />
  </spine>
  <guide>
    <reference href="coverpage.html" type="cover" title="Cover" />
    <reference href="toc.html" type="toc" title="Table of Contents" />
    <reference href="content1.html" type="text" title="Beginning" />
  </guide>
</package>

toc.ncx
Here is an example of a toc.ncx file:

<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE ncx PUBLIC "-//NISO//DTD ncx 2005-1//EN" "http://www.daisy.org/z3986/2005/ncx-2005-1.dtd">
<ncx xmlns="http://www.daisy.org/z3986/2005/ncx/" version="2005-1" xml:lang="en">
  <head>
    <meta content="urn:uuid:da032e40-c65b-11e0-9572-0800200c9a66" name="dtb:uid" /> <!--Must be exactly the same as dtb:uid in content.opf-->
    <meta content="1" name="dtb:depth" />
    <meta content="0" name="dtb:totalPageCount" />
    <meta content="0" name="dtb:maxPageNumber" />
  </head>
  <docTitle>
    <text>Title</text>
  </docTitle>
  <docAuthor>
    <text>Author Name</text>
  </docAuthor>
  <navMap>
    <navPoint id="NCX_Cover" playOrder="1">
      <navLabel>
        <text>Cover</text>
      </navLabel>
      <content src="coverpage.html" />
    </navPoint>
    <navPoint id="NCX_Title" playOrder="2">
      <navLabel>
        <text>Title Page</text>
      </navLabel>
      <content src="titlepage.html" />
    </navPoint>
    <navPoint id="NCX_Chapter1" playOrder="3">
      <navLabel>
        <text>Chapter 1 - The Beginning</text>
      </navLabel>
      <content src="content1.html" />
    </navPoint>
    <navPoint id="NCX_Chapter2" playOrder="4">
      <navLabel>
        <text>Chapter 2 - The Climax</text>
      </navLabel>
      <content src="content1.html#c2" />
    </navPoint>
    <navPoint id="NCX_Chapter3" playOrder="5">
      <navLabel>
        <text>Chapter 3 - The Ending</text>
      </navLabel>
      <content src="content2.html" />
    </navPoint>
    <navPoint id="NCX_AuthorNotes" playOrder="6">
      <navLabel>
        <text>Author's Notes</text>
      </navLabel>
      <content src="content2.html#a1" />
    </navPoint>
    <navPoint id="NCX_HTMLTOC" playOrder="7">
      <navLabel>
        <text>Table of Contents</text>
      </navLabel>
      <content src="toc.html" />
    </navPoint>
  </navMap>
</ncx>

Content Files:
Here is an example of a content file. You can have as many of these as you want:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<title>Title Here</title>
<!-- Visit http://paulsalvette.com for more details and tutorials -->
<link type="text/css" rel="stylesheet" href="mystylesheet.css" />
</head>
<body class="epub_margins">
<!-- Paste content here -->
</body>
</html>

Table of Contents (HTML)
Here is an example of an HTML Table of Contents inside the EPUB. Note that this is NOT the NCX:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<title>Title Here</title>
<!-- Visit http://paulsalvette.com for more details and tutorials -->
<link type="text/css" rel="stylesheet" href="mystylesheet.css" />
</head>
<body class="epub_margins">
<p class="headline">The Traditional HTML Table Of Contents (Not the NCX!)</p>
<p><a href="coverpage.html">Cover</a></p>
<p><a href="titlepage.html">Title</a></p>
<p><a href="content1.html#c1">Chapter 1</a></p>
<p><a href="content1.html#c2">Chapter 2</a></p>
<p><a href="content2.html#c3">Chapter 3</a></p>
<p><a href="content2.html#a1">Some Author Notes</a></p>
</body>
</html>

Cover Page
This is an example of a cover page if you prefer to have it in the XHTML and the meta:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
        <title>Cover</title>
        <style type="text/css">
            @page {padding: 0pt; margin:0pt;} <!--Remove for MOBI-->
            body {text-align: center; padding:0pt; margin: 0pt;}
            div {padding:0pt; margin: 0pt;}
            img {padding:0pt; margin: 0pt;}
        </style>
    </head>
    <body>
        <div>
            <img src="cover.jpg" alt="The Book's Cover" style="height: 100%;" />
        </div>
    </body>
</html>

Stylesheet:
This is an example of an external CSS:

/* Below is the Guido Henkel Method to reset everything in an eReader device */
   html, body, div, h1, h2, h3, h4, h5, h6, ol, dl, ul, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td, tr { margin: 0; padding: 0.01em; }

   /* MOBI Does Not Recognize the @page style */
@page { margin-bottom: 5.0pt; margin-top: 5.0pt; }
 
body.epub_margins /* Force left/right page margins on EPUB */
{
margin-left: 5.0pt;
margin-right: 5.0pt;
text-align: justify;
}
 
body.mobi_margins /* Force 0 page margins on MOBI, you should delete the @page from the stylesheet for MOBI too */
{
margin-left: 0pt;
margin-right: 0pt;
text-align: justify;
}
 
p  /* First Line Indent type, good for fiction */
{
text-indent: 1.25em;
margin-top: 0em;
margin-bottom: 0em;
}

p.notes /* Block Indent type, good for non-fiction, author's notes, about the author, front matter not centered, etc. */
{
text-indent: 0em;
margin-top: 0em;
margin-bottom: 1.0em;
}
 
p.front /* For Front Matter Material */
{
text-indent: 0em;
margin-top: 0em;
margin-bottom: 1.0em;
text-align: center;
}
 
p.title /*Use for the title on the first page*/
{
text-indent: 0em;
font-size: 2.0em;
font-weight: bold;
margin-top: 1.5em;
margin-bottom: 1.0em;
text-align: center;
page-break-before: always;
}

p.headline /*Use for Author's Notes, Excerpts, etc. headings*/
{
text-indent: 0em;
font-size: 1.5em;
font-weight: bold;
margin-top: 1.0em;
margin-bottom: 1.5em;
text-align: center;
page-break-before: always;
}

p.chapter /*Use for Chapter headings*/
{
text-indent: 0em;
font-size: 1.5em;
font-weight: bold;
margin-top: 1.0em;
margin-bottom: 1.5em;
text-align: center;
page-break-before: always;
}

p.centered /* Use for section breaks */
{
text-indent: 0em;
margin-top: 1.0em;
margin-bottom: 1.0em;
text-align: center;
}
 
p.centeredimg /* Use for images */
{
text-indent: 0em;
margin-top: 1.0em;
margin-bottom: 1.0em;
text-align: center;
}

/* Span tags are for when you want to change a few words within a paragraph rather than the entire paragraph */
span.i
{
font-style: italic;
}

span.b
{
font-weight: bold;
}
 
span.u
{
text-decoration: underline;
}

ul /* Defines an unordered list (bullet points) */
{
text-align: left;
margin-left: 3.0em;
margin-top: 0em;
margin-bottom: 0em;
}

ol /* defines an ordered list (1,2,3,etc.) */
{
text-align: left;
margin-left: 3.0em;
margin-top: 0em;
margin-bottom: 0em;
}

EPUB Template - eBook Formatting