Book ePub Template

This is a basic template to start a new electronic book project.

Note

I used Sigil, a multi-platform EPUB ebook editor, to create my own ePubs.

Tip

I recommend installing Sigil (and its xhtml editor, PageEdit, if it's your first time writing in xhtml) to get started with your first ebook project. If you need some help with your first steps in Sigil (and you speak spanish), you could visit Tutorial de Sigil en español in YouTube.

How to use this template

If you decide to use Sigil, you only need to download epub-template.epub and open it with Sigil. In case you decide to use a different editor, you should download the entire repository and edit the files as you please.

Next, if you face some trouble understanding how everything works, check the brief guide step-by-step bellow about how to add images and font families.

Add font families

1. Add font files (.ttf) to Fonts

To add a new font family in your epub, go to the fonts folder of your computer (C:\Windows\Fonts for Windows), copy all the .ttf files of the family you wish to use (e.g. Sitka Small: SitkaSmall.ttf, SitkaSmall-Bold.ttf, SitkaSmall-Italic.ttf, ...) or download new ones (e.g. Google Fonts), and paste them inside the folder Fonts.

2. Link the new font to the document style

In styles.css file, where you can modify and create new text styles for your ePub, modify the following methods with the name of your new font:

/* Font family: Sitka Small */

@font-face {
  font-family: 'sitka-small';
  font-style: normal;
  font-weight: normal;
  src: url(../Fonts/SitkaSmall.ttf);
}

@font-face {
  font-family: 'sitka-small';
  font-style: italic;
  font-weight: normal;
  src: url(../Fonts/SitkaSmall-Italic.ttf);
}

@font-face {
  font-family: 'sitka-small';
  font-style: normal;
  font-weight: bold;
  src: url(../Fonts/SitkaSmall-Bold.ttf);
}

• font-family: the name you want to give to your font family
• font-style: normal or italic
• font-weight: normal or bold
• src: the location of the font file

3. Define the body

Also in styles.css, modify the following method with the name of your new font:

/* Body of the text */

body {
  font-family: sitka-small, serif;
  margin: 1em;
  padding: 0;
  border: 0;
}

• font-family: the name you previously gave to your font family (should also be accompanied by a generic font family like serif, monospace, ...)
• margin: space outside the border of an element
• padding: space between the content of an element and its border
• border: line that surrounds the content and padding of an element

Add images

1. Add image files (.png, .jpg, ...) to Images

Upload all the images you wish to put in your ebook inside the folder Images. If your ePub has many pictures, you could organize them by creating new folders inside Images (e.g. Covers, Chapter1, Chapter2, ...).

2. Link the images to the document

In the file (e.g. chapter0.xhtml) where you wish to put your image (e.g. img000.png) write down the following line:

<br/> <p class="img-simple"> <img alt="" src="../Images/Chapter1/img001.png"/></p> <br/>

• <br/>: Line break in the content to give more space between the text and the image.
• <p>...</p>: Defines a paragraph (or an image in this case) in the content.
• class=" ": Assigns a tag to an element to reference it from the CSS and style it.
• "img-simple": Class name assigned to the element referenced in the css file (style.css).
• <img>: Tag used to insert an image into the content.
• alt=" ": Alternative text describing the image in case it can't be displayed.
• src=" ": Source/URL of the image (it can be from inside the project or from the internet).

To create a new style for images or modify the existent, you can simply modify "img-simple" inside styles.css as you wish.