Why EPUB?
EPUB is a format used primarily for e-books. It made with the intention to give users the best reading experience on a digital device.
Well, PDF is also good for reading! - someone that i just made into an enemy for life
Well, yeah, but no. PDF is great for its own purpose, but that purpose is not reading books. PDF or Portable Document Format, is made for (you guessed it) documents. They often need their specified formatting to get their point made. Margin should be this, font this, font size this, page numbers here and yada yada. PDF makes it look great on that specified A4 paper, but what if you dont have A4 paper?
This is where EPUB shines. It adapts to whatever device you are using as well as give you the option to change it to best suit your reading experience. Reading on a wide screen tablet, you may want the text to split in two columns when in landscape mode? EPUB can do that. You may not like to keep scrolling all over the document whenever you reach the end of the line? EPUB does that. You may get tired of all the zooming to read the text? EPUB handles that.
It is kind of like a miracle drug for e-books, but i still see people stuck with PDF for reasons i can not understand. Unless you are printing the PDF, then you might probably be better off reading an EPUB version.
RANT OVER
How does EPUB work?
Simply put? It's a website.
An EPUB file is simply a zip folder (that has had the .zip extension changed to .epub) containing a mandatory content.opf file and a toc.ncx as well as the html (or xhtml, more on that later), images and css (style files) that makes up your book.
EPUB readers works exactly like browsers (which is pretty darn smart if you ask me). Websites and "normal" programs, while people think they are the same, they are pretty different. A program you design, code, create and distrubute the end product. Websites differ, they are designed and coded, but never created, they send the design and code to the browser to create the website the way it sees
Why did i say this? It will hopefully be clear when i tell you how to easiest make epubs.
How to read EPUBs?
Every device probably have a ton of different readers. The ones i've used are;
- Windows Desktop - Calibre
- Windows Apps - Bazaar
- Browser - Google Books
- Android - MoonReader+ (This is by far my favorite)
How to make EPUBs?
The best way to make EPUBs is probably to use a tool like Sigil and learn some web-programming, namely html and css. I will try to give a rundown of what might be good to know and such, but i strongly recommend learning or at least be very quick to google html and css. There are a lot of better tutorials on these things out there.
HTML
HTML contains the main structure of the book, it specifies headers, paragraphs, the actual text, links and images. An empty html file in Sigil looks like this:
<?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">
<head>
<title></title>
</head>
<body>
<p> </p>
</body>
</html>
With the exceptiopn of the first two lines that specifies metadata, everything has a start and an end tag. The end tag looks like the start tag, with the exception of a / before the tag name. There are exceptions to this, <br> is a tag that specifies a new line (break row) and does not need a ending tag. <br> has another problem that will be mentioned later
Anyway, examples are often easiest to learn from, so here is a shorted version of a file that has some stuff in it.
<?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">
<head>
<title></title>
<link href="../Styles/StyleSheet.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<h2 class="big_title">The Place You Called From</h2>
<p id="title_author"> Sugaru Miaki </p>
<p><b>Associated Names:</b> The Place I Called From <u>&</u>
君が電話をかけていた場所 (メディアワークス文庫)</p>
<p><b>The Place You Called From</b> is a novel by Sugaru Miaki, also known as Fafoo, writer of <b>Starting Over</b>,<b> Three Days of Happiness</b>, and <b>Pain, Pain, Go Away</b>.</p>
<p><b>Description:</b> The story is about a boy entering high school, who answers a strange call from a public phone one night. The caller challenges him to a bet: She’ll remove the birthmark which he sees as the cause of so many problems, and he’ll have fifty days to win the heart of a girl he’d considered far beyond his reach. And with this, a very strange summer begins. </p>
</body>
</html>
This is a (shortened) description file for the novel The Place You Called From, lets break it down.
The first difference is the <link> tag inside the <head> tag, this one tells the file that i will use (link to) a another document that contains all the style for the text. href says its a link, double dot says the parent folder of the one i'm in, Styles is the name of the folder containing the file, and StyleSheet.css is the name of the file. I also specify that it is a text/css file and stylesheet.
This line can be copy-pasted and just make sure your folder and file name are correct, everything else should be left like it is.
Next comes the body tag. This tag contains all the juicy stuff, everything you see is here. <h2 class="big_title">The Place You Called From</h2> tells a lot. h2 is a Header, more specifically header 2, which is smaller than header 1. class="big_title" is one of the more important things here.
When designing html files you can reference things in 3 different ways.
- 1. Tags - Everything that has this tag.
- 2. Class - Everything part of this class.
- 3. ID - That one thing that has this ID.
- Extra: you can actually combine these, but thats often overkill. Example being things that are part of class A and B.
Now we know that the class="big_title" only specifies that this header tag is part of the "big_title" class. Multiple tags can share the same class, but only one tag can use an ID. The line below uses exactly this, an ID but does this for the <p> tag, which specifies a paragraph (this is the tag you want book text to be placed within).
CSS
Now that we know what html does (more or less), lets move to the CSS, Cascade Style Sheet. This does what you could guess from the name, it styles and it can look like this.
h1{
text-align: center;
}
h2{
text-align: center;
}
h3{
text-align: center;
}
#title_author
{
text-align: center;
font-weight: bold;
font-size: 120%;
}
.tl_note{
font-size: 80%;
}
.big_title
{
font-size: 220%;
}
.image_full {
display: block;
text-align: center;
text-indent: 0;
padding: 0;
margin: 0;
page-break-inside: avoid;
}
.image_portrait {
clear: both;
width: auto;
max-height: 100%;
max-width: 100%;
overflow: hidden;
page-break-inside: avoid;
height: 100%;
text-indent: 0;
}
By writing a tag without any prefix, we are referring to all of that tag, like h1, h2 and h3. When we use a # sign in front of something, we are referring to the ID, and when we use a . (dot) we mean a class.
This is the code we linked the file to in the other snippet, namely StyleSheet.css and as we can see, the big_title class exist here. It specifies that the font-size should be 220%. Note the way its written. reference followed by curly brackets. Inside them you write the property you want to change, be it color, font size, alignment, whatever, followed by a colon and your desired change before ending it with a semicolon and the closing curly bracket.
There are a lot of people struggling on these things on google (quite often beginners), so there is often a lot of help to find with a quick google search.
Do and Don't
I might have already scared everyone away, and if so, i'm sorry! But we passed the hard and boring stuff. But for those left, I'd like to talk about what i think we should always do and don't do when designing our EPUBs.
Don't
- Don't add your own fonts. There are plenty built in ones already and you do not need that one extra font to show that one tiny thing. Some readers change the font to their standard ones anyway.
- Don't convert EPUBs from PDF. Since PDF doesnt care in what order text comes, it can get misaligned when converted to EPUB. Additionally, ligatures can mess everything up. the word first contains an f followed by an i, some pdf fonts uses one character to show this. Converting this to EPUB often removes both the f and i completely, since there is no character able to represent it.
- If you convert PDF to EPUB, then at least go through it once. Fix headlines and the table of content at least.
- Dont use too much styling. People want to read the text, if people want to change the styling (font size and such) they can do it on their reader. You dont have to baby them. This also goes for extra tags, it makes the code cluttered and invites errors with different readers. I'd say dont style your paragraphs/main text. Let the reader do that that.
- Dont style directly in the html. Below you see all three errors; too much css, extra span tags for no reason, and css in the middle of the html.
<h1 class="c0 c2" id="h.ac0hc6rkt56t"><span style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 624.00px; height: 444.00px;"> <img alt="shuumatsuc1intro.png" src="../Images/image08.png" style="width: 624.00px; height: 444.00px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""/> </span><span>Chapter 1: Before This World Ends - A</span></h1> <p class="c0 c1"><span>The night before the final battle. </span></p>
This could instead be like this. Only add what you need, and style is kept in a seperate file. Since that clutter is repeated all over the place, it increases file size as well.
<h1 class="c0 c2" id="h.ac0hc6rkt56t">Chapter 1: Before This World Ends - A</h1> <p class="c0 c1">The night before the final battle.</p> - Don't use 4KUHDSUPERRESOLUTION for all images. Think of the file size, if you have 10 images all of them being 5 MB, then your EPUB is at least 50 MB, use JPG and compress your images, often you wont even see the full resolution on a monitor. If you'd like, you can make the pictures clickable and link to the full resolution online, or add all the links in the end.
Do
- Use a seperate html file for every chapter. Sigil makes connecting them easy anyway. With separete files the book is easier to work with and can be possibly be better displayed for some devices (page breaks and such).
- Use h1, h2, h3 and so on tags accordingly! Sigil can automatically create a table of contents for you, WHICH YOU SHOULD ALWAYS HAVE, so dont make your life harder than it have to be. h1 for either book title or grand headline, and work your way from there... Example:
h1 - Main Headline
h2 - Sub Headline
h3 - Sub Sub Headline
- Add a table of contents.
- Try to use XHTML instead of HTML, i mentioned this earlier, but here is why. Lets start by saying that both works. There is no difference in the file-format, but the way they are written. XHTML is more strict. <br> as mentioned earlier does not have a closing tag. XHTML requires all tags to be closed. To do this you write it as <br/>. By enforcing that all tags are closed, you can prevent errors and bugs in some EPUB readers.
- Run the Sigil EPUB Sanity Check, mistakes happen, tags that havent been closed and such.
- Open the file in calibre before finishing the EPUB. If the book is part of a series, then specify that, add a description and make sure author, cover art is correct. I love when books that are part of series have that specified.
- Feel free to use links for translator notes and such. MoonReader+ for example makes it possible to open the note on top of the book like a pop-up.
- Do try to put the image tags inside a div tag (<div class="image_box"> <img src="bla.jpg" class="image_portrait"/></div>) This makes positioning and sizing of the image easier as you have a way to specify the place they will rest in. It is also often a good idea to have different classes for portrait and landscape images.
Tips
A tip for people wanting to make good EPUBs is to use the translators website. If you are profficient with html you can use the html code directly from the translators website. Some translator websites have very simple html code, which you can see by pressing F12 or rightclick and inspect element (at least on chrome). Copy and pasting this will give you already written html, but
it can invite weird formatting that looks good on their page, but not in the EPUB. There are cases where the translators dont use <p> tags to set up their text, and in these cases it can get troublesome. Also there are cases where translators use a bunch of <br> and other stuff.
Disclaimer
If i've come out as an ass, I do apologise! Hopefully i managed to help someone (maybe even 2 people!) with making EPUBs. If not, maybe i've managed to bring some annoying or good points into light for other EPUB creators.
This post is longer than i expected... Well Well, no one is gonna read it anyway!
Source: https://www.reddit.com/r/LightNovels/comments/6hwy4m/epub_why_how_do_and_dont/
