Take pride in your eBook formatting (Part VII)
Posted by Guido ·Jan 21
This is the seventh installment of a series of articles. To read the previous one, please click here
As you can probably tell by now from the last installment, we are by now getting pretty close to real tangible results that you can actually use, so let’s press on without delay.
The first thing we are going to do next is to turn our previously marked up document and turn it into a valid HTML file. In order to do that, we will have to wrap our text with proper header information. Simply use the sample below and paste the next few lines into the beginning of your existing text file.
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
<style type="text/css">
html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, pre, table, th, td, tr { margin: 0; padding: 0em; }
p
{
text-indent: 1.5em;
margin-bottom: 0.2em;
}
</style>
</head>
<body>
Once you have done that, copy the following line and insert it at the very end of your text file.
</body>
We have now wrapped your entire marked-up book text with proper HTML headers and have a valid XHTML file. Make sure to save it with an .html
extension, and then load the file in your web browser. You can now already see a preliminary version of your book. You might want to resize the browser window to roughly resemble the size of an eBook reader and you will better see how the text flows on a smaller display. Exciting, isn’t it?
You may have noticed that we have the first style sheet information in our file now. It is very basic and determines only the look of the <p> tags.
p
{
text-indent: 1.5em;
margin-bottom: 0.2em;
}
Let us play with this paragraph style for a moment so you get a feel for what it does and how you can affect its results.
For example, change the text-indent value to 5em, save the file and then hit the Reload button in your browser. You should now see that the first-line indentation in your book has changed quite a bit — excessively so, I should say.
Change it back to its original value and let us adjust the margin-bottom value to 4em. Save the file and refresh it in your browser.
As you will see, we have now dramatically increased the spacing between individual paragraphs. We are on a roll. Are you feeling dangerous, yet? If so, let’s do something radical!
Change the margin value back to its original value and include the following line right underneath it.
font-weight: bold;
I am sure you know what is going to happen once we save this file and refresh it in the browser. As expected, all of your text is now in bold typeface. Pretty cool, but let’s take it up another notch. Insert the following line underneath the font-weight line.
font-size: 2em;
If you view this version in your browser, you now see that your book is in a really large, bold print. Very cool, isn’t it? Especially, since this is just how our chapter headings should look like… All we would need is a way to tell the browser, which those chapter headings are. Which gives me an idea.
Replace the paragraph style in your file with the following block.
p
{
text-indent: 1.5em;
margin-bottom: 0.2em;
}
p.chapter
{
text-indent: 1.5em;
font-weight: bold;
font-size: 2em;
}
If you remember how style sheets work, you already see what is happening. We have created a second paragraph style named “chapter” and we will be using that one to style our chapter headings.
Here is a short sample text I will be using in the following examples to show you how to massage the different parts of your eBook. It’s a little piece from my book Terrorlord from the “Jason Dark: Ghost Hunter” series, in case you’re curious. As you can see, the example has chapter headings and I have wrapped them with a parametrized paragraph tag. As a result the browser will use the chapter style to render the text between these paragraphs, while using the standard paragraph style for the other text blocks.
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
<style type="text/css">
html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, pre, table, th, td, tr { margin: 0; padding: 0em; }
p
{
text-indent: 1.5em;
margin-bottom: 0.2em;
}
p.chapter
{
text-indent: 1.5em;
font-weight: bold;
font-size: 2em;
}
</style>
</head>
<body>
<p class="chapter">CHAPTER 1</p>
<p>Jason Dark was leaning over the chess board when Siu Lin entered the room with a dog-eared book in her hands.</p>
<p>“Trying to solve another one of the London Illustrated’s chess challenges?” she asked.</p>
<p class="chapter">CHAPTER 2</p>
<p>She had a smug smile on her face when she finally looked at Dark, but it disappeared the moment she saw his expression.</p>
<p>Dark had gone entirely pale as all blood seemed to have drained from his face. For a moment his eyes stared straight ahead, unfocused, not seeing anything. His lips were trembling and he clutched his left arm.</p>
<p>***</p>
</body>
This may all look a little garbled right now, because of the blog layout, but feel free to copy this and save it to use it as your sandbox playground, if you wish. If you load it up in the browser, this thing starts to look like a book, actually, doesn’t it? And it will only get better from here.
When we start a new chapter in our book, we usually want it to start on a new page, and styles can help us do that. Insert the following line in the chapter
paragraph style.
page-break-before: always;
Unfortunately, web browsers do not handle page breaks properly — traditionally, there are no page breaks in web pages — so you won’t see them when you preview your book right now. If we were to load it onto an eBook reader, though, it would work. Right now you will just have to take my word for it.
Page breaks are nice and all, but usually, we would not want the chapter heading to be right at the top of the page. It should be moved down a little, leaving some white space around it, at the top and at the bottom. Very easy exercise, really. All you have to do is insert the following to lines in the “chapter” style.
margin-top:5em;
margin-bottom:2em;
Save it and refresh your browser, and you will see that you now have nice, clean spacing around the “CHAPTER 1” and “CHAPTER 2” headings in our example. And all of that without really changing your actual book text itself.
We’re doing it all through styles, which means if you think the white space is a bit too much, all you have to do is change the style values and it will automatically affect all your chapter headings throughout the entire book.
Now, you may have noticed the three stars at the end of my eBook source file. I will use these for another specialized styling, because I want these three stars to be centered on the page, something you will encounter in most books at one point or another. Someone versed in HTML would probably go about and simply wrap these stars with <center>
and </center>
tags. Sadly, that’s a bad idea when it comes to eBooks.
Centering text in eBooks is one of the most error prone undertakings because device manufacturers seem to have different takes on what “centering” means. Sounds ridiculous, I know, but I am not lying to you.
To create foolproof centering we have to double-stitch our approach, to make sure every device understands exactly what it is we’re trying to do.
First we will include the following two styles in our file.
p.centered
{
text-indent: 0em;
text-align: center;
}
span.centered
{
text-indent: 0em;
text-align: center;
}
Since both declarations look identical, this might seem redundant, but sadly, some devices, like the iPad, require the <span>
tag for centered elements, while others require the more commonly used <p>
tag. I think it is also important to point out that the text-indent: 0em;
setting is important in this context. Without it, the device would actually render our text slightly off-center because it would center the text and then add a 1.5em indentation to it. Not what we want, so we have to reset the indentation to zero.
To center our text line, we will now wrap it with the proper HTML tags and make it look like this.
<p class="centered"><span class="centered">***</span></p>
This may not look nice in code form, but it solves all our problems and the line will now be centered correctly on all devices I have come across. I am enclosing here a little preview, roughly what the example looks like with all our little improvements in place.
CHAPTER 1
Jason Dark was leaning over the chess board when Siu Lin entered the room with a dog-eared book in her hands.
“Trying to solve another one of the London Illustrated’s chess challenges?” she asked.
CHAPTER 2
She had a smug smile on her face when she finally looked at Dark, but it disappeared the moment she saw his expression.
Dark had gone entirely pale as all blood seemed to have drained from his face. For a moment his eyes stared straight ahead, unfocused, not seeing anything. His lips were trembling and he clutched his left arm.
***
In all of this, you may have noticed that I did not set any default font face, size or text justification. This is not an oversight, let me tell you. I did that on purpose.
eBook readers allow users to use their preferred settings. Font size, justification and font type are very personal things and who are we to mess with what people like? By not setting our own values, the eBook device will automatically fall back onto the user preferences and immediately display our book in the user’s preferred way. It may be a small thing, but trust me, it goes over really well with your readers. Usability is key!
Go ahead now, and make the proper adjustments to your own book file. Mark up your chapter headings and the centered text portions, adjust the styles to your linking and take a look at your own book. As you may have noticed, it has already turned into a pretty reliable and predictable thing. Let me stress again at this point, that this is the reason why you do not want to export your eBooks straight from a word processor. See, how much control you have over the look and feel of your book with just a few simple steps? And it only gets better…
In the next installment we will add still some more frills to our book and then in the not too distant future, go to the next step, building the actual eBook in Calibre.
Part I • Part II • Part III • Part IV • Part V • Part VI • Part VII • Part VIII • Part IX

Also, don’t forget to check out my book Zen of eBook Formatting that is filled with tips, techniques and valuable information about the eBook formatting process.






134 comments
Comment by Deb on January 23, 2011 at 2:21 pm
Waiting…. :). I’m working a short story through right now, just to get some practice. I think I’ll brave the world of importing it to Calibre myself for now. Eagerly awaiting the “frills” installment.
Comment by Kathy on February 12, 2011 at 4:42 pm
How do you load the html file into your web browser?
Comment by Guido on February 12, 2011 at 8:10 pm
The easiest way is to simply double-click it. The other way is to open your browser and then in the “File” menu, select “Open File.”
Comment by Glenn McCreedy on February 13, 2011 at 8:02 pm
Wow, it is so true that CSS is the way to go. Set it and let it roll. The reader’s experience is paramount so give the reader the control and flexibility inherent in the device, facilitated by the publisher’s formatting. I love it you have taken into consideration the different needs of devices and formats.
Comment by Patrick Samphire on February 14, 2011 at 1:33 pm
Hi Guido,
I’ve been reading this series of posts with enormous interest. Thank you. It’s fantastically clear and helpful, and you make the whole process seem very easy.
I had a question about the html sample you give above. The html isn’t valid in that it doesn’t have an html tag and it doesn’t have a title tag. I’m wondering if that’s an oversight or if it’s necessary for the process of making ebooks.
Thanks
Comment by Guido on February 14, 2011 at 3:02 pm
Patrick, that is actually deliberate. I haven’t entirely read up on why that is, but if you include the actual tags Calibre has problems converting it into a proper eBook file.
Comment by Patrick Samphire on February 15, 2011 at 1:44 am
Thanks!
Comment by Larissa Lyons on February 26, 2011 at 3:48 pm
Guido – Hi. Whew! I’m finally working through all your fabulous posts & learning a ton. This is my first exposure to css; thanks for making it (relatively 🙂 ) painless. A question for you: I want the chapter headings centered but I’m not sure how to go about combining the p.chapter class with the two on centering. Can you please point me in the right direction? Thanks!
Comment by Guido on February 26, 2011 at 4:52 pm
Larissa, the easiest way to do it by using multiple parameters for the style. It would look something like this
<p class=”chapter centered”><span class=”centered”>CHAPTER 1</span></p>
Tagging it like this will first use the “chapter” paragraph style on the text and then also the “centered” paragraph style.
Comment by Dave Atkinson on July 4, 2011 at 10:24 am
Hi Guido
Enormous thanks for your efforts in putting all this together. However I’ve got a problem. Using your sandbox sample above (my material gives the same error) neither Firefox nor Chrome will accept the code as valid. The error is: “This page contains the following errors:
error on line 19 at column 1: Extra content at the end of the document
error on line 19 at column 1: Encoding error
Below is a rendering of the page up to the first error.
html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, pre, table, th, td, tr { margin: 0; padding: 0.1em; } p { text-indent: 1.5em; margin-bottom: 0.2em; } p.chapter { text-indent: 1.5em; font-weight: bold; font-size: 2em; }”
Can you throw any light on this?
Thanks, Dave
Comment by Guido on July 4, 2011 at 12:07 pm
Dave,
There are a couple of errors in the text you pasted. Hard to tell if it just happened because you copied it over and it was reformatted, or if it’s in your text.
Send me your file as an email and I’ll be happy to take a look.
Comment by Dave Atkinson on July 7, 2011 at 9:33 am
Guido –
Found the problem myself – red face day…….!
Thanks anyway,
Dave
Comment by MoJo on July 19, 2011 at 5:40 pm
This is great so far, great info and wonderfully over explained, which is exactly how I like it. Too many people expect you know everything and they think you should get it from the jump. Love the way you break it down and show why things need to be done in a particular way.
One thing. I got stopped on the last two pieces of code you were talking about. The center – center span and ***.
For me, I really didn’t know where to put it and had to knock around about to get it to work, I guess I got it to work, it looks right but being green with HTML, I’m not sure.
Suggestion: At the end of each section, maybe the mark up of all the code discussed in the correct placement, (as you do with your 2 chapter example code) so we can see we are doing it right. This might be asking too much but it would help to know I am placing the code correctly. I’m thinking more for others who come here to glean your expertise as I feel I will have it before too long.
Thanks for the great work Guido, just great.
Comment by Cora on July 25, 2011 at 7:49 pm
First of all, thanks a lot for this great guide. It has been enormously helpful in formatting my e-books.
However, I have run into a slight problem on my most recent project, which includes a few lines quoted from a (fictional) newspaper article. I want to set the article visually apart from the main text.
I assume that this is done via style, so I created separate styles for the newspaper headline and text. However, I want to indent the entire newspaper text, whereas the style only indents the first line of a paragraph. Any idea of how this could be achieved? Does the
Comment by Cora on July 25, 2011 at 7:50 pm
Oops. I still don’t know whether the blockquote tag – cause that’s what meant – works for e-readers, but it obviously works for comments.
Comment by Guido on July 25, 2011 at 8:24 pm
Cora, you should use the margin-left attribute to indent an entire block of text, like your newspaper article, somewhat like this…
p.article { margin-left:2em; text-indent:0em; }
Comment by Cora on July 25, 2011 at 9:59 pm
Thanks. I’ll try that.
Comment by Mark on August 25, 2011 at 3:30 pm
Sigil does a great job of importing and validating html. The developers put a lot of work into making sure the finished ebook complies with the ePub standard.
http://code.google.com/p/sigil/
Comment by Guido on August 25, 2011 at 4:15 pm
Yeah, but as I pointed out before on many occasions, word processors make for poor e-book formatters, usually. While they do output ePub files, their quality is generally dubious at best.
Comment by Mark on August 25, 2011 at 7:31 pm
Sigil isn’t a word processor. I’ll shutup now.
Comment by Guido on August 25, 2011 at 7:32 pm
Ah, sorry, my bad. I remember I looked at it a long time ago and didn’t like it, but it may have been that I simply didn’t spend enough time with it.
Comment by Jane on August 26, 2011 at 8:48 am
Guido, before asking my question I’d like to say how much I appreciate your making “Take Pride” freely available. I have some knowledge of html and css, but have found your detailed hand-holding extremely helpful. I have read through all nine parts twice now, and found other people’s comments and queries, and your replies, useful too.
I am just embarking on the ebook formatting of an epic-length poem for my partner. Every line – and there are thousands of them! – (apart from links to other poems) is centred. (Whether the links will work or not is perhaps another question…) I have wrapped every stanza in a pair of paragraph tags (these are centred via a separate style sheet), and used line breaks for “carriage returns”. Then I read above about “double-stitching” and the advisability of wrapping centred text within span tags as well. Gulp!
So, I need to ask, firstly, are my line breaks permissable within a span, so I only need to add one pair of span tags per stanza (as opposed to each line)? Secondly, whichever way I need to add the span tags (per paragraph or per line), do you know of a quick way to do it?
I hope I’ve explained this clearly enough, and that they’re not stupid questions. Some of your supportive hand-holding would be very welcome!
Comment by Guido on August 26, 2011 at 11:27 am
One span per stanza will work just fine. Line breaks are permissible within spans. That’s what I do often to cut down on code size. Since you say, the entire book is a poem, the fastest way to add the span to all stanzas would probably be to search and replace all occurrences of your opening <p class=”stanza”> tag with something like <p class=”stanza”><span class=”centered”> and the do the same thing with the closing tags where you replace all occurrences of </p> with </span></p>. That should do the trick for you in a matter of seconds.
Comment by Jane on August 27, 2011 at 12:19 am
I’m very relieved! Thanks so much for your helpful, reassuring and prompt response.
Comment by Terry Simpson on September 29, 2011 at 3:39 pm
Stayed up last night learning this and formatted my book. Wonderful results. On the normal apps, digital editions etc all shows well, but on one app (Moonreader) that I use on my tablet and my phone, my chapters aren’t showing formatted and centered. They instead appear at the top left without any formatting. Any particular reason?
Comment by Guido on September 29, 2011 at 3:45 pm
I’ve never heard of Moonreader, so I’m not at all familiar with it. If it is the only one with issues, however, the odds are that it is a software bug on their end. Still, it might be worth investigating.
Comment by Nicki on September 29, 2011 at 4:10 pm
Hi Guido,
I have followed your instructions for a couple of eBooks now and have found it very helpful. I pasted the style setup you presented in this series and added extra styles as needed.
I just wanted to report that I’ve had a big problem with the padding, which was set here:
html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, pre, table, th, td, tr { margin: 0; padding: 0.1em;
On Kindle (via Calibre) the entire text of the eBook is substantially indented, I didn’t notice this on HTML or the Kindle PC app but to my dismay it is very obvious on an actual Kindle (I only just bought one). I did notice it was indented in the KDP preview window, but I thought it was an error with the preview software as I was so sure my html was squeaky clean after following all these steps to the letter. Can you comment on the reason for including this padding?
Comment by Guido on September 29, 2011 at 5:17 pm
I thought I posted this here before, but it may just have gotten lost. Change the reset line to this
html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, pre, table, th, td, tr { margin: 0; padding: 0em; }
Unfortunately the Kindle handles neither em-spacing nor right margins and padding correctly, so yes, you do not want to add all-around margins.
Comment by Marie Loughin on October 1, 2011 at 4:38 pm
Hello Guido,
I’ve included some poetry in my novel and would like to prevent page breaks in the middle of a stanza. Is that possible?
(Like everyone else here, I’ve found your advice extremely helpful. I’m thinking of naming my next cat after you (since I’m not having any more kids).)
Comment by Guido on October 1, 2011 at 5:11 pm
Hahaha, Marie, naming a cat after me. that is priceless. 🙂 Thank you.
There is no way to prevent a page-break in a stanza, per se. If the screen ends, well, then the screen ends and the text needs to be broken onto the next page. The only thing you could do is to start the poem on a new page so that you can be certain it won’t have to wrap to the next page – unless it is too long to fit on a single page, of course. Unfortunately, there is a possibility, that this creates a pretty empty page just before the poem, which is also very unsightly. So you will have to chose what you consider to be the lesser of the two evils.
Comment by Marie Loughin on October 3, 2011 at 10:30 pm
Huh! That surprises me! Thanks for the response. I won’t spend any more time trying to figure it out.
Comment by Tina on October 19, 2011 at 7:05 am
I seem to be having trouble getting chapter headings centered. I’m using the tag you posted above for Larissa:
CHAPTER 1
and it centers the text but does not apply the chapter formatting (bold type, larger size, etc). I’m assuming I need to do something else in the style sheet to combine the two parameters, but I haven’t figured it out. Any tips? Thanks.
Comment by Tina on October 19, 2011 at 8:11 am
Never mind. I think I figured out the chapter centering.
I do have another question, though- if I have a title page, copy right page, and acknowledgements before chapter 1 of my book starts, and I want each of them on a separate page, how do I insert that page break before each one?
Comment by Guido on October 19, 2011 at 10:26 pm
If this does not work, then there is something wrong with your code. The way I posted it for Larissa is how you apply multiple styles to a tag. You have to make sure, however, that one style is not overwriting the other.
If, for example, one style sets the font to bold and then the other one sets it back to normal, evidently, you have a problem.
If all else fails, feel free to email me your HTML file and I’ll take a look.
Comment by Guido on October 19, 2011 at 10:29 pm
To create page breaks you should create a special style for that, like the one I am printing below.
p.pagebreak { page-break-before:always; }
In your HTML section you ca now say something like this
<p class="pagebreak centered"><span class="centered">Acknowledgements</span></p>
Comment by Mark on October 26, 2011 at 5:32 am
For Kindle the mobi tag will also work for page breaks. I wasn’t aware that page-break-before:always works too. It’s a much cleaner solution.
Comment by Mark on October 26, 2011 at 5:34 am
… the mobi tag mbp:pagebreak within angle brackets (last preceded by a slash) …
Comment by Mickey B on November 17, 2011 at 1:01 pm
Is there a way to make all chapters centered in an html doc? Seems like you are showing how to do it on an individual line but what could you add in the chapter style section:
p.chapter
{
text-indent: 1.5em;
font-weight: bold;
font-size: 2em;
to make it work for the whole thing, maybe you said it and I am just not seeing it. Maybe this is not a desirable method for some reason.
If you or anyone else can answer this, please let me know.
Wonderful guidance Guido.
PS: I had too many typos in my previous post, I rewrote it so it would make more sense.
Comment by Guido on November 17, 2011 at 1:34 pm
I am not sure I understand what you are trying to say. Are you asking a question or making a point?
Comment by Mickey B on November 18, 2011 at 12:16 pm
I was asking a question. It could be I just don’t know enough to ask it correctly.
In the part VI you mentioned dealing with chapter heading later on in the tutorial.
In this part VII above, you go into some detail about Chapters but in reference to your page mockup. In that mockup you have your chapter wrapped like so.
<p class=”chapter”>CHAPTER 1***Chapter 1</p>
So my questions are:
Q1: Is this wrap in the ballpark of correct?
Q2: Is there a way to change all my Chapter * headings with the correct tag wraps, like you did with search ^(.+)$ and replace with \1 for paragraphs?
Q3: Is there an easier way to do that type of centering in the p.chapter style section?
Q4: Or is it best done in Calibre for some reason?
I know this is a mouthful and I hope you don’t find it too annoying. I’ve learned so much reading this tutorial, I can’t thank you enough.
I guess I’m trying to really understand the style sections, as apposed to adding a new P section, like you did with:
p.centered
{
text-indent: 0em;
text-align: center;
}
span.centered
{
text-indent: 0em;
text-align: center;
}
I feel like I almost have the basics and that is a huge step. Thank you G.
Comment by Mickey B on November 18, 2011 at 12:18 pm
Sorry Gudio, it’s not writing all the code examples I wrote in the first comment… Actually, if you can delete all my comments, I’ll try again later when I can figure out how to post code and have it no execute…
Man, this is frustrating.
Comment by Mickey B on November 19, 2011 at 4:29 pm
OK, let me try again.
The centering issue:
Is it alright to use
text-align: center;
in a style, like say p.chapters
or is that a mistake and must I use p.centered as a style and a P class=center wrap on everything I center in the book or is that just for images?
About Table of Contents:
I also had a question about TOC, at this point I did it manually using “a href=”#C1 , #C2 , #C4 etc. (I didn’t write it all out cause I don’t know how to do that with having the browser execute the code) I wanted to know if this is going to work and if it’s even worth it. I wanted to make sure the book was searchable.
Question about Margins and Padding: { margin: 0; padding: 0em; }
About the reset, wondering if Kindle and Nook add margins anyway or is it something that has to be done in the code? Like in the p style or each individual p class?
About Images:
I saw how you went about adding images to the book as chapter doodads, and I assume they have to be in the same folder to make them work for Calibre or anything else for that matter. However, does it make any sense to add the cover image before you do any converting or is it best to let Calibre do it. I was also playing with the idea of trying my hand at Sigil, do you know anything about the program?
Again, I want to thank you so very much, I know tons more now than I ever would have without you. This is a great set of tutorials and I will forward to supporting you in your future endeavors. Thanks again.
PS: Sorry about all the messed up posts, hope to see them disappearing soon. 🙂
Comment by Guido on November 19, 2011 at 5:07 pm
Whether you can automate the process of centering and wrapping all your chapter headings depends on your manuscript and if you have something that marks your chapters uniquely so that it could be searched. If all your chapters are called “Chapter One,” “Chapter Two,” etc for example, you can do an automated search and replace using a Regular Expression like this, for example…
Search for
<p>Chapter (.*?)</p>
Replace with
<p class="chapter"><span class="centered">Chapter $1</span></p>
This is just an example, of course, and ultimately, it depends on your text formatting etc. how this search would exactly have to look like.
The centering can be part of any style. But you will have to also include a span tag that centers in order to properly center things on all devices, like I’ve described in the tutorial.
You can hand-code a TOC, yes, but why would you? Calibre has a way automate the process for you, so you can save all that time setting anchors in the text and cross linking them and let the software do it for you.
The displays on devices usually have a certain built-in margin that is defined by the hardware, yes. Even if you set the margin to 0 by default – which I always do – there will be a small margin.
As for images, the cover image does not go into the HTML file. It is part of the meta-data that you set up in Calibre.
I have played around with Sigil, yes, but I do not like the way the software is laid out. I find it needlessly cumbersome, but that’s just me. I’m very happy with my toolchain and there’s no really need for me to make any changes to it.
Comment by Mickey B on November 19, 2011 at 6:11 pm
That chapter replace code is very helpful. That is something I have to learn much better.
Centered:
So is either centering better than the other? I had assumed it would take more code to wrap each heading (file size) with the center class, than having the centering done inside the p.chapter style. Is there a reason NOT to have it in the p.chapter style?
Also: how would you go about adding span.centered into the p.chapter style, (assuming this is not a bad idea or can be done at all) since the way you have it written is in it’s OWN style, not sure how I would go about adding it under p.chapter?
Under p.centered and span.centered styles they have the same instructions
text-indent: 0em;
text-align: center;
So I assume having
text-indent: 0em;
text-align: center;
under my p.chapter style takes care of the normal centered (maybe I an wrong) but is there any way to add the span version as well, under the p.chapter style?
As for all the other info in your post, I got it completely. Very, very helpful. You’re a coding deity! I’m so very grateful, I have to get you a free hard copy of the book.
Comment by Guido on November 19, 2011 at 11:27 pm
No, there is not way to combine them. You will have to code them separately because they are separate tags.
You can add the centering information in your chapter p tags, of course, to create something like this
p.chapter
{
font-size: 2em;
text-indent: 0em;
text-align: center;
}
But you will still need to add the span tag to make sure the text will be centered properly on every device.
<p class="chapter"><span class="centered">This is the text</span></p>
Comment by Mickey B on November 20, 2011 at 1:51 am
You the man G… Thank you kindly or should I say… Kindlely.
Comment by Josh Irving on December 13, 2011 at 3:52 pm
Hi Guido,
I wonder if you can help me with this…
I have a book I am working on and want to insert a line space after some italic text that immediately follows each chapter heading.
Is there a quick way to accomplish this?
Thank you so much for this super helpful and comprehensive guide.
All best,
Josh
Comment by Guido on December 13, 2011 at 5:08 pm
That depends on the way your manuscript looks like. My first choice would be to change the style for the italic text to add some extra space to it with the margin-bottom setting. That way you have to make one change and it affects the text throughout your book.
Alternatively, you can do a search and replace and simply insert an empty paragraph after the italic text, like this.
<p> </p>
Comment by Josh Irving on December 14, 2011 at 9:18 am
Thank you so much Guido.
I have 16 books to do, most of my Dad’s (Clifford Irving) books that we are launching on Kindle shortly.
Cheers
Comment by Guido on December 14, 2011 at 11:43 am
Wow, that’s quite a catalog. If you need help, feel free to let me know. 🙂
Comment by Josh Irving on December 17, 2011 at 10:11 am
Hi Guido,
I attempted to create a ‘workflow document’ from this long article. With all the steps documented line by line.
It kind of works, do you have any suggestions for that? Obviously I understand that the obvious suggestion is to go with your professional formatting services. But with all these books it’s not really an option 🙂
I do like your approach as it lends itself well to may output formats.
Thanks,
Josh
Comment by Guido on December 17, 2011 at 10:30 am
I agree, Josh, it is very flexible and reliable across formats. what you see here is, in essence, the exact process I use for all my clients eBooks. Over time I have, naturally, found a few things that lent themselves to optimization and I picked up a few more tricks along the way, but overall, this is the process.
Comment by Josh Irving on December 17, 2011 at 11:28 am
I have one (or possibly two) book/s that I would like you to format, it has many pictures. Can you email offline so I can get a quote from you?
Thanks,
Josh
Comment by Beth on December 19, 2011 at 7:16 pm
Hi. I really want to thank you for the information you’ve compiled here. I like to learn and do things for myself, so your blog has really been helpful.
I have one issue that I haven’t been able to figure out, though. In the p style sheet for the paragraph style, I changed my margin-bottom to 0em because I don’t like the extra spacing between my paragraphs in the chapters. However, in certain sections, such as the title page and the copyright page, I want extra spacing between paragraphs.
I’ve checked the comments above and may have missed the answer, but here’s my question: Is there another style sheet I can create specifically to add spacing between certain paragraphs?
Thanks again for the great information.
Comment by Josh Irving on December 28, 2011 at 1:55 pm
Hello Guido,
I trust you had a good Christmas break!
I have a question that you might be able to help me with if you’re back:
I am attempting to create a TOC using the first few words of a paragraph as the heading. So I’d like to keep the target words on the same line as the rest of the paragraph. So for instance in this paragraph the target words (and TOC listing) would be “I am attempting”. I may want to bold the words. I tried using a chapter style but it is not inline as want.
How can I do this?
Thanks,
Josh
Comment by Guido on December 28, 2011 at 2:38 pm
Use the SPAN tag instead. It allows you to style words and fragments within a paragraph.
Comment by Josh Irving on January 2, 2012 at 5:42 pm
Thanks Guido,
Did you get my email, regarding a quote?
Also I am having a problem with this formatting, no matter what I do using a .MOBI format never seems to respect paragraph spacing and is always spaced out after all paragraphs.
The only way I have been able to get rid of spaces after paragraphs is to use Calibre to remove all spaces and then use to put them back where I want.
This obviously is not correct. But I have tried repeatedly and not been able to control spaces with CSS rules?
Any ideas what I’m doing wrong?
Thanks,
Josh
Comment by Guido on January 2, 2012 at 5:57 pm
Josh, I did not get any email from you. I am not sure what problem you’re having but I’d suggest, you simply email me your HTML file and ‘ll take a quick look. I sent you an email so you have the correct email address to contact me at.
Comment by Tarin on January 3, 2012 at 12:15 pm
Guido can I please email you my html thing I am obviously not getting this centering thing at all, perhaps you can see what I did wrong?
Comment by Guido on January 3, 2012 at 12:27 pm
Absolutely.
Comment by Josh Irving on January 7, 2012 at 10:33 am
Guido to the rescue…again!
I had been having problems with my CSS rules not working, this went on for weeks until I asked Guido, who found the answer 🙂
I had made a cheat sheet out of the guidelines in these pages on a SPREAD SHEET!
Be very careful as copying and pasting from a spread sheet can introduce error spaces (empty or other non regular or tab induced spaces) in front of the CSS rules. Between the left most margin and the first Curly bracket or brace. This had the effect of breaking by rules.
You have been warned!
Thank you so much,
Josh
Comment by Tarin on February 27, 2012 at 3:16 am
Hey Guido, I hope you are keeping well. I was wondering, about line spacing, everything appears on calibre has double lined space, it kinda makes stanzas for poetry look odd, is there a way for me to change the line spacing?
Comment by Guido on February 27, 2012 at 7:56 am
That depends solely on your formatting, Tarin. If you have line spacing between paragraphs and each line in your stanza is a paragraph, that will space it apart. Try to either use a separate paragraph class for the stanza or do your line breaks using the <br/> tag so that the entire stanza is a single paragraph.
Comment by Tarin on February 27, 2012 at 11:02 am
Could you please give me an example of what you mean for the stanza so I can see. Sorry if am being a dummy again. What’s the /br thing etc please?
Comment by Guido on February 27, 2012 at 12:01 pm
<p>This is the first line<br/>
This is the second line<br/>
This is the third line<br/>
And this is the end</p>
Comment by Patrick on April 29, 2012 at 5:53 am
Hello Guido,
Amazing guide that should be published as a book. I’ve read other guides –and paid for them– and they simply do not compare.
I really enjoy the emphasis on clean coding, and the clean, clear writing. Every time I read your guide, I find a little gem of coding and of inspiration.
Question 1: Should the
”
<!DOCTYPE…"
be before the tag?
In the above example, it is before the tag.
Question 2: To be sure I am understanding centering correctly, for anything we wish to center, be it text or chapter titles or images, we should use:
what ever it is
(Actually, since my short story has quite a few images, and since I want some space around my images, I have created an
my image< for my images with the following code:
p.image {
text-align: center;
margin-top: 0.6em;
margin-bottom: 0.6em;
}
span.image {
text-align: center;
margin-top: 0.6em;
margin-bottom: 0.6em;
}
Thanks again for a magnificent guide.
Comment by Patrick on April 29, 2012 at 5:58 am
Hello Guido,
I am resending this since part of the text was treated as code and omitted.
Thanks!
Amazing guide that should be published as a book. I’ve read other guides –and paid for them– and they simply do not compare.
I really enjoy the emphasis on clean coding, and the clean, clear writing. Every time I read your guide, I find a little gem of coding and of inspiration.
Question 1: Should the
”
<!DOCTYPE…"
be before the tag?
In the above example, it is before the tag.
Question 2: To be sure I am understanding centering correctly, for anything we wish to center, be it text or chapter titles or images, we should use:
<!–
what ever it is
(Actually, since my short story has quite a few images, and since I want some space around my images, I have created an
my image
Thanks again for a magnificent guide.
Comment by Patrick on April 29, 2012 at 6:45 pm
Much of what I attempted to post was cut out/dropped –for some reason much of the code was dropped– making the questions… senseless:
Restating them simply: Question 1: Shouldn’t the DOCTYPE code be before the HTML tag, not, as shown above, before the HEAD Tag?
Question 2 is not a question but a clarification (mainly for myself) that all centered items, be they paragraphs, images, headings, etc., should be contained in both p class centered, span class centered tags.
Most importantly, I wanted to say how impressed I am with the guide.
Comment by Patrick on April 30, 2012 at 12:10 pm
My mistake!
The DOCTYPE code is placed exactly as shown, before the HEAD tag.
I saw an example, on W3School, of an HTML page having the DOCTYPE before the HTML tag, and assumed incorrectly that the XML DOCTYPE would be placed in the same location.
Comment by Jack on May 4, 2012 at 1:07 pm
Guido,
Thanks so much for doing this. I’ve learned a great deal from reading your posts, but somehow I’ve lost my text indent which I set in the style as 1.5 as you suggest. By the time it gets to the body of my story, the lines are all flush left. What am I missing? I’ve tried for a couple of days to figure this one out, but there must be something very simple I’m overlooking.
html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, pre, table, th, td, tr { margin: 0; padding: 0em; }
p
{
text indent: 1.5em;
margin-bottom: 0.2em;
font-weight: bold;
font-size: 2em;
}
p.title
{
font-size: 2em;
font-weight: bold;
margin-top: 5em;
}
p.chapter
{
text- indent: 1.6em;
font-weight: bold;
font-size: 2em;
margin-top:5em;
margin-bottom:2em;
page-break-before: always;
}
p.headline
{
text-size: 1.5em;
text-weight: bold;
}
p.centered
{
text-indent: 0em;
text-align: center;
}
span.centered
{
text-indent: 0em;
text-align: center;
}
KLONDIKE JUSTICE
by
Jack R. Stanley
Lanky Ed
Comment by Paul Dillon on June 26, 2012 at 3:28 pm
Hi Guido.
Great tutorial.
I have a question. Supposing you want page breaks in your front matter / Epigraph / Dedication etc, and you want the style to be centered.
Do you include
page-break-before: always;
in both the and CSS styles (see below)
p.frontmatter
{
text-indent: 0em;
text-align: center;
page-break-before: always;
}
span.frontmatter
{
text-indent: 0em;
text-align: center;
page-break-before: always;
}
Copyright 2012
Would this cause 2 page breaks in ibooks?
Comment by Guido on June 26, 2012 at 5:01 pm
Yes, it would cause two page breaks. Include it simply in the p tag and you will be fine.
Comment by Paul Dillon on June 27, 2012 at 5:24 pm
Thanks Guido.
Comment by Olga Fotinich on July 28, 2012 at 5:15 pm
Hi, Guido, thank you very much for your posts, I’ve learned a lot.
Yes, I know how to see my .html file in browser, but what about images? I can’t see them unless I use my computer, where images stored.
I can’t see images on any other computer.
And another thing: Should the book consist only from one .html file, or it can be a set of files connected by links – like a regular web site? – at least, its .html version?
And how to deal with the set of files? And with the images as well?
I’ll greatly appreciate your response.
Comment by Yolanda on July 28, 2012 at 7:41 pm
Thank you sooo much, Guido. After wandering lost in the forest on how to convert our cookbook to .mobi, your guide looks like something we can do! One question. We have a cookbook which we created in InDesign and then converted to .pdf for an ebook. Am I right in assuming we should convert one of those to an HTML file? If yes, can you recommend whether it is better to start with the InDesign file or the PDF?
THANK YOU!!
Comment by Shayne on August 9, 2012 at 10:45 pm
Hello, Guido.
Your guide has been extremely helpful to me, however I keep hitting a wall when it comes to centering the Chapter headings while keeping the format intact. I can get it to do either one or the other, but never both. I have read your solutions through previous posts, but none of them change my document at all. Here is what I have on my screen, in hopes that you will see the mistake I seem to be making.
p
{
text-indent: 1.5em;
margin-bottom: 0.2em;
}
p.chapter
{
text-indent: 1.5em;
font-weight: bold;
font-size: 2em;
page-break-before: always;
margin-top:5em;
margin-bottom:2em;
}
p.centered
{
text-indent: 0em;
text-align: center;
}
span.centered
{
text-indent: 0em;
text-align: center;
}
CHAPTER 1
Whenever I try combining the centering elements, nothing changes. Can you please tell me what I am missing? Thank you ever so much!
Comment by Guido on August 9, 2012 at 11:20 pm
Perhaps send me an email with the example so I can take a look.
Comment by Jon Westcot on September 11, 2012 at 7:28 pm
Hi Guido:
Found your remarkable site through JW Manus’s journal and am enjoying it a lot.
One (more) question regarding the centering issue: Since the “text-indent” and “text-align” values are identical between the “p” and”span” tags, I wondered why the whole thing couldn’t be simplified to one “centered” class. As in:
.centered
{ text-indent: 0em;
text-align: center;
}
Then, this one class can be applied to any related tags:
Centered text with one class
As I understand CSS, this should work. But, I have yet to GET it to work. And something else got wonky with what I’m doing and now some display tools display my markup correctly and some seem to ignore it. Gotta track this down. But, I still was wondering about the global class versus the tag-specific class.
Thanks for the excellent tutorial once again!
Comment by Guido on September 11, 2012 at 10:34 pm
Jon, regarding you suggestion to simplify the centered class, this may work on certain devices. My goal is and always has been to make sure my code works on as many devices as possible. Therefore I will always code very defensively and on the side of caution. I’d rather write a few lines more code than risk unpredictable results out in the market. That’s also the reason why I suggest using <p> and <span> tags to center elements, because some devices have idiosyncrasies that I can circumvent this way.
Comment by Jon Westcot on September 11, 2012 at 7:31 pm
Grrr. The code example didn’t come across correctly. What magic keystrokes must I use to get code examples involving HTML code to display?
Comment by Guido on September 11, 2012 at 10:30 pm
To post HTML tags you will have to translate the actual tags into named entities before you post. Otherwise your tags will, naturally, be interpreted as valid HTML tags.
Comment by Jon Westcot on September 12, 2012 at 1:28 pm
Guido:
Thanks for the prompt replies!
As to the use of the “generic” class, I got it to work just fine. Elsewhere in my CSS code, I’d omitted a trailing brace which caused all kinds of heartburn with what was displayed.
Device-wise, I only have access to a Nook Tablet and a regular-old Kindle. The coding, though, works on all the PC-based e-reader tools I’ve tried as well as on my Nook Tablet. Need to try the Kindle next.
Just wanted to pass this along.
And thanks again for your hard work and for sharing your results with us all!
Comment by Guido on September 12, 2012 at 1:35 pm
Yeah, there’s no reason why this should not work across the board, so I’m pretty sure you’re safe.
Comment by William on September 24, 2012 at 12:04 pm
Any advice on how to do ordered and un-ordered list?
Comment by Guido on September 24, 2012 at 12:07 pm
Exactly the same way you’d do it in regular HTML using the <ul> and <ol> tags. Then style them using CSS.
Comment by Rob Cornell on March 7, 2013 at 5:24 am
I’m not sure if you’re still monitoring comments here, but I figured I’d give it a shot.
I’ve formatted four ebooks using your guide, and based on my various previews of the books, they look great. But yesterday I submitted an epub file to Apple and was told I had errors and they couldn’t publish it. I went to EPUB Validator (http://validator.idpf.org/) and plugged in the file and got a list of errors, but I have no idea what to make of them. I am *not* a HTML expert by any stretch. I also checked another of my books and got similar errors on that one.
There are two basic errors it’s calling out found in multiple locations. They are:
ERROR DarkerThings-Ebook_split_003.html 12 426 element “i” not allowed here; expected the element end-tag or element “address”, “blockquote”, “del”, “div”, “dl”, “h1”, “h2”, “h3”, “h4”, “h5”, “h6”, “hr”, “ins”, “noscript”, “ns:svg”, “ol”, “p”, “pre”, “script”, “table” or “ul” (with xmlns:ns=”http://www.w3.org/2000/svg”)
ERROR DarkerThings-Ebook_split_003.html 13 21 element “p” not allowed here; expected the element end-tag, text or element “a”, “abbr”, “acronym”, “applet”, “b”, “bdo”, “big”, “br”, “cite”, “code”, “del”, “dfn”, “em”, “i”, “iframe”, “img”, “ins”, “kbd”, “map”, “noscript”, “ns:svg”, “object”, “q”, “samp”, “script”, “small”, “span”, “strong”, “sub”, “sup”, “tt” or “var” (with xmlns:ns=”http://www.w3.org/2000/svg”)
Does this make any sense to you? And how do I fix this?
Thanks!
Comment by Guido on March 7, 2013 at 7:51 am
Yes, it does make sense to me, and it means your HTML is not correct. The chances are you have misplaced tags or tags that were opened but not properly closed, or closed out of sequence.
Without seeing the actual HTML it is impossible to say.
Comment by Rob Cornell on March 8, 2013 at 5:34 am
Arg! Is there an easy way to locate these mistakes in the code? I’m using Notepad++. Is there a search function of some kind?
I’m not sure how this happened. I don’t really mess with the tags outside of the paragraph styles you teach us. 🙁
Thank you for the speedy reply, BTW!
Comment by Guido on March 8, 2013 at 7:55 am
You can only search for something when you know what you’re looking for. Right now, you don’t know that because the error message is too cryptic. Send me the HTML or ePub file real quick and I’ll take a look.
Comment by Joel Beaton on April 1, 2013 at 7:57 am
Hi Guido – I read through all of your blog pages here (Thanks very much by the way – I had never understood the underlying structure of ebooks despite searching a few times and felt making them was out of my depth a little, but no more!)
I am trying to format my first book to an ebook and I had everything ready to fire and when I open the HTML (and when I convert to an ebook) I get no formatting at all except the basic function and I was hoping you could help.
I more or less cut and paste from your postings, adding a few things here and there but I can’t make it work.
Could you have a look?
Below is a the styles section and the first few paragraphs, removing the comment out code of course.
<!–
html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, pre, table, th, td, tr { margin: 0; padding: 0em; }
p
{ text-indent: 1.5em; margin-bottom: 0.2em; }
p.chapter
{ text-indent: 1.5em; font-weight: bold; font-size: 2em; margin-top:5em; margin-bottom:2em; page-break-before: always; }
p.title
{ font-weight: bold; font-size: 4em; margin-top:20em; margin-bottom:20em; text-indent: 0em; text-align: center; page-break-before: always; }
p.subtitle
{ font-weight: bold; font-size: 3em; text-indent: 0em; text-align: center; }
p.subhead
{ text-indent: 1.5em; font-weight: bold; font-size: 1.5em; }
p.centered
{ text-indent: 0em; text-align: center; }
span.centered
{ text-indent: 0em; text-align: center; }
ORION
SURESH ADVENTURE
For my dad who has always been
there for me and always inspired a
love of literature from a young age —
For I do not like Green Eggs and Ham.
Chapter 1
ORION
The blue light flashed incessantly throughout the ship while the electronic klaxon screamed at timed intervals to ensure all personnel were aware of impending doom and not asleep, no matter how well earned the rest.
Just before stepping out of my quarters I tugged my uniform shirt straight and tried my best to look like I hadn’t just worn up after a measly two hours rest. The floor abruptly dropped from beneath my feet, knocking me and everything else to the floor. The walls shook and unmistakable sound of impact reverberated through the hull. I really needed to get to the Bridge fast.
oOo
–>
Comment by Guido on April 1, 2013 at 8:01 am
From what it looks like in your post, you did not wrap the text paragraphs with <p> tags.
This line, for example,
Chapter 1
should look like this
<p class=”chapter”>Chapter 1</p>
…and so on.
Comment by Joel Beaton on April 1, 2013 at 8:04 am
Sorry – it left out the top part – probably due to the HTML in it…. Going to try to include the very top of the time again – to assist this I have taken out the symbols.
?xml version=“1.0” encoding=“utf-8”?
!D O C T Y P E html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”
head
s t y l e type=“text/css”
Comment by Joel Beaton on April 1, 2013 at 8:14 am
Yea – I’m sorry – the comment form stripped the HTML CODE. Re-included here, minus the from the tags so you can see it….
p class=“title” span class=“centered” ORION /span /p
p class=“subttle” span class=“centered” SURESH ADVENTURE /span /p
p class=“centered” span class=“centered” i For my dad who has always been /i /span /p
p class=“centered” span class=“centered” i there for me and always inspired a /i /span /p
p class=“centered” span class=“centered” i love of literature from a young age — /i /span /p
p class=“centered” span class=“centered” i For I do not like Green Eggs and Ham. /i /span /p
p class=“chapter” Chapter 1 /p
p class=“subhead” ORION /p
p FIRST PARA /p
p SECOND PARA /p
p class=“centered” span class=“centered” oOo /span /p
Comment by Guido on April 1, 2013 at 9:08 am
Yes, that looks about right. Send me the HTML file via email real quick and I’ll take a look.
Comment by Joel Beaton on April 1, 2013 at 9:31 am
Thanks so much! I emailed it to the address on your “About” page.
Comment by Bonnie Toering on April 13, 2013 at 7:53 pm
Hi Guido,
Thanks so much for taking the time to offer your insights. I have not been able to properly format the right and left quotes or apostrophes by following your directions. I replaced all ” with ” and ‘ with ” in word prior to moving it to jEdit and then replaced left quotes with &ldquo, quotes with &rdquo, and apostrophes with ’ however, they are not converting when I convert my .html file to mobi. Any suggestions?
Comment by Guido on April 13, 2013 at 8:00 pm
Perhaps you forgot the semicolon after the “ and ” entities? They are essential or the parser will not properly interpret them as HTML entities.
Comment by Kim on August 6, 2013 at 5:49 pm
Guido,
Could you please tell me what I have done wrong? this is what the beginning of my html file
html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, pre, table, th, td, tr { margin: 0; padding: 0em; }
p
{
text-indent: 1.5em;
margin-bottom: 0.2em;
}
p.chapter
{
text-indent: 1.5em;
font-weight: bold;
font-size: 2em;
page-break-before: always;
margin-top:5em;
margin-bottom:2em;
}
p.centered { text-indent: 0em; text-align: center; } span.centered { text-indent: 0em; text-align: center; }
***
Chapter 1
What have I done wrong?
Comment by Kim on August 9, 2013 at 1:48 am
Hello Guido.
Thank you for this guide! I just created my epub copy and it is all it beautifully done! I can’t thank you enough but I am still having issues with the above comment. I have no TOC and my ***’s are not centered neither are my chapters.
I also have Chapter titles so how would i make that change? And I need to have a credits page. Do I just type that in under and before Chapter 1?
I’m ready to upload my book if I can only resolve this issue. Can you tell me what i did wrong? I went through all my chapter headings as well and added and before and after each chapter and chapter title and they appear in BOLD but there is no spacing between chapters or ***’s
Comment by Guido on August 9, 2013 at 10:14 am
It’s hard to diagnose from a distance without seeing the actual code. Feel free to email me the HTML file and I’ll take a quick look.
Comment by Kim on August 9, 2013 at 11:12 am
Oh Bless You!!! You’ll have it in a few minutes!!!
Comment by Pete V. on November 14, 2013 at 2:05 am
Hello Guido,
Wonderful tutorial you’ve offered here! I discovered recently, and about a month after having digitally self-published on Amazon, that my otherwise tight formatting, which appears fine on standard Kindle devices, totally breaks on iOS devices. I had followed a previously well regarded tutorial, but it only discussed formatting everything “properly” within Word using their style sheets; I’m glad I’ve now learned the value of doing the html coding myself. Now my question…
In some books I’ve seen the copyright information page right justified, and I prefer this style for that particular page myself; would we need to have a span tag for right justification as we would for centered? Like so:
span.right
{
text-indent: 0em;
text-align: right;
}
Also, I haven’t reached Part IX yet, so I’m not sure if this is already mentioned, but if not could you point me in the direction of perhaps a simple table of information for other useful html tags that might be utilized when formatting an ebook? Or really any source that discusses additional html tags beyond what you’ve covered, but does so in such a clear way, would be greatly appreciated!
Comment by James Sterngram on November 18, 2013 at 8:08 am
Guido, I have a technical issue regarding copying your samples. I’m reading them in Chrome, and when I copy your first sample in this part vii and paste it into either notepad++, word, or notepad, instead of the html language I read on the post, I get the following in my quotes below:
“- See more at: http://guidohenkel.com/2011/01/take-pride-in-your-ebook-formatting-part-vii/#sthash.D5SivsmJ.aeLg5UgC.dpuf”
I find it works okay if I copy in IE, but is there a simple setting-tweak protocol I can use to get Chrome to copy and paste what I’m reading in your posts instead of something I don’t see there?
Also, my book is poetry (most every line a flush-left paragraph, hanging indents for runover lines, etc.) Your tutorial so far (through part VI) has been wonderful for cleaning up the word doc and converting to and cleaning the html with auto-conversion to entities, etc. But I’m wondering if the further I go into part VII and beyond, the further I’ll get from my desired non-novel ebook. I’m proceeding for now, for the sake of learning more of your great ideas that apply to any situation, but do you know of a great source for poetry styling vs novel layout? Thanks.
Comment by Pete Vellucci Jr on November 18, 2013 at 3:26 pm
Hi Guido,
I actually have quite a few questions, from various parts of your guide, but figured I’d place this comment here:
1. The header info you provide as a sample above is likely outdated today, do you have a recommendation for an up-to-date xml/xhtml header?
2. When resetting all those tags to a base value in the header, is it as you say, “margin: 0; padding: 0em;” or should margin also be 0em?
3. If I wanted to right justify some bits of text (my copyright page), would I need a span.right style?
4. If I’m using a particular type of character as my section dividers (like where you used stars) and that character has a numeric entity, does that mean it should also have a named on? I mean, would it be true that all numeric entities have a corresponding named entity? I can’t seem to find a matching named entity for the following two I use as specialized dividers: #9675 & #8226 (took out the beginning ampersands in case the blog would try and convert them)
5. I’m noticing some discrepancy on indents between viewing my html file in chrome and with what Calibre outputs as a mobi file (and which I check on my iPhone’s kindle app, the only one really available to me at the moment). When writing up my code I was trying to align the larger chapter titles with the indent of the first paragraph, and using some basic math and guess work I got it to line up correctly when viewing the html in my web browser; however, on my Kindle it was showing the chapter title as having a less indent (basically hanging over the right edge of the paragraph indent). So I went back in and increased the chapter indent size so it shows correctly on my Kindle app, but of course now it’s too far left indented when viewing in the browser. My question is, should I trust the way it looks in the Kindle app or the browser? And if the browser, am I missing something I need to put in my html to override Kindle’s settings (I thought that’s what that header value was supposed to do?) or should I be looking for a setting in Calibre (latest version 1.11.0)
I realize that’s a lot of questions, hope I can get some answers for them as they are the last bits that are preventing me from having what I believe will be a perfectly formatted ebook! Thanks in advance!
Comment by Guido on November 18, 2013 at 3:50 pm
Pete,
ad 1) Nothing in the tutorial is outdated, really. If you want safe eBook that work across all platforms you have to program very defensively, which is what I’ve been describing here.
ad 2) 0 or 0em, makes no difference they are the same thing. I have stopped doing the rest altogether ,though, and let Calibre handle it for me, actually.
ad 3) No, you do not need a span for right justification. It affects only the centering of elements for some reason.
ad 4) Not all special character have named entities. However, if there is no named entity, I would advise against using that special character because the odds are it will not be cross-platform compatible and will not properly display on all devices/readers
ad 5) You will never get them to look the same way. Every device, software and reader will treat them differently. They all have their own little idiosyncrasies. I personally take the Kindle reader software as the reference for everything because it is the device with the largest market share
Comment by Pete Vellucci Jr on November 19, 2013 at 8:24 am
Thanks for the responses Guido! A few followups and realized I had an additional question:
1. I wasn’t trying to imply the basic html code is outdated in any way, but rather that !DOCTYPE bit; to be honest, that whole opening bit is just gibberish to me, and I saw another site recommend using something similar but set for html 4 (I think), and so I didn’t know if your opening code was outdated in terms of referencing a particular xml or html version or whatever.
2. Can you recommend a more thorough tutorial for working with Calibre? It seems to have a lot of features that I’m just not entirely sure about, and I also think the newer version of Calibre is missing or has changed certain things; for instance, I can’t find the option to maintain my cover’s image dimensions (unless that’s because I’m outputting to mobi instead of epub), which leads me to my additional question: How do I stop Calibre from constantly resizing my 1600×2400 image (what I’ve read is ideal size for use through any ebook distribution channel) down to 1333x???? (sorry, not at my computer at present so can’t remember the dimensions it shrinks it to). This resizing seems to leave a trim on the right edge when viewing the cover on my Kindle app, though this isn’t especially important, since I assume when I’m ready to upload my updated format file to Amazon, I’ll actually be uploading the raw html file and the original cover image file separately, not whatever Calibre puts out anyway (I’ve only been using Calibre’s output to get the Kindle preview without overwriting the file I currently have uploaded to Amazon).
3. Thanks, I’ll remove the unnecessary usage from my code.
4. Do you know of any online sources where you can plug in the numeric html entity and have it spit back a named one if such is available? If not, that’s a shame cause I really like what I’m using as dividers, but I’ll switch if need be to maintain compatibility.
5. I guess the safest option for me would be to just remove indents from the chapter names so that I can be sure they will look the same across the board; I’d certainly rather this than have differing devices moving the indent around on me.
Thanks again for your initial responses; hopefully these final clarifications will leave me good to go!
Comment by Stanley Guess on November 22, 2013 at 7:31 pm
I’m having the same issues as James Sterngram. I try to copy and paste the code and when I paste it just says:
– See more at: http://guidohenkel.com/2011/01/take-pride-in-your-ebook-formatting-part-vii/#sthash.iUGC4XPL.dpuf
How do I get it to actually paste as the code itself?
Comment by Stanley Guess on November 22, 2013 at 7:54 pm
Okay, I got the code copied, but when I put it in the beginning of the document, nothing happens when I load it on the webpage. It still just displays HTML codes everywhere. I have precisely zero experience with HTML and have no idea what I’m doing wrong or how to fix it.
Comment by duncan on December 13, 2013 at 8:35 am
Hi Guido,
First off, thanks for the incredible resource!
I’m playing around with a short story. It failed ePub validation due to issues with my ‘span’ coding – probably my mistake, I’m just not sure where. I removed all span tags, using paragraph style centring alone. It passes the validator now. The formatting across all the viewers and devices I have tested – including iPad – seems to be fine.
My question is, do I still need to use span tags to ensure centred text will be properly formatted across all devices, or has that changed since the article was written?
Thanks again.
Comment by Guido on December 14, 2013 at 11:44 pm
I am still using the
tag team to center content, just to be sure, and I would recommend everyone do that same.
Comment by duncan on December 15, 2013 at 12:27 pm
Ok, I’ll play around with trying to get my tags correct then!
Thanks for answering!
Comment by Tony on December 31, 2013 at 1:18 pm
Hi Guido,
Thanks so much for the guide – I’ve recently written a book and am going through the process of self publishing. This resource will prove invaluable.
I have a question for you – I’m a software engineer very versed in web technology (HTML and CSS among other things). All of the steps you outline above could be done by a custom program. Do you think there would be much value in such a program? I have to believe that there would be and am surprised that there isn’t anything out there yet that attempts it. I’m well aware of the butchering process Word and many other WPs employ when they try to ‘convert’ their files to HTML. Maybe it’s time somebody writes a program to fix it…
Thanks!
Comment by Jenn on January 10, 2014 at 11:31 pm
One question about these guidelines. The document I’m trying to convert has an unordered list whose bullets won’t show up (just normal old ul and li tags). What do I have to change in the CSS styles to make this function? I noticed if I took those tags out of this line —
html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, pre, table, th, td, tr { margin: 0; padding: 0em; }
— they’d show up again, but I don’t know what else that might break if I do.
Comment by Guido on January 10, 2014 at 11:55 pm
Taking out the reset line, like you suggested is no problem. As a matter of fact, I am no longer using it myself and let Calibre set the defaults for me.
Comment by Guido on May 27, 2014 at 2:47 pm
I just wanted to let everyone know, that I have just published a book called “Zen of eBook Formatting” that is now available. It covers the aspects from this tutorial in a lot more detail and also adds a hole lot of additional info, details and advanced techniques to the mix. Here is a link with a bit more info, including a look at the Table of Contents of the book.
http://guidohenkel.com/2014/05/zen-of-ebook-formatting-is-now-available/
Comment by Alexa on October 19, 2014 at 2:36 pm
Hi Guido.
Amazing thing, that guide of yours. I’m working my way through it and get more and more excited. One question – does Jedit not have an option to save documents as html files or am I missing something? I bypass it by renaming the file every time I want to view it in the browser and adding .html but I wonder if it’s not going to blow in my face at some important stage.
Other than that, thank you so much for this guide. It’s really inspiring, I don’t know how did you get me to do that formatting myself, but you did.
Comment by Alexa on October 20, 2014 at 11:46 am
…I figured out what’s going on now. I suppose I was expecting jedit to be as straightforward as notepad++. Thank you for the guide anyway.
Comment by Darla on January 13, 2015 at 8:43 am
Hi! This has been so awesome for me. Thank you so much for taking the time to post this. A couple questions.
1. I have not only Chapters, but names of the chapters and sometimes dates. Like so…
Chapter 1
The Truth
100 A.D.
How do I get rid of the space between them, but keep the space we’ve created around it?
2. I also have an author note I’d like to include on a separate page before the title. I’d also like to have the title on a separate page as well before the chapter. How would I do that?
Thank you so much for your time!
Comment by Darla on January 15, 2015 at 11:25 am
Good day! I also had a question about headlines. I am assuming it will be displayed at the top of every page? Like the title of the book and author name? How is this accomplished?
Thank you for this great tutorial!
Comment by Darla on January 16, 2015 at 1:50 pm
Hi Guido! I figured out the issues. Just had to think harder and study your site more. 🙂
I’m thinking about buying the Zen of eBook Formatting for the next one.
Cheers!
Comment by Cassie on May 26, 2015 at 4:04 pm
I am trying to format my first ebook and I am confused about where and how to include the title and copyright page. The html example here goes straight to the first chapter. Do you include the title and copyright information in the initial html file at all or is that added when you run the html file through Calibre? If you include it in the html file, where do you put it and how do you keep it a separate “page” from the body of your work since html is not conducive to pagination?
Comment by Guido on May 26, 2015 at 5:11 pm
It all goes at the beginning of the book in my HTML files. You can force page breaks in eBooks using the page-break-before: always; setting in the style, as seen here
http://guidohenkel.com/2011/01/take-pride-in-your-ebook-formatting-part-v/
For a more detailed explanation of pagination etc, you may want to give my book “Zen of eBook Formatting” a closer look because it is much, much more in-depth than the tutorial and also includes numerous advanced formatting techniques.
Comment by Cassie on May 26, 2015 at 8:04 pm
Thank you very much for the informative response. I purchased your book earlier today to better ensure I’m doing this correctly. I’d like to get it right the first time!
Comment by Guido on May 26, 2015 at 8:05 pm
Thanks, Cassie. If you run into problems feel free to shoot me an email.
Comment by Guido on June 6, 2015 at 12:59 pm
If you haven’t purchased the book yet, make sure to do so now. The new version has been adapted to current developments and expands on various subjects to clarify and to accommodate new developments in eBook devices.
Click here to grab the book on Amazon!
Comment by Deb on November 21, 2015 at 11:44 pm
This has been an amazing tutorial for me. Deep gratitude for sharing your plethora of wisdom with new authors such as myself.
Two quick questions:
1) What is the best way to create footnotes?
2) What is the best way to create linked text?
My text is formatted and looking great and I’m just missing these two nuggets of info. Would be grateful for your help.
Many thanks again for your commitment to helping!
Comment by Guido on November 22, 2015 at 12:00 am
Footnotes and links are created the same way you would in any HTML file, using the <a> tag. Like formatting a local bookmark in a text your will have to use the #-sign in front of the name to link to a local reference. There are examples for this in my book “Zen of eBook Formatting.”
iBooks has a special code to create pop-up footnotes using special epub-type parameters and <aside> tags but I’ve never gotten this to work properly, so I’m not sure whether to recommend that path or not.
Comment by Deb on November 22, 2015 at 12:00 pm
Thank you Guido. Just bought your book. I’m sure it will come in handy for many more projects to come!
Comment by Danielle on November 12, 2016 at 8:24 am
I’m so glad I stumbled upon this site! I’m publishing my first novel soon and don’t want to put it through a meatgrinder (which I did with my last short story) but I don’t have the budget to hire an e-book formatter…
Then I find this guide and realize it’s just HTML (which I taught myself as a kid) and CSS stylings (taught myself in college). Suddenly, I AIN’T AFRAID OF NO GHOST!!
Bless you, kind sir, for making this info available for free!
A quick question for you: in my story I have a couple brief messages; should I use the HTML blockquote tag, or just make a new P. class? I’d trust “blockquote” on a webpage but don’t know if e-Readers support it.
THANK YOU AGAIN you are the best!!!
Comment by Danielle on November 12, 2016 at 8:26 am
…And then I look up at these comments and see my question’s already been answered. My apologies! I’ll use your solution.
😀
Comment by Saffire on February 1, 2017 at 5:34 am
Hi Guido,
I have already successfully used your guide once to upload my book to Amazon but then I made a create-space version and re-edited certain parts in the template that Amazon provided. I now want to upload the revised version as my e-book. I have copy and pasted the manuscript and followed all your instructions meticulously but I have been struggling to make this work for the last 3 days. I am using the newest version of notepad++ but whenever I open the document in the browser (Microsoft edge) it fails to show any formatting. The insertion of the html instructions that I added in Word, as you suggest, show up as symbols. When I try the preliminary experiments (such as changing the indent size and making the text bold etc. nothing happens. In fact there are no indents on my manuscript at all …) Please help! I am at the end of my tether with this! Thanks
Comment by Guido on February 1, 2017 at 7:21 am
Saffire, feel free to email me your HTML file and I’ll take a quick look.
Comment by Rebecca D on October 28, 2017 at 7:56 am
Hi Guido,
Earlier upthread Patrick Samphire on February 14, 2011 at 1:33 pm said:
“The html isn’t valid in that it doesn’t have an html tag and it doesn’t have a title tag. I’m wondering if that’s an oversight or if it’s necessary for the process of making ebooks.”
You replied:
“Patrick, that is actually deliberate. I haven’t entirely read up on why that is, but if you include the actual tags Calibre has problems converting it into a proper eBook file.”
I’m wondering if that remains the case? I have an ebook coded and am running it through validator.w3.org in an attempt to clean up the code before building the ebook in Calibre. I was unable to get EpubCheck to work, so I validated the epub at http://validator.idpf.org. However I was unable to understand the errors given. The validator.w3.org errors are easier for me to understand and therefore fix. I just want to make sure I don’t introduce any problems into the book.
Comment by Guido on October 28, 2017 at 12:16 pm
No, that is still valid, and to make sure I just ran one of the ebooks I created recently through the validator you mentioned and it passed with flying colors. So it would appear that you’re doing something else wrong.
Feel free to send me your HTML file by email () and I will take a look at it.