Take pride in your eBook formatting (Part VII)
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
If you want to keep up with my eBook formatting work, don’t forget to subscribe to my Newsletter. That way I can keep you updated about the latest developments, updates to my books, code snippets, techniques and formatting tips.
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.
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.
How do you load the html file into your web browser?
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.”
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.
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
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.
Thanks!
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!
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.
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
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.
Guido –
Found the problem myself – red face day…….!
Thanks anyway,
Dave
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.
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
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.
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; }
Thanks. I’ll try that.
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/
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.
Sigil isn’t a word processor. I’ll shutup now.
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.
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!
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.
I’m very relieved! Thanks so much for your helpful, reassuring and prompt response.
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?
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.
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?
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.
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).)
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.
Huh! That surprises me! Thanks for the response. I won’t spend any more time trying to figure it out.
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.
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?
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.
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>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.
… the mobi tag mbp:pagebreak within angle brackets (last preceded by a slash) …
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.
I am not sure I understand what you are trying to say. Are you asking a question or making a point?
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.
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.
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. 🙂
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.
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.
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>You the man G… Thank you kindly or should I say… Kindlely.
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
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>
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
Wow, that’s quite a catalog. If you need help, feel free to let me know. 🙂
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
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.
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
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.
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
Use the SPAN tag instead. It allows you to style words and fragments within a paragraph.
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
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.
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?
Absolutely.
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
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?
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.
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?
<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>
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.
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.
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.
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.
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
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?
Yes, it would cause two page breaks. Include it simply in the p tag and you will be fine.
Thanks Guido.
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.
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!!
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!
Perhaps send me an email with the example so I can take a look.
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!
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.
Grrr. The code example didn’t come across correctly. What magic keystrokes must I use to get code examples involving HTML code to display?
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.
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!
Yeah, there’s no reason why this should not work across the board, so I’m pretty sure you’re safe.
Any advice on how to do ordered and un-ordered list?
Exactly the same way you’d do it in regular HTML using the <ul> and <ol> tags. Then style them using CSS.
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!
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.
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!
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.
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
–>
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.
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”
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
Yes, that looks about right. Send me the HTML file via email real quick and I’ll take a look.
Thanks so much! I emailed it to the address on your “About” page.
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?
Perhaps you forgot the semicolon after the “ and ” entities? They are essential or the parser will not properly interpret them as HTML entities.
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?
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
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.
Oh Bless You!!! You’ll have it in a few minutes!!!
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!
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.
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!
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
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!
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?
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.
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.
I am still using the
tag team to center content, just to be sure, and I would recommend everyone do that same.
Ok, I’ll play around with trying to get my tags correct then!
Thanks for answering!
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!
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.
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.
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/
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.
…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.
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!
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!
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!
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?
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.
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!
Thanks, Cassie. If you run into problems feel free to shoot me an email.
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!
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!
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.
Thank you Guido. Just bought your book. I’m sure it will come in handy for many more projects to come!
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!!!
…And then I look up at these comments and see my question’s already been answered. My apologies! I’ll use your solution.
😀
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
Saffire, feel free to email me your HTML file and I’ll take a quick look.
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.
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.