Skip to main content
EPUB editing

EPUB editing #

(Maybe) Useful resources #

Basics of EPUB #

Below shows the file structure of an example EPUB file. You could access this file tree by using calibre’s ebook editor, Sigil, or rename it to book.zip and then unzip it.

book.epub
โ”œโ”€โ”€ content.opf
โ”œโ”€โ”€ cover.jpeg
โ”œโ”€โ”€ fonts
โ”‚   โ”œโ”€โ”€ 00005.otf
โ”‚   โ”œโ”€โ”€ 00006.ttf
โ”‚   โ””โ”€โ”€ ...
โ”œโ”€โ”€ images
โ”‚   โ”œโ”€โ”€ 00001.png
โ”‚   โ”œโ”€โ”€ 00002.png
โ”‚   โ””โ”€โ”€ 00004.png
โ”œโ”€โ”€ mimetype
โ”œโ”€โ”€ styles
โ”‚   โ”œโ”€โ”€ page_styles.css
โ”‚   โ””โ”€โ”€ stylesheet.css
โ”œโ”€โ”€ text
โ”‚   โ”œโ”€โ”€ chapter0000.html
โ”‚   โ”œโ”€โ”€ chapter0001.html
โ”‚   โ”œโ”€โ”€ chapter0002.html
โ”‚   โ””โ”€โ”€ ...
โ”œโ”€โ”€ titlepage.xhtml
โ””โ”€โ”€ toc.ncx

Among these files:

text
The actual book. Work mostly like normal HTML files. Sometimes they have .xhtml extension.
styles
CSS to style the book. Mostly like normal CSS for normal HTML files.
content.opf (or volume.opf)
The “definition” file for the EPUB.
What’s in an ePUB?: The OPF File - eBOUND Canada
toc.ncx
TOC file for EPUB2
toc.xhtml or nav.xhtml
TOC file for EPUB3

Alignment #

Vertical align #

html - How do I vertically center text with CSS? - Stack Overflow

Method: padding-top: 25vh
TBE
Method: table

Ref: MobileRead Forums - View Single Post - How do you vertically center a text?

Page code:

<body>
<div class="part-page">
  <div class="top_row"></div>

  <div class="middle_row">
  <h1>...</h1>
  </div>

  <div class="bottom_row">
  <h2>...</h2>
  </div>
</div>
</body>

CSS:

.part-page {
  display: table;
  height: 100%;
  width: 100%;
  text-indent: 0;
  text-align: center;
}

.top_row {
  display: table-row;
  height: 15%;
}

.middle_row {
  display: table-row;
  height: 70%;
}

.bottom_row {
  display: table-row;
  height: 15%;
}

.middle_row h1 {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  text-indent: 0;
  font-size: 1.4em;
}

.bottom_row h2 {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  text-indent: 0;
}
Method: margin & transform

Ref: Vertically Centered Text in iBooks โ€“ EPUBSecrets

This method looks good when it works, but horrible when it doesn’t work. Be aware.

Page code:

<body>
  <div class="vertical-center">
    <h1>...</h1>
  </div>
</body>

CSS:

.vertical-center {
  margin: 50vh 0 0 0;
  text-align: center;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

Image sizing #

Full-page images #

Small block images #

Refs:

Problem: allowing images to scale down, while limiting the maximum size, and horizontally centred in page.

Page code:

<div class="chapter-image-wrapper">
  <svg
    style="max-width:[desired-width]px; max-height:[desired-height]px"
    viewBox="0 0 [actual-width] [actual-height]"
    preserveAspectRatio="xMidYMid meet"
    xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" >
    <image width=[actual-width] height=[actual-height] xlink:href="../Images/pic.png"/>
    <!-- Warning: Kobo will not display the image without the width & height in the image tag -->
  </svg>
</div>

CSS:

div.chapter-image-wrapper {
  margin: 0;
  page-break-inside:avoid;
  padding: 0;
  text-align: center;
  text-indent: 0;
}

Small inline images #

Page code: (all in one line, inside the line)

<span class="chapter-emoji-wrapper">
  <svg viewBox="0 0 54 51" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg"  version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" >
    <image width=[actual-width] height=[actual-height] xlink:href="../Images/emoji.png"/>
  </svg>
</span>

CSS:

span.chapter-emoji-wrapper {
  margin: 0;
  padding: 0;
}

span.chapter-emoji-wrapper svg {
  max-width: 1em;
  max-height: 1em;
  margin: 0;
  padding: 0;
}

Footnotes #

Refs:

Math #

Refs: