This post is part of So You Want to Make an eBook?. I’m releasing this book in sections on my blog, but when it’s all finished I will offer the whole thing as a single eBook. Everyone who donates toward its production (use the coffee cups to the right, note that it’s because of this effort) will get a free copy of this eBook. You can find all the posts here.
So now that you know what to look for, it’s time to search and replace again (and you’ll see how these styles are used at the same time).
Replaced <p><center> with <p class="center>.
Replaced </center> with a blank
Why: Formatting should be handled by CSS.
Replaced & with &
Why: It’s an HTML entity that’s common and will completely bork your conversion, but I forgot in the prior section.
Replaced <i> with <span class="i">
Replaced </i> with </span>
Replaced <u> with <span class="u">
Replaced </u> with </span>
Replaced <b> with <span class="b">
Replaced </b> with </span>
Replaced <sup> with <span class="sup">
Replaced </sup> with </span>
Replaced <strike> with <span class="strike">
Replaced </strike> with </span>
Why: Handle text font changes with CSS.
You’ll have to do blockquoting and first paragraph non-indention manually. Simply change the opening <p> tag to <p class="blockquote"> or <p class="first">. Again, you’ll have to make sure there’s no funky cases that were not caught by our simple search and replace – such as <p align="center">. You’ll want to change those to use our CSS elements.
Realistically, these can only be caught by hand, since there are so many possible variables.
Pagebreaks are a special case, used when you need a pagebreak no matter where the text is. This is most commonly seen in the section with the title page, copyright page, credits, dedication, and so on. You achieve this effect like so (remember the pagebreak happens before this tag!):
<p class="pagebreak"> </p>
As an important side note: Pagebreaks of this type do not appear in the Calibre eBook viewer. They do appear in actual eReaders.
Do NOT use this for section breaks! For section breaks, I recommend either using an image or this:
<p class="center>* * * </p>
You do not need a pagebreak at the end of a chapter (because we’ll make each chapter a separate file).
Footnotes and endnotes must also be done by hand. We will convert them all to endnotes at this time. While you can "footnotes" at the end of each chapter, you can’t mimic text in this way. However, by putting return links with each note, the difference to your readers is trivial.
Where the footnote (the little superscript number) is in the text, you will format it in this way (the latin is "lorem ipsum", or generic filler text):
Lorem ipsum dolor sit amet, consectetur adipiscing elit <a name="footnote01_r"><span class="sup"><a href="footnotes.html#footnote01">1</a></span>. Sed massa quam
Let’s look at these parts:
<a name=" "> – This serves as an "anchor" for our hyperlink. We are actually defining the return point here.
<span class="sup"> and </span> – Creating the superscript appearance.
<a href="footnotes.html#footnote01"> and </a> – Creates a hyperlink. We will create the actual file "footnotes.html" below, in Chapter Decisions. The part you may not have seen before comes after the pound or number sign. This links to a specific point in the document. This is the key to making good footnotes or endnotes. Obviously, you’ll put 02 for the second footnote, and so on.
Now go to the end of your ginormous document. This is where the actual end (or foot) notes will go. Here’s a quick example of what that section will look like.
<p class="pagebreak"> </p>
<p class="title"><span class="b">Footnotes</span></p>
<p> </p>
<p><a name="footnote01">1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="chapter!!.html#footnote01_r">Go back</a></p>
<p> </p>
So you see how that part after the pound sign works? It will return your reader right back to where they left off. This is one of those things that gets ignored when it’s done well, but is extremely annoying when it’s done poorly.
Here’s the rough part. See those two exclamation points? You have to replace those with the actual file name… but we haven’t created it yet. So two exclamation points are serving as our marker text. (You can use any unlikely character set – such as BOOG – but you don’t really have two exclamation points in a row somewhere else in your text, do you?) We will catch up with this later. It will make your life much easier if you note down on a bit of paper what chapters each footnote came from.
While you’re at it, if there are smart quotes, replace them all with " (there weren’t in my example). This is actually something fairly trivial to do in Notepad++, under the menu item TextFx. It’s worth noting that I do not think smart quotes are useful – they’re only noticeable to the reader when you screw up. If they’re all " characters, your mistakes disappear.
If you (or your customer) is dead-set on smart quotes, use “ and ” (left double quote and right double quote) respectively.
You might also want to make it so that each paragraph (the space inbetween <p> and </p> ) is a single line. I find it easier to navigate the document that way.
Some eReaders are able to actively follow links to the web, so if you have a link to your website or where they can buy more books, create active links to them in your book! You will do it like this:
<a href="https://www.mywebsite.com/">Go visit my website!</a>
Because some of your readers may not be able to follow the links, you may wish to display the actual web address as well:
Go visit my website at <a href="https://www.mywebsite.com/">www.mywebsite.com</a>
One note: Some kinds of complicated links, such as affiliate links for Amazon, do not meet the ePub standard because of the & sign. Using an URL shortener such as TinyUrl (https://tinyurl.com), bit.ly (https://bit.ly) or Google’s URL shortener (https://goo.gl/) can help work around this problem.
Further, many marketplaces explicitly forbid affiliate links.
Save this. Save a backup of it. Next, images.
This post was part of So You Want to Make an eBook?. I’m releasing this book in sections on my blog, but when it’s all finished I will offer the whole thing as a single eBook. Everyone who donates toward its production (use the coffee cups to the right, note that it’s because of this effort) will get a free copy of this eBook. You can find all the posts here.
Question:
Can you explain more about why you using CSS for formatting instead of the logical HTML tags, and assigning the CSS to those HTML tags, if you want to control how they render?
For instance, instead of rendering italics with <span class="i">, why not render it with the logical tag <em>?
Also, do you know how/whether the inbuilt audio reader in the Kindle (I haven't heard of other e-readers that read aloud, but I presume it's coming) will recognize your CSS and offer emphasis when reading, or does stripping all logical tags lead the whole work to be read flat?
I use the CSS because that's how I learned it. 🙂 The standard ( does support <em> and <strong>.
I'm not likely to change, though, for two reasons. I've been doing HTML for hand for a while, so the closer to the old tags, the more likely I am to remember it. 🙂
Secondly, I use it here because of how I learn. I like taking bits of things and changing them – the examples make it clear how you can mix and match.
And a good point with the text-to-speech. I'll have to check; I really don't know. Thanks for pointing that out – if that's the case, I'll revise the guide appropriately.