EPUB is a digital publishing format that can be opened on many e-reader devices. It is based on HTML, XML, and other open standards. An EPUB file has a .epub file extension and uses the ZIP file format with text files, images, and style sheets to display electronic book content.

1. EPUB
a Workshop
by Beat Oderbolz

2. Standard from the IDPF (International Digital Publishing Forum)
An arrangement of several other standards, mainly:
XHTML, CSS, XML and some more.
3 parts, addressing
• Content (OPS - Open Publication Structure)
• Package Metadata (OPF - Open Packaging Format)
• Archive (OCF - OEBPS Container Format)
It is powerful, straightforward, and non-proprietary
What is EPUB?

3. + Mimetype
+ META-INF
+ OEBPS
EPUP - Structure
Text file: “application/epub+zip”
- Folder
- Folder (Open eBook Publication Structure)
TASKS
• Get the file Example.epub from the folder Workpackage-EPUB.
• Change its extension from .epub to .zip
• Expand it – open the expanded folder.

4. + Mimetype
+ META-INF
+ container.xml
+ OEBPS
EPUP - Structure
Text file: “application/epub+zip”
- Folder
Points to the content.opf file
- Folder (Open eBook Publication Structure)

5. + Mimetype
+ META-INF
+ container.xml
+ OEBPS
+ content.opf
+ toc.ncx
+ Text
+ Images
+ Styles
EPUP - Structure
Text file: “application/epub+zip”
- Folder
Points to the content.opf file
- Folder (Open eBook Publication Structure)
Metadata, file manifest, linear reading order (spine)
Hierarchical Table of Contents
- Folder
- Folder
- Folder

6. + Mimetype
+ META-INF
+ container.xml
+ OEBPS
+ content.opf
+ toc.ncx
+ Text
+ chapter_001.xhtml
+ chapter_002.xhtml
+ chapter_003.xhtml
+ …
+ Images
+ image_001.png
+ image_002.jpg
+ image_003.gif
+ …
+ Styles
+ styles.css
EPUP - Structure
Text file: “application/epub+zip”
- Folder
Points to the content.opf file
- Folder (Open eBook Publication Structure)
Metadata, file manifest, linear reading order (spine)
Hierarchical Table of Contents
- Folder
Chapters (xhtml files)
- Folder
Pictures (png / jpg / gif)
- Folder
CSS Stylesheet(s)

7. EPUB - Sigil

8. EPUB - Sigil
TASKS
•Please open the file Example-for-Sigil.epub in Sigil
•Confirm that it contains:
•3 chapters
•1 big image in the first chapter, 1 small image in the second
•1 stylesheet linked to the chapters

9. The general form of an HTML element
<tag attribute1="value1" attribute2="value2">content</tag>
<a href=http://www.w3schools.com target="_blank">link</a>
CSS - Cascading Style Sheets
selector {
property1: value1;
property2: value2;
...;
propertyn: valuen;
}
EPUB – Sigil, HTML & CSS
p {
font-weight: bold;
margin-left: 1em;
margin-right: 1em;
text-align: justify;
}

10. EPUB – Sigil, HTML & CSS
www.w3schools.com
HTML / HTML5 / CSS / JavaScript / XML / …
Tutorials & References
O’Reilly Pocket References
For HTML/XHTML and CSS

11. EPUB – Sigil, HTML & CSS
TASKS
Make the following changes to the EPUB:
• Change the color of the <h1> tag
• Reduce the indent of the main text to zero
• In the stylesheet, create a class .bold (use .italic as basis)
• Change all text in italic to bold
• Create your own class(es) and use them on the content

12. 3 basic possibilities:
- Write directly into Sigil
- Copy / Paste
- Import HTML file
EPUB – Getting Text into Sigil

13. EPUB – Getting Text into Sigil
TASKS
• Open the folder Import into Sigil
• Copy/paste the text of the first page of the pfd-file
A short History of NATO.pdf into the chapter section0003.xhtml
• Import the html-file NATO – The Washington Treaty.html into
your eBook

14. • Clear out unnecessary code and text
• Link the stylesheet into your new chapter
• Headlines inside the correct <h> tags
• Body-text inside <p> tags (no <div>, no <span>)
• Format the text using the stylesheet formats
• Add formats to the stylesheet if needed
• Validate your EPUB and fix Errors
EPUB – Cleaning up & Formating

15. EPUB – Cleaning up & Formating
TASKS
Clean up the code of the two imports and reformat it.
1. Clear out unnecessary code and text
2. Link the stylesheet into your new chapter(s)
3. Headlines inside the correct <h> tags
4. All Body-text inside <p> tags (no <div>, no <span>)
5. Format the text using the stylesheet formats
6. Add formats to the stylesheet if needed
7. Validate your EPUB and fix Errors

16. EPUB formating is like HTML
coding in the early days…
…only worse.

17. EPUB – The Golden Rule of Formating
Keep it simple!
Stay away from elaborate design ideas
Use a stylesheet with a limited set of styles
Clean code is nice code

18. • Pictures / Coverpage
• Creating a TOC
• Metadata
• Advanced Stuff
• Embedding Fonts
• Using EPUB3
EPUB – Sigil: the Remains of the Day…

19. EPUB – Sigil: the Remains of the Day…
TASKS
• Import the pictures sign_warning.png & IntroToEPUB-Cover.png
into Sigil
• Use sign_warning.png somewhere in your eBook: aligned on
the left side, with text floating around it.
• Use IntroToEPUB-Cover.png as a Cover Image for your eBook
• Enter some more titles - <h1>, <h2> and <h3> and create a TOC
• Enter the mandatory metadata

20. Or: How to get your eBook onto reading devices
EPUB - Distribution

21. www.w3schools.com
HTML / HTML5 / CSS / JavaScript / XML / …
Tutorials & References
Resources…
http://code.google.com/p/sigil/
Multi-platform EPUB ebook editor «Sigil»
Download & Documentation
http://calibre-ebook.com/
Multi-platform and open source e-book format conversion &
library management application «Calibre»
Download & Documentation