Take pride in your eBook formatting (Part VIII)
This is the eighth installment of a series of articles. To read the previous one, please click here
Last time I promised you I’d cover some more frills for your eBook formatting, and as you’d certainly agree, images are a big part of that. Even for fiction writers images offer great opportunities to present your book in the best possible light, so let’s take a look today how you ca best make use of that.
In fiction, one of the most obvious places to have images included is as part of a book’s chapter heading.
Imagine, if you may, to include a small visual vignette underneath the chapter heading text to set it apart even more.
Here is a small image that I am going to use in my examples. Feel free to right-click the image and save it for your own perusal.
In theory, this is exceedingly easy to do, using style sheets and the background-image parameter. You could simply add the following line to your style for chapter headings and see the image appear and trickle down through all your chapter headings.
background-image: vignette.png
Unfortunately, the background-image parameter is not really part of the CSS style sheet subset used by the ePub eBook file format. Although most eBook readers support it at this point — the major exception being the Kobo reader — it is sadly not safe to use. This may change in the future, but if you want to create a stable eBook I discourage its use.
The alternative is, sadly, not nearly as elegant and requires a good bit more work. What we have to do is include the image manually at every chapter heading, which might look something like this.
<img src="vignette.png" alt="pinstripe" />
The important part when using images is to include the slash at the end of the <img> tag and to include the alt parameter. Without them, our final eBook will not be in the proper format required by many distribution channels. The alt parameter is really just a text description of what the image shows. It is used if, for some reason, the device can’t read the image or if it is displayed in a mode for blind people, where images are dropped altogether. Instead, the alt-text is used to inform the reader what the image showed, which is why I used the word “pinstripe,” since the little graphic I embedded there is an image of a pinstripe. Makes sense, doesn’t it?
To center our vignette on the line, all we need to do is wrap the image tag with the proper <p> and <span> tags, just like we would do when centering text.
<p class="centered"><span class="centered"><img src="vignette.png" alt="pinstripe" /></span></p>
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.
***
Even though you have to manually include the image tag in every instance of your chapter heading, oftentimes you can automate the process by using your programming editor’s search/replace function using a very simple regular expression.
Simply replace — for example —
<p class="chapter">(.+)</p>
with
<p class="chapter">$1</p>
<p class="centered"><span class="centered"><img src="vignette.png" alt="pinstripe" /></span></p>
While it would be theoretically possible to create a separate style for these images that contains instructions to center the image, I decided against it. We have found a way that is virtually bullet-proof by using the <p> and <span> tags, so why take any risks by using something instead that might cause problems somewhere down the line. When in doubt, I typically tend to err on the side of caution, even if it means writing a few extra lines of code. It is just good practice.
In his book “Scourge,” author David H. Burton took this one step further when he wanted to have his chapter headings in a fancy font that mirrored the typeface used in the book’s cover. Since fonts are extremely limited on eBook readers, we decided to achieve this by using images of the actual text that were created in Photoshop. While it increased the file size somewhat, it did have the benefit that it immediately created a very distinctive look and feel for the book as a whole and paid big dividends in my opinion.
This is how it was created.
<p class="chapter"><span=”centered”><img src="Chapter1.png" alt=”chapter1” /></span></p>
There is a big catch to this, however, as we are no longer able to let Calibre automatically create a table of contents for you. The problem here is that we no longer have the plain text that Calibre relies on to build the TOC with. All we have is an image that Calibre can’t interpret. So, what do we do?
There is a nifty work-around for this. Let’s simply change our code to something that looks like this.
<p class="chapter" style="display:none">Chapter 1</p>
<p class="chapterImg"><span=”centered”><img src="Chapter1.png" alt=”chapter1” /></span></p>
How cool is that? What we did was, we created a traditional chapter heading with plain text, but by using display:none as an additional style setting, we essentially make the text invisible. It is there in the code for Calibre to use, but the eBook device itself will not render it. Right underneath then, we plant our graphic text and all is as it should be.
I hope you enjoyed our “frills” session so far, but we’re not quite done yet.
Aside from chapter headings, there are occasions where we would like to include images directly in the text. Scene changes often are examples of that, where traditionally small vignettes find their use.
If you want to do that, all we need to include in our text is a proper image tag at the correct location, that could look something like this.
<img src="vignette.png" alt="scene change" />
Occasionally, you might want to embed images in the text itself for illustrative purposes. We might want the text to flow around them, and would like the image to appear either on the left or the right side of the screen. Once again, all of that is a simple case for our styles.
img.left
{
float: left;
margin-right: 5px;
}
img.right
{
float: right;
margin-left: 5px;
}
To create an image that sits neatly on the left side of the screen and has text flowing around it, we would simply use the following tag in our mark-up.
<img class=”left” src="apicture.jpg" alt="picture" />
We would use
<img class=”right” src="apicture.jpg" alt="picture" />
respectively for an image that sits on the right side of the screen and has text flowing around it.
CHAPTER 2
Siu Lin walked over to the small table and pondered over the chess pieces for a moment. She tilted her head slightly to the side as she analyzed the board set-up and ran through a variety of moves in her head. After a few moments she sat down in a chair opposite of Dark’s, mulling the chess problem over in her head some more. In silence both tried to figure out the solution to the challenge, each trying to beat the other to it. “Bishop to C6,” she finally said. “Then counter with the Rook to H8, and from there it is going to be easy.”
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.
***
I will leave it up to your own imagination to come up with great ideas to use this cool feature.
Note: Unfortunately the mobi file format does not allow for floating images at this time. This means, of course, that it is not possible to use one of layout’s greatest features on the Kindle to the best of my knowledge. If you have found a way to float text around images in mobi files I would love to hear from you!
Here we are, already at the end of an installment, and we still have not managed to get our book into Calibre to build a “real eBook. I apologize for that and promise we will definitely do that in the next installment. In the meanwhile, at least you can check out your book in a web browser and play around with the many features we have explored so far.
Everyone has different needs for their books, so if you have any specific ideas for “frills” that you’d like me to discuss, please feel free to leave me some comments.
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.
Thank you for the interactive articles. One question, what size and form did the PhotoShop chapter heads take?
Saving them as grayscale PNGs with 16 colors, they were around 2.5kB each. You could theoretically piece them together to save room, drawing first only the image for “CHAPTER” – which remains the same every time – and then just changing the number behind it. That would probably save a bit of storage, too.
Thanks!
Thank you for this invaluable info. I’m looking into self-pub options and needed this.
I am glad you found it helpful, Kirsten.
Thanks for the helpful info! I noticed in the Chapter image only workaround you reference a new style . What info does that style need to contain?
Thanks for this great series of posts, Guido!
I am curious whether you have verified that this method of floating images to the side or centering them works in the mobi file as viewed on Kindle.
In making a couple of ebooks without Calibre (XHTML fed into kindlegen), I was frustrated by the Kindle’s casual attitude toward image placement and even sizing. It seemed to ignore every style and size attribute I tried until I finally decided to put white space at one or both sides of each image to prevent resizing and to center them when I wished. Then it would reliably scale the images to full screen width and then I would know how large the original non-white portion of the image would end up being on the screen. But that is time consuming and increases file sizes. Plus it gets messed up when readers use landscape mode.
Your way would be much more convenient than my method if it does work.
With many thanks for the articles,
Nathan on behalf of Team Elliott
Thank you very much for the articles in this series. They are very informative and helpful. One question: Is it possible to use an external CSS file for the e-book HTML definitions? Or does the style section have to be embedded in the HTML Header section?
Thanks again!
@Nathan, I’ll have to look into that in a bit more detail what those problems could be.
@Scott, I have not tried external CSS files but it should not be a problem. The entire HTML file is re-interpreted by Calibre anyway – in fact it is cut into piecemeal to be exact – so the question is if Calibre is capable of doing, and I see no reason why it shouldn’t. I will give it a try as well, though, to make sure it works.
Hello and thank you for this series of articles!
I am new to ebooks. However, I have a long history of producing youtube videos. I would like to embed some of my videos in the book I am writing. Does that work?
Thanks again,
Veronica
@Scott, I have just run a test and yes, it is possible to use external CSS files without problem.
@Nathan, it seems I jumped the gun there. While the floating images work fine in ePub files, they do not work in mobi. That bums me out, of course. I should have tested that properly. I’ll try to see if I can find a way that works reliably in mobi files also. I went back and just tried an ancient approach to put the images in tables but that didn’t seem to work either. Seems, this may actually be a bit of a challenge.
@Veronica, it is not possible to include YouTube videos in eBooks. YouTube videos are streamed across the Internet and not only can’t you assume that eBook readers have Internet access, it would also be risky to assume that every eBook reader can stream huge video files without someone incurring costs.
Thanks for the follow up about the mobi issue. I banged my head against this one for a long time. I have seen people state that the Kindle absolutely cannot display more than one line of text on the same line as an image. But I don’t think *Amazon* has said this, so I was hoping you (or maybe Kovid or someone working on Calibre) had found a way to do so. You may find it just cannot be done. Or, at least, that you have better things to do right now than figure it out. 🙂 I know you have a lot to consider from the input you’ve gotten recently at JAKonrath’s blog. By the way, thanks so much for that guest post. That sparked what must be one of the best discussions ever. I hope you get a boost from the exposure and from the suggestions. I find your own blog to be very thoughtful and thought-provoking as well. (I only recently discovered it, so I have a lot of back reading to do!)
I’ve been experimenting with the images some more and read up some more on the mobi file specifications. It really seems as if it is simply not possible to float text around images in that format. It supports none of the parameters that would be necessary and very specifically excludes the left and right alignment attributes for images. This is a major shortcoming in the format that should be addressed.
I’ll keep digging, though, to see if I can find anything more on the subject but so far everything points towards the same answer.
I will be getting the CS5 version of Adobe InDesign and starting a certification course in early March. Do you have any advice for me as I get up to speed with this application? Thanks.
Glenn, unfortunately I have no experience with InDesign. I should give it a look some time but so far I simply never got around to it.
@Guido, that is great news about the CSS external files. The idea of carrying all that embedded styling was painful. Thanks for checking.
It can also help you with consistency across titles. Simply use the same style sheet over and over again. I may actually consider that for my “Jason Dark” series where I want every volume to look and feel the same.
This has all been exceedingly helpful! I do have a question, though. Now that I’m starting to comprehend all the possibilities for my ebook, I was wondering if you could explain how I can have an entire page dedicated to my chapter headings. I’m thinking of creating an image for each chapter and would like to give it its own page.
Thanks!
Emily,
The best way is to include the “page-break-before: always;” style for your chapter heading. That way a new page is started before your chapter image. Then you will have to create a new style for the text following the image. This style will also have to contain a “page-break-before: always;” styling.
HTML has a “page-break-after: always;” style but unfortunately most eBook readers do not support this. Otherwise it would have been very easy to achieve what you’re trying to do. But still simply creating an additional styling for the text to start on a new page is not too bad either.
Hi! Thank you so much for this! I know very little about code and was able to format a beautiful ebook because your explanations were so clear.
I do have a question, though. I tried using the image insert as a test and reading it on a Kindle app. It looks great so long as the screen is white. Change your screen color to sepia, though, and you have a white block background with an image that looks a little out of place. Do you know if an actual Kindle supports transparency in these images, or will it also have a white block background? Is there any way to create a transparent background image that will translate to Kindle?
JR, the eBook readers all support PNGs with transparency just fine. I’m a Photoshop user so I create all my images – including transparent ones – with that software.
Guido, thank you so much for this guide. I knew absolutely nothing about html code going into this but I’ve managed to format my book thanks to you. Cheers!
Amateur question: What’s the best way to add space between scenes without using three asterix (***)?
Tim, I am not entirely sure I understand your question, as you can really use anything you wish to separate chapters. Depending on which software you use to write/compile your draft, you should be able to tell the software which symbols to use to separate chapters. Alternatively, you can search for the asterisks in your editor and replace them with whatever you desire.
I’ve used the asterisks only for illustrative purposes, manually typing three asterisks, so you can put in whatever you desire, even graphics.
Sorry, I should have been more clear with my question. I don’t mean separating chapters but rather putting some white space between scenes within the chapter. Most books separate scenes with the asterisk, like this:
…blah blah blah.
* * *
BLAH blah blah…
Again, not a chapter break but a break between scenes within a chapter. What I want is some empty space without the asterisks. I tried using empty paragraphs like this , but this seems crude to me. Is there a better way?
Again, thanks for this tutorial. It’s been incredibly helpful to an amateur like me.
Tim, you can simply create a special paragraph style for that and call it, let’s say “scenebreak”. In that style you set the margin-top to something line 1.5em or more, and at the beginning of the scene, instead of wrapping the paragraph with <p>, you would wrap it with <p class=”scenebreak”> instead.
I hope this helps.
Hi Guido,
Your guide is fantastic. I got as far as part VII in one evening.
Just one question in part VIII. What is the significance/meaning of “pinstripe” in alt=”pinstripe” ?
I have another question, Guido. How can I put a small image into my html file? I have the image on my computer. Where and how do I place it within the html file (so that it is portable)?
Thanks.
JB
There is no significance to the alt=”pinstripe” parameter. It is an HTML feature and simply a descriptive text that is used – for example – as replacement for the image in browsers that do not display images at all, or for browsers for blind people, etc.
If you want to include and image, you simply place it in the same directory where your source HTML file is. In the final eBook the image is actually embedded inside the file, so you don’t have to worry about it any longer.
Hi Guido, thank you for the writeup! Just one question: How do you deal with the cream color background of the iPad? Do you use transparent background for the png? Thanks!
Yes, for best results, make it a 24-bit PNG with alpha channel information. That way it will blend properly no matter what the background color is.
Do you have a favorite foundry or resource for possible vignette images?
No, I do not. I usually simply scour galleries with stock clipart to see if there’s anything I can use and then work and massage those images to my needs.
Absolutely great stuff. You broke it all down in easily understandable chunks. If you ever decide to write how-to stuff for Drupal, you’d be the hero of thousands upon thousands.
Thank you.
Guido,
First off, thank you very much for an exceptionally helpful guide. I’ve spent the better part of today going through it on a manuscript I intend to publish somewhat soon. While most of it was just fine (and quite fast) and the results are great, I question whether transparent PNGs are actually supported on Kindle.
Yes, you can of course add a PNG to the book, but I’ve tried every possible combination of transparency/alpha mask/grayscale (vs. color) and every single time, including using the vignette you graciously shared, results in a non-transparent background when you change the Kindle to a black or sepia background.
I even grabbed the sample of David H. Burton’s book you linked to above, and I had the same result for the chapter headings (though I admit they look great on white!).
Is it possible that the Kindle itself (the actual hardware, not the various apps) supports transparency while the apps do not?
Some searching on a couple of forums seems to indicate that Kindle flat-out just doesn’t know what to do with transparency, but I haven’t found anything definitive.
A side note: iBooks handled the PNGs exactly as I expected to them to appear, i.e., they had a transparent background.
Cheers.
And again, thank you for taking the time to write up such an exceptional guide.
Transparency is an issue, yes, but hopefully not as much as one might fear. I am not sure how many people really change the Kindle’s default settings, though I do not know, of course.
Ultimately it’s not a hardware issue either, it is a firmware issue and one would expect Amazon to have taken care of something trivial like this a long time ago, but they haven’t. By the same token, it is easy to forget that Amazon is not really a software – or hardware – company for that matter, so developments will undoubtedly be more stumbling than in a company like Apple, for example.
I am hopeful, however, that with a firmware upgrade in the future the transparency issue will be addressed, along with some others, though until then, I am inserting transparency in my PNGs, if only for all the software readers and other platforms that do support it.
Thank you for this guide. It has been a tremendous help in putting together an ebook. One question: I placed a jpg image in the zip file where the html source is located before calling it into calibre to make the mobi and epub formats. The finished ebook page just shows a ? with a box around it where the photo is supposed to go.
Is there a different place I need to put the picture?
Do not ZIP up your source files. When adding a source file, simply add the HTML file directly. Then, when you add images, you can simply place them in the same directory as your HTML file. Make sure you have no path information in the <img> link.
I didn’t create a zip, but when I saved the html file I created, it automatically stored it as a zip file. I’ll try to see what I can do in manually moving the html file and the jpg. Thank you.
Got it to work!
One more question–I’d love to change the font for the first letter of the first word in each chapter to bold and larger, almost as if it were a drop cap in a print edition.
Any way to automate that process? (probably not, but a girl can dream. . . )
There might be ways to automate it with a regular expression search and replace, but it depends entirely on what your source code looks like. It is nothing I could just point out like that. I’d have to take a look at the HTML code.
Guido, I am so close to having an awesome looking eBook thanks to your guide!
But now I’m stumped on how to enlarge the first letter of each chapter. I got the bold part, and even the enlarge looks great until I test it in Kindle. The bold stays but the letter is the same size as the rest of the sentence:
<b>T</b>
What can I do to change the size of individual letters?
You will need a style for these letters. I would do this
span.drop
{
font-size: 1.5em;
font-weight: bold;
}
Then, surround all those “dropped caps” with tags like this…
<span class="cap">T</span>his is an example.That should do the trick for you.
It did! Thanks!
Guido, have you had any more luck figuring out how to do floating images in MOBI? Just wondered as it’s been a while since you wrote this.
It is not possible. It is possible on the latest Kindle generations, using Amazon’s new KF8 format, but since Amazon is not making the specs public and hos not released KindleGen2 yet, there’s nothing you can do.
Hi Guido
This is by far the best information I’ve found so far, I’m at the point of publishing but having trouble with images. I have put the 21 images (of maps) in a folder with the html file, compressed them as a zip and uploaded this to Calibre. Calibre displays the text but not the photos, a ? icon appears in place of the images. Any suggestions as to what I’m doing wrong?
The code I’m using to place the images in the book is:
Thanks
Martin
Martin, you seem to have grossly misunderstood something. I am not sure what you mean when you say you “upload” images to Calibre. It is not possible to upload anything to Calibre. In addition, why would you ZIP the images up?
I was playing with your code for increasing the size of an individual letter that you posted above. I was also looking around for a way to do a true drop cap to start a chapter. IS that something that is supported by MOBI and EPUB or is it similar to the problem MOBI has with floating images? If it is possible, do you know a style code for drop caps?
Thanks again for all your efforts! Truly a great guide!
A true drop cap in which the text flows around the opening capital is not possible in MOBI, because the format does not support the necessary attributes. You can create a fake drop cap using something like this
span.cap { font-size: 2.5em; line-height: 0.7em; }but that’s about it.
The new Kindle format, KF8, allows for proper drop caps but I am not sure if it is worth the hassle to author for KF8 and have your book downconverted to MOBI just for that purpose. It is your call, though, but remember only Kindle Fire users are currently seeing KF8 formatting. Everyone else is getting a MOBI version.
The same is essentially true for EPUB. Only readers hat support the latest EPUB version can display true drop caps and off the top of my head I can’t even think of any device that can handle EPUB 3.
Thanks, I will just stick with the fake one
Line spaces between paragraphs is NOT professional. Looks amateurish. Please, get rid of those paragraph spaces.
I – and I am sure the majority of readers these days – will disagree with that. Paragraph spacing adds white space and therefore increases readability.
Thank you very much for this important and useful information – I’ve never thought about it. I’ve just started to make my e-book, and was really confused. Still am.
I’ve just started to make .html file, and I have a question – has it be only one file, or it is possible to do like web site, i.e. – index, then other pages – say, content, chapter 1, 2 etc.? I started to do it the second way, but wouldn’t like to waste time.
You can see my sample in my web site, listed above – http://www.RusAmerica.net, I’ve made a link on the very first page. Placed there a few chapters, just like a sample.
I’ll appreciate your response.
Olga, typically I create a single HTML file for the entire book. However, there are instances, for fixed-layout picture books, for example, where I have to manually craft the entire book. In those cases I have to create individual HTML files for each chapter, etc. For novels that is not necessary, however, as Calibre will take care of all that when you feed it a single HTML file.
Im putting together an ebook, and I have images that cover whole pages (maps and title page), and a ton of other illustrations throughout the novel. I’m having trouble figuring out what size to make the full size images that will work with most devices, or -and even better- html code that would resize the images based on the device’s screen resolution. Thanks for the awesome guide! Almost done now!
I usually size images to be 550 pixels wide if they are supposed to cover the entire width of the page. The actual display is 600 pixels wide on most eBook readers, so that gives it a bit of a margin. However, it is your call, ultimately. With the new iPads you could scale your resolution up to almost 2000 pixels if you’re so inclined.
As for automatic scaling, that is sadly not possible. If the image is too large to fit the screen, most readers will automatically scale it down , but if it is too small no reader will scale it up for you.
Thanks for your speedy reply! Yeah, it was the epub readers i was using on my tablet and phone to test how everything was looking, and they wouldnt scale down either, so the images were getting cut off. But I tried the Kindle Previewer and it scaled accordingly. I guess thats what i get for free epub reading apps… Thanks again!
Not to rain on your parade, but if you’re formatting a fiction book, most of what you’ve done here is unnecessary. Formatting a BEAUTIFUL book is very simple with two tools, both free:
Openoffice word processor
Calibre
Calibre not only handles HTML files, it also converts from Openoffice ODT files. So all you have to do is format your book in OpenOffice the way you’d like it to appear in the final ebook, then import the ODT file into Calibre and convert.
It’s an easy, two-step process that I’ve done several times and has never failed produce a very professional looking novel.
If you feel that is good enough, by all means, go for it. In most cases, as I pointed out, the result, however is not good enough to satisfy professional needs. It may look good at a glimpse but if you look closer in 90% of these exported files, you will notice formatting errors, and there are thousands of bad examples of that out there to prove my point. There is not shortcut to a top quality eBook, and there is no “Export” button yet that will achieve the same level of quality and consistency as a properly crafted eBook.
Guido,
I’ve spent the last couple of days doing a lot of trial and error, creating my own checklist based on your article. It has been extremely helpful.
I had a couple of remaining questions.
1) In order for some sections of the book to have it’s own chapter in the ToC but without a label on the actual page, I have inserted a blank chapter class at the top of the page:
{p class=”chapter”}{/p}
Is that the only way to do it so that Calibre can find it and put it in the auto-generated ToC?
2) I noticed that after conversion from Calibre, the stylesheet classes change to things like Calibre1. Is there a setting that I can change so that it keeps my style names?
3) I thought someone mentioned this in one of your comments but I can’t find it. Do we not need the {html} tag in the document? I assume not but wanted to confirm.
Thanks and again, thanks for the great article.
Paul
ad 1) This will not work. I mean, without text, what would you want to appear in the TOC? I am not sure I understand what you’re trying to do.
ad 2) No, there is now way to prevent that,and there is no good reason for it either. What does it matter whet the styles are called once they are packed into the eBook file?
ad 3) No, you do not need the <HTML> tag, because what you’re creating is an XHTML document.
After I read my last post, I have to apologize. I was speeding through it as I had to get out the door. Here is clarification and the last of my stupid questions.
1) Disregard ToC issue. If I want to have page breaks in my document, is there an easy way? For example, if I have a copyright page but don’t have a header for it, then wouldn’t that page just start on the same page as the previous page? How can I have it start on a new fresh page? I created an empty chapter class header to do this and it works fine but curious if this was not the best way to do this.
2) In the past, I’ve had people do a conversion for me and I’ve had to edit the files afterwards for various reasons so having real names for the styles helped me do that. But I guess if I’m converting files myself makes that a non-issue as I would go back to the source html file to make any changes.
3) Thanks.
This is not a question but maybe this will help others. After I brought my Word document into my html editor, I ran a validation on the code. I found multiple instances of the {/i} tag falling outside the closing {/p} tag, which I then cleaned up manually.
I would definitely suggest running a validation on your code to find some of those errors.
This also flagged the error for having a missing {html} tag which is not an error as you explained above.
Most of the time there is very easy what to check the validity of the document. In TextMate simply press option-command-. This will try to close all currently open tags and if all is well, at the end of the document you should be able to do this and the program should generate a <body> tag. This is a clear indicator that your tags are not out of order anywhere in the code.
Thank you so much for your help. I am working through it and making some progress. Originally, I had put it in an Epub file. Created several tables (with text). How do I format that? When I put it in text mate, it just shows the text.
Guido,
Thank you for this awesome guide!
I was just wondering…
I have some illustrations in my book and I sized them at 550 pixels wide according to your recommendation in one of your posts. However when I view them in Explorer, or Firefox or Calibre, they are way way too large. What should I do? Is 550 pixels the correct size? And what should the
resolution be? 72?
Hi Guido – it’s now 2013, and your tutorial is still as amazing as it was when you first put it up. I’m about to create my ebook, but I wanted to address the last question by the last commenter on this page, Mark, by asking a question of my own:
I wonder whether it would be possible to use a width attribute in the img tag, with a percentage in the value – something like width=”80%” or some such. Do you think an application, regardless of which device it’s on, would interpret this properly? I’m also wondering what width an image used as a chapter heading, like in the example you showed us in a previous installment, I should use so that it fits neatly onto a smartphone screen, like my iPhone.
Thank you so much for this amazing resource!
You can use width as an attribute in the image styles, yes. However, I do not recommend the use of percentages, because the image will scale to humungous proportions on a computer screen, while still being small on a cell phone screen, for example.
The way about scaling images properly is to use em. Define how much you want the image to be by adding width:30em; to the img style, for example, and you’ll find the image displays properly proportioned on any device.
Fantastic! I have not used em on a regular basis, but I’m aware that it’s the way to go. Thank you.
I hope you don’t mind an additional question, while I have your attention:
Can Calibre use the chapter titles in the TOC, rather than “Chapter 1,” etc.? Will Calibre allow me to direct it to list entire headings in the TOC as links to the various chapters? Also, can I change the decoration on a link to eliminate the underlining, perhaps even changing the color of the text when the cursor hovers over the link?
Again, thanks for your invaluable advice.
Yes, Calibre can do that. There is no limitation what you can call your chapters. All you have to do is put it in the proper place. In my examples, this would mean wrapping it with tags like this
<p class=”chapter”><span=”centered”>This can be your chapter title</span></p>
If you instruct Calibre to use the tags that are of the “chapter” style to generate the TOC, you will see that it automatically takes your text form between the tags and inserts it into the TOC.
Thank you! And hopefully this will be the final question: I’m ready to do a test run of Calibre, using my current ebook draft. I just downloaded the latest version into my Macbook Pro.
The very first thing Calibre has asked me to do is to “choose my device.” I don’t see an “Add Books” button. Here is my problem: there are two panes labeled “Manufacturers” and “Devices” if I click, for example, Barnes and Noble in the left pane, it brings up 3 choices in the right pane, with the top item, “Nook Color,” selected. Is this a new development for Calibre? Does this mean I will have to create 3 different ebook formats for 3 different Nooks? I’m a bit distressed that our choices are not of formats, but of devices.
There’s also an item marked “Generic” in the “Manufacturers” list, with 3 choices for devices: “Generic e-ink device,” “Smartphone,” and “iPad like tablet.” I wonder whether it would be advisable to use these 3 formats and bypass specific devices altogether. Do you have any sage advice? Again, thanks!
Oh brother. I may have jumped the gun. The questions Calibre asked were for the setup, not the actual conversion of books. I apologize – please ignore my last question, and I’ll return if I have further problems!
Thank you so much for this invaluable information. I have literally spent the last three weeks attempting to format my book so that it appears professional, but I’ve been running up against the brick wall that is epub. In less than five hours, you have helped me turn my novel into something I will be proud to share.
By the way, when you say “perusal,” do you mean we can save the image to play with, or that we can actually place it into our books? And how exactly do you go about creating something awesome like that? I’m really very impressed.
Hi Guido,
I’m just wondering how I can include a full-page illustration and/or map in my eBook, making sure it takes up the full amount of space possible on the eReader. Thanks!
Johnny
It’s a bit tricky because you cannot predict what the aspect ratio of the device is it is going to be displayed, but here’s what I would do. I would create the image in a resolution that is pretty high so that it works nicely as a full-page image. Then I would create a style for that image that looks something like this
img.fullpage
{
page-break-before:always;
page-break-after:always;
height: 100%;
}
This will insert a page break before the image and will also try to enforce a page break after the image – though not all devices can do this. It will the try to display the image in its original height. If the display is smaller than the image, the image will automatically be scaled down to fit the screen. If the display is larger, it will show the image at its original size but still make sure it sits on its own page, making it at least feel like it were a fullpage image.
Man, I think you just saved me. I had to use a second form of italics in a manuscript, which required a second font. I’ve been trying to figure out how to fix it, without breaking the basic functionality of my reader’s devices. I bet it can be done if I’m careful with this image feature, and use that for those 50 or so lines of alternate text.
Hi Guido – thanks for the excellent guide. A quick Q: is it possible to use more than one font (presumably by using font-family: in the css)? If it is possible, is it wise to do so? Many thanks.
Most eBook readers only support the basic fonts – Times, Helvetica, Courier – so using different fonts is not much use. But tablets have a wider variety, so you can always hint at different fonts, using
font-family: Garamond, serif;
for example, as long as you are aware the 90% of the devices will fall back on the Times font.
Hi,
thank your for sharing and explaining.
I am planning to do a non-fiction book with about 60 photos depicting situations that I explain.
If the text flows freely around them then the text directly at the photo might not fit the picture anymore. Do you have some ideas of the best way to go about that?
Also I would like to have numbered Chapters:
1 Chapter 1
1.1 Subchapter – level 2
1.1.1 Subchapter – level 3
etc.
How could I accomplish that best? Is there automatic numbering in html that the e-book readers validate?
Thank you and regards
Andi
Hi Guido,
If I split up my msword file into many files – for each chapter perhaps – then the handling scales up, esp. with numbered chapters where I would have to ensure that the numbering starts correctly in succeeding files. if I don’t split up – my currently one file – the ebook reader might have a hard time handling it.
Most likely – because of the photos – the ebook will have 6MB or more.
How many files would you suggest that I use? I am wondering about the right balance between having to handle many files myself and the ebook reader handling fewer files with bigger sizes.
Thank you.
Regards
It is not possible to have an eBook in multiple files. An eBook is by definition always a single file, unless you want to create individual volumes that are sold or distributed separately.
Hi Guido
Thank you so much for this very informative series. I was wondering if you could provide me with a regular expression to find the first paragraph after the chapter heading? Reason is I want to :
1)do a drop cap for the first letter
2)have the first paragraph flush against the margin i,.e no indent.
I realize that I can hand code the html and put in the classes but i was wondering if there was a shorter way maybe using regular expressions?
Thank you
It depends how you formatted things, but for me usually something like this does the trick
Search for
<p class="chapter">(.*?)</p>\n<p>Replace with
<p class="chapter">$1</p>\n<p class="first">\n represents a new line character and you may have to add more, depending on your manuscript structure. Also, you may have to add a tab (\t) or two in the search and replacement pattern, depending on what your actual text looks like. If it has one tab indent it would have to look something like this
<p class="chapter">(.*?)</p>\n\t<p>I hope this helps.
Thank you so much
I just wanted to add for people who have blank spaces between their chapter heading and their first paragraph (I had 4 blank lines) they can use this regular expression ( i modified it from yours- thanks again!)
<p class=”chapter”>(.*?)<\n(^\s*$)(^\s*)\n<p>
as their search expression
hi Guido
Another question: whilst reading amazon’s guidelines they recommend using percentages for the css properties like margin and text-indent. What are your thoughts on this?If you were to use percentages eg on the p tag how would you calculate what value to use? Would the percentages be based on the width of the body tag which i would understand to be screen width as I *think* (not sure) the p tag doesn’t have a width per se? I am a bit confused.
Thanks for your help!
Exactly, percentages are determined on the canvas size, whereas ems are determined based on the current font. Since we are typesetting, essentially, it makes a whole lot more sense to tie sizes to the font, of course. There are a couple of recommendations that Amazon and others make, that are coming out of web development rather than typesetting and are therefore a bit short-sighted. It’s coming from a lack of experience, because up until the Kindle Amazon was not much of a book publisher.
Guido –
Maybe I’m missing the answer but I’ve looked through your entries and the comments and cannot find the answer. If I have an image I want to use, what is the process for “embedding” it. I understand the coding portion of it, but how do I, as part of the conversion process, get it to embed into the e-book?
Thank you for the great tutorial! I have one problem, my inserted images are creating page breaks. How do I fix this?
Thanks again!
You can’t. If the images are too large to fit on the remaining page they will automatically wrap to a new page. Keep in mind, however, that the book will flow very differently on different devices, depending on the display size and other factors. Think tiny cell phone screen vs. huge desktop computer screen – different layouts and text flows for the same book.
Thank you for your quick response, the images that i’m having problems with are actually my paragraph separators and are very small. Is the another code I should try?
Thank you again!
Then they should not generate a page break and something is wrong with your code.
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/
I want to embed three images, thumbnails of previously published ebooks. What style(s) do I have to add upfront?
That depends entirely upon you and the exact layout of the page, whether the images should be centered on the page or not, etc.
I have an entire section dedictated to images and their formatting in my book Zen of eBook Formatting. Perhaps you should take a look there for more details.
Hi Guido,
I’ve read nearly all the comments in this section and am still unable to figure out how to make your vignette image appear in my html file. It only appears as two boxes with a question mark inside.
I’m working on a Mac and the image is saved as “vignette.png”. I’ve copied and pasted your following code into the html file:
I know you’ve told people to make sure the image hasn’t been zipped up, but I’m not sure how I’d even discover if it is zipped or how to go about unzipping it. I’m also wondering if I might need to save it in some other format, or if the issue has to do with the code.
Any help would be much appreciated. Thank you!
Your code does not appear because it is interpreted as code, not as text.
Here are a few things to look for.
First, is your image file in the same directory as the HTML file? If no, move it there.
If you reference and image called “vignette.png” make sure the actual image file is also named “vignette.png” If your image file has a different name you will have to change the source name in the image tag respectively. Here’s what I mean
<img src="nameofyourimage.jpg" alt="" />
Lastly, check to make sure you are using straight quotes in the image tag to identify the source or anything else. You may not use curly quotation marks inside HTML tags.
If these things are correct, the image should display just fine.
Got it, thank you!
Hi Guido,
I have yet another question: Is there any way to create a clickable table of contents in TextMate? I’d ultimately like a reader to be able to click on, say, “Chapter 10” in the ToC and be sent straight to the beginning of that chapter when viewing the book on an e-reader.
I’m not sure if this is something that automatically happens once uploaded to Calibre or if I have to do the work myself.
Again, any help is appreciated. Thank you.
You can either do that yourself by writing a ToC and then hyperlinking it manually using the <a> tag, or you can let Calibre do it for you. I typically let Calibre auto-create the ToC for me because it also creates an NCX ToC that way that can be accessed through the device’s built-in user interface. It is touched up on in this part of the tutorial.
I don’t really want to push it on you, but the process is explained in detail in my book “Zen of eBook Formatting.”
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!
Hi Guido, bought your Zen book and found it great.
The chapter ornaments issue when screen brightness of the e-reader is changed remains a problem though.
Since .png isn’t universally supported, the best solution I’ve seen is to place the ornament image on a narrow white rectangle that auto sizes to the full screen width. The image and rectangle remain bright when the page is dimmed. How is this achieved?
I’m presuming the rectangle is an image, but I’ve no idea about the css.
Can you help? A lot of people have this problem, I see.
PNG is universally supported on all devices in the market, that is not the problem at all. The problem is that Amazon decided to ignore transparency, and to completely bork up the implementation of both 8-bit and 24-bit PNGs in the latest Kindle models. The way to go about it is to create an image with a white background and then save it as a 24-bit PNG without transparency.
Thanks. Any ideas on how to create the white band behind the ornament that doesn’t dim when page brightness is reduced?
It’s a feature I’m seeing on mainstream kindle novels but can’t see the code they’re using.
Looks much better than an ornament in a white box sitting in the middle of the line.
A correction. Sorry I described that wrongly.
The problem arises when you turn the screen colour to sepia. It’s then that the white framing of the ornament looks bad unless it’s encased in a fullwidth band of white.
Sorry for coming back. I may have a fix.
The question is: does a element keep its background color property when the kindle is changed to sepia? If it does, then I need only enclose the image in a wide p with a white background.
Can it be that simple??
From my experience, the background of an image will never change, no matter what the color setting on the device is. So, if you create an image with a white background it will always appear as a white background, no matter whether the device is in sepia or night mode. Since the Kindle does not support transparency, there is no way around it.
If I enclose the image in full width with background color white, will that stay white if the kindle is set to sepia? If so, that would give me what I’m looking for, the image set in a full white band.
Thanks again.
Just want to say THANK YOU! Used your blog instructions to covert my 181,700 novel into an e-book. Considering including drop caps and found this code online. However, you never include padding in your coding and wondered if I’m headed for trouble here:
A long time ago…
p.introduction:first-letter {
font-size: 44px;
float: left;
color: #D4D4C7;
line-height: 35px;
padding-top: 3px;
padding-right: 3px;
font-family: Times, serif, Georgia;
In general, this snippet for the drop cap is fine. You have to keep a few things in mind, however. Things such as the padding are tricky because the font cuts are different on every device. What works on one device will not work the same way on another and may appear unaligned, unbalanced or even garbled. You should also NEVER EVER use pixels (px) to determine sizes, padding or other dimensions. Always use either pica points (pt) or, preferrably em, to determine sizes. Finally, be careful with colors. What you have here is a light, grayish color which may appear virtually invisible on many devices, particularly cheap knock-offs and older Kindles.
So, as I said, the code is not wrong, but it is not really eBook-safe in any way, shape or form.
Rats – I also wanted to ask you about using ☺ and ☹ respectively for smiley face and frown face. Did an inordinate amount of research online to find an HTML named entity for these and came up nil. Do you think they are safe to use or shall leave them as they appear in Word or go back to the primitive 🙂 to be safe? Many, many thanks again, Guido for your generosity in posting these instructions for poor starving authors like me!
No, it is not safe to use these entities. Most eBook readers do not have emoticons as part of their charset.
Hi Guido. Thanks for putting the time and effort into creating such a useful guide.
Everything has gone smoothly for me up to the images.
I have inserted the following where I want my images in the HTML.
When I try to view my file in my browser, instead of the image I get a little box with a broken image icon and my alt name celtic_knot.
My source is just the name of the image file as I have it saved on my computer. Is that right or am I missing something? Do I need to save the image a different way or take it from a different source?
Thanks in advance.
That is an indication that the browser cannot find the image. Either you misspelled the filename—make sure there are no spaces in the filename—or you entered the incorrect path to the image. The image has to be n the same folder as your HTML file, or you will have to properly enter the relative path to the image in your img tag.
OK, thanks. That’s what I was missing: it wasn’t in the same folder as the HTML file. That fixed it.
Hi Guido. I’m a little late to the party here! I have followed your instructions to create my first ebook. It worked perfectly and the end result looks very professional. Thank you so much for sharing all this precious information with us.
Hi Guido,
Firstly, can I just say what a brilliantly clear and thorough job you’ve done in writing this guide. It’s brilliant.
On the subject of adding graphics to chapter headings, I’ve a couple of questions: (1) What’s the best format? Gif or Jpeg? (2) Is there a recommended file size/compression percentage?
Regarding conventions to do with manuscript style formatting, can you recommend a style guide that’s standard use for ebook fiction? I’m thinking of things like the Chicago Manual of Style, or something. I’m aware that there are different conventions for punctuating dialogue, using ellipses, etc, and I just wanted something standard I can adopt.
Thanks!
Gareth.