Take pride in your eBook formatting (Part V)
This is the fifth installment of a series of articles. To read the previous one, please click here
Now that we’ve seen some of the structural basics of HTML, it is time to examine how you can affect the actual look of these elements. The easiest, most efficient and most reliable way is through so-called style. A style sheet is nothing more than a list of definition that allows you to tell the device exactly what you want it to do with each of the available HTML tags.
A valid style definition in HTML would look something like this…
<style type=text/css>
p
{
text-indent: 1.5em;
}
</style>
We need to surround these styles with a <style> HTML tag to tell the device which part of our page is the actual style definition or it would otherwise mistake it for structural HTML tags and end up with syntax errors.
There is a remarkable wealth of things you can directly influence with these types of style settings. The most commonly used ones are things such as font face, font size, line spacing, indentations, margins and so forth, but it is also possible to actually create things such as borders, drop shadows and other exciting things with, or even include specific images for display with each one of their respective tasks.
Some of the biggest problems I have seen while I was creating HTML sources for eBooks had often to do with the fact that every eBook reader has its own default settings. Some of them are set up to include extra space at the end of a paragraph, others are set up to create a 20 pixel margin around the text, others yet will indent the first line of every paragraph by default.
For us, this kind of random behavior is oftentimes unacceptable, and fortunately there is an easy remedy for it — a so-called style reset.
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; }
This line, which will be the very first line in our style definitions, tells the device to remove all default margins and padding by setting them to 0 for all major tags we might use. The next step for us is then to go create specific style settings for all the tags we are going to use.
Since we will be using only a very small subset of HTML tags, in practice this is very little work but instantly gives you 100% control over the look of your final eBook. No more guessing or chance formatting for you!
“Hold on,” I can already hear you say. “Not all paragraphs are equal, for example,” and you are absolutely correct. In our eBook we will have paragraphs for general text, we might have headlines, we certainly will have chapter headings, and each of these will require a different look.
Fortunately, HTML gives us an easy way to create customized tags and allows us to style each of them individually. We do this by assigning a class to a tag, thus letting the device know which style to use for it. Take a look at this line, for example.
<p class=headline>Look at me</p>
Upon encountering this paragraph tag, the device will look for the paragraph style called “headline,” and use its settings to display the paragraph. If we want to tell it to display this type of paragraph in a large bold font, we would simply create a style that could look like this.
p.headline
{
font-size: 2em;
font-weight: bold;
}
This is pretty easy stuff, isn’t it? But what the heck does 2em mean?
While it would be possible to define the text size in points, the way you would do in a word processor, in the publishing world it is oftentimes easier to use the alternate measurement of Em.
Since text sizes in a document are usually in a certain relationship to each other, it makes much more sense to use a relative measurement than absolute font scaling. In practice this means that if you change the base font size of the document all other sizes in the document are automatically scaled up as well to an equal degree. All measurements made with ems are derived from that one base font size definition.
Not only does this ensure that the size relationship between fonts in your document remains intact at all times, it also means that you will not have to change all your styles manually, if, after a long day’s work, you decide that all the text is actually a tad too small. By using the relative measurement of em, this won’t be problem for you, ever.
I could bore you with the history of the em and talk about the old days when typesetters like myself would work with lead characters, but to make things easy for you, simply think of one em as the space taken up by the character M. In most typefaces, this creates a space that is as wide as it is high and is therefore a recognized measure.
If we are working in a 12pt font, for example, 1 em is also 12pt. Now, let’s assume we want to create an indentation in our text that is four characters – or 48pt – wide, we would simply make the indentation 4em. The advantage, as described above, is that if we should decide to switch to a 10 font instead, the indentation of 4em will still be four characters wide — 40pt in the new font size. The visual balance of our text will remain unaffected and it will remain pleasing to the eye without us having to raise a single finger. That is the magic of using the right tools for the job…
There are many parameters that you can adjust through HTML styles — far too many to cover here. We will encounter a number of them as we go along. Since most of them are self-explanatory, I may not necessarily explain the function of each one. However, if there are certain things to look out for, or if we should encounter unusual settings, I will certainly let you know about it.
There is one HTML tag in particular that I think I should single out at this point, however. I usually stay away from using H1 tags and its brethren H2, H3, H4, H5 and H6. They are strange beasts and their behavior can be quite unpredictable, depending on the device or browser you are using. Since we can recreate the behavior of these tags easily through the use of specially styled paragraphs, I usually prefer going that route.
A replacement of the H1 tag, for example, could look like this.
<p class="h1">This is a large headline</p>
By using an appropriate style for the paragraph class we can now give it the size, font and weight we desire.
p.h1
{
font-size: 4em;
font-weight: bold;
}
Below you will find an example of a style description that could easily use in any eBook right out of the box and get good results, no doubt.
<style type=text/css>
html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td, tr { margin: 0; padding: 0.1em; }
p
{
text-indent: 1.5em;
}
p.title
{
font-size: 1.5em;
font-weight: bold;
margin-top: 5em;
}
p.headline
{
text-indent: 1.5em;
font-weight: bold;
margin-top: 1.5em;
}
p.chapter
{
text-indent: 1.5em;
page-break-before: always;
font-weight: bold;
margin-top:5em;
margin-bottom:2em;
}
</style>
I will leave you with this example for this time. Feel free to explore style settings in a bit more detail in the meanwhile. In our next installment we will take a look at how to put it all together into an actual eBook source file.
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.
I have a question.
I thought I had read somewhere that CSS should not be used for kindle formatting (I may have misread this). Looking at some of the samples you have on Kindle, I really like the formatting of your books. The formatting is nice, clean, professional, plus easily read. This is definitely the style I want to use when I start publishing my own work.
My question is, does using the CSS formatting require any additional programming for when a user decides to increase the size of the text?
As I wouldn’t want it to be broken because I set the text size and unknowingly prevented them from being able to resize.
Thanks for any info you can provide to the above.
A.R. Williams
The Kindle can handle CSS just fine, In fact, if you really want to make sure your books display consistently without problem on any platform, I found CSS the best and safest way to go.
Once you have your style sheet n place for your book it requires absolutely no additional programming, particularly if you use the relative em sizing, when readers change the font size on their device. The text will nicely reflow and adjust to the new setting.
Thanks for the info! I’m interested in reading more of your post.
Thanks for the wonderful information. You are a very good teacher. Much appreciated. Regards, Lois
Good and solid practices! These will serve us well as the technology evolves and new platforms and formats appear.
Thanks for all the great formatting instruction. Just wanted to let you know it is much appreciated. I’ll buy the first Jason Dark novel today.
I have greatly enjoyed and benefited from your series.
All of the books I convert are of a theological nature and consequently there are a lot of quotes from the Bible.
When I have had these books printed I set up a ‘format’ for the Scripture quotes giving them an equal right / left indent with justification.
The following CSS style works great in a browser viewed html but in the Kindle it gives no right indent.
p.myquote
{
text-align: justify;
margin-top: 1.0em;
margin-right: 3.5em;
margin-bottom: 1.0em;
margin-left: 3.5em;
}
Is the Kindle capable of giving a right indent?
Also, it doesn’t seem that on normal (full width) text it is necessary to justify as the Kindle seems to do it automatically.
Thanks
James
Sorry mate, it looks like a worthy effort but by part 5. I was utterly lost and confused. I can write and I can do enough basic html to pretty up an ebay listing but this simply does not make any sense to me. I think the point at which I got lost was the ‘make sure you use the ‘alt=’ command … er, why. What is it? I’ve got the wrong kind of brane perhaps.
Why can’t I format it it in Word using ‘real world’ commands and then just convert to htm before uploading? I know how to format a document, insert bookmarks and links and do a decent title page layout. I have to assume that Word is going to do a reasonable job, don’t I? Even if it isn’t perfect, I think I could knock out a couple of novels in the time it would take me to get competent at writing code!
I said my piece about Word and eBook exports. Nothing to add there. The eBooks generated through word processors are prone to cause problems and errors across various platforms and end up being plain ugly to begin with. I prefer an eBook that is properly formatted.
I can’t imagine any writer would really NOT care about the presentation quality of their books. I mean, it is your book. Your name is on it. People are seeing it, they pay money for it and you say even if it is broken, it is “good enough?” Why would you even bother to write it? Put some random letters on a page – it’s good enough. 🙂
If you can’t do the eBook conversion yourself, then hire someone to do it for you, but please, don’t be another one of those amateurs who put out their eBooks without any regard for quality. You are not only hurting yourself, you are hurting all of us!
As for the alt parameter, it is simply a short text description of what the image shows. I noticed that I am a bit cursory there, though, you are correct, and I may edit the passage to include some additional information.
I am considering writing a series of eBooks for Amazon’s new eBook publishing service. If I write it in Word, won’t they do the conversion for me? Yes, I know that they will also have to do html graphics code as well as code to embed videos which I may use, but isn’t that what they do for their authors?
I’d appreciate your response. Thanks. I know you have provided a fine article on eBooks here, but I, too, just can’t get into coding. It’s not what I can do.
Sorry, but no, that is not what Amazon is providing. Their conversion capabilities are extremely limited.
Mr. Henkel,
I commend you on your most excellent eBook formatting series. It really helped me get my first short story formatted for the Kindle. Thank you so much for providing this.
I hate to be an HTML nerd, but the needs to have quotes around “text/css” or else it will fail validation.
Should be
Mr. Henkel,
I commend you on your most excellent eBook formatting series. It really helped me get my first short story formatted for the Kindle. Thank you so much for providing this.
I hate to be an HTML nerd, but the <style=text/css> needs to have quotes around “text/css” or else it will fail validation.
Should be <style="text/css">
Thanks again for great series.
You are correct. I always have quotes, but because I was writing much of this in a word processor, which would have converted them into unwanted curly quotes, I wrote the code without quotes at all and probably forgot to re-insert them later. Thanks for pointing it out.
You’re welcome and sorry to be the turd in the punch bowl. Again, a great series on eBook formatting!
You should use H tags for headings for semantic reasons. If you find the behavior unpredictable, you can “reset” it by explicitly specifying all the CSS that might be set by default. This series tells you all you need to know about that:
http://sixrevisions.com/css/the-history-of-css-resets/
I am a writer who needs to publish non-fiction ebooks. I respect the idea of having a better understanding of the underlying principles behind one’s website and (now, through your arguments) one’s ebooks. It makes sense. I have a basic understanding of what you are talking about but am wondering if I’m making a mistake embarking on a sharp learning curve re. developing the ability to create the underlying .html structure for an ebook I create. Will it lead me to never getting it right and ultimately having to go back to a “publisher”. Yes, ultimately most of us can learn anything but I’m worried about the length of time of “ultiamtely”
For example,
I already got side tracked in your discussion to a link to a more indepth discussion of CSS style sheet to “clear underlying problematic defaults in various formats”. I can understand the use of the style sheet but considering the different arguements is going way too far for me.
I’ve gone on here, thanks for considering my concerns.
There is a difference between HTML used for web development and that for eBooks. HTML used to eBooks is essentially just a very small subset of the entire HTML standard. Problems that crop up in web develop oftentimes do not apply to eBook development. It is a different world and a very different approach.
I can’t really answer your question, because everybody has a different threshold, but in my opinion it is always worth understanding the underlying technology of what you are doing, if only to understand its limitations. You can hire someone like me to do your formatting for you, sure, but if you have read my tutorial and, as a result, are already aware of certain technical limitations of current eBooks, it will be much easier for us to communicate and work on the bets possible result. So, even if you decide not to do the coding yourself, it still gives you more control over what happens to your book in the end.
As for the “underlying problematic defaults in various formats” I would not pay too much attention to stuff like that. Most of it is blown out of proportion by a handful of hardliners. The fact of the matter is that all eBook formats are perfectly capable of doing what we need them to do for 95% of all mainstream eBooks.
Just a note – the reset messes up ordered and unordered lists. Took me some time to figure out why my lists weren’t displaying properly!
Messes up, as in?
It can’t mess anything up, it simply resets all the margins. If you create a list, naturally you will then have to define the margins the way you want them to be.
Try it. Bullets and numbers show in HTML but not when rendered as an ePub file unless I define list classes in the css style sheet or remove the ul and ol from the reset.
After reset, I added the following code to the style sheet to render lists properly. Your example above didn’t include any styling for lists, so I had to add it. Thanks for the detailed series! It was very helpful in understanding ebook structure.
ol, ul {
margin-left: 1.75em;
padding: 0;
}
I, too, am completely lost. I still don’t know how to change a Word document into a HTML document. I looked in the Word software and bashed my developer-licensed husband’s brain against this, and we couldn’t find it.
I don’t think not knowing how to do this on an intuitive basis equates to lack of concern for quality. Can you suggest a primer on how (step by baby step) to convert a Word document to a HTML formatted document?
Thank you.
Well, you are reading that primer right there… Just start with part I of the series and make your way through it.
Do you know if the ebooks formatted in this way using html, are compatible with the Smashwords style requirements and can pass through the Meatgrinder conversion ? Has anyone published through Smashwords using this method? Will the html need modifying if you are using different MS Word upgrades such as Word 2007 and Word 2010 on a PC not Mac?
Smashwords does not accept HTML files. They require you to submit a word processor file and then they will butcher it until it no longer even resembles an eBook. And then they will sell it to their customers… no, make that YOUR customers. So, tell me again, why would you want to do this?
I would love to see this series of posts available as a download. It would make it easier to search to reread something and purchasing a copy would be a great way to say thank you for the info.
I am formting a cookbook for my wife and as a result have a lot of lists and images. I tried formatting a sample recipe that has one unordered list with no bullets and another list with a color background.
They worked fine in the ePub format, but when I converted to mobi I lost the background color and the unordered list had bullets.
For background color I tried both styles for a div and background color for the ul.
Here are the styles I used.
ul
{
list-style-type: none;
padding: 0px;
margin-top: 0em;
margin-left: 2em;
}
ol.prep
{
list-style-type:decimal;
background-color: #EDF0FF;
display: block
padding: 0px;
margin-top: 0em;
margin-left: 2em;
}
div.background {
background-color: #EDF0FF;
display: block
}
Any idea what went wrong?
Nothing went wrong. That is just the way the Kindle is limited in its capabilities. You can get it fixed up properly but then you will have to create a KF8 file instead of a traditional MOBI file – but that will mean that you will be cutting out all those readers with older Kindle devices.
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/
Has anyone found an answer to James Reynolds’s question above about right indent? I have a manuscript that includes some passages that I would like to be indented on both the left and right and justified. And some other text that I want to resemble a newspaper article.
What is the best way to accomplish this?
Greetings!
Thanks for such a magnanimous deed in presenting your fine lessons on HTML!! I carefully took notes along the way starting Part IV. I am totally new to this so all symbols used and abbreviations I don’t understand, yet the opening and closing and paragraph signs yes. I get lost in the middle of this page when you comment how easy it all is. That’s where I start to get lost. It is of course me and maybe you intended the readers have a little experience with HTML first, right? Where do you find the proper command words to use and hyphens like “text-size”? You also use “h1”. What does h1 mean? Also what does that parenthesis type of symbol mean? Thanks! Winfred
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!
First, great work! I bought your book and it’s helped.
I’m wondering about your advice to steer clear of and its ilk, and to create customized p.h1 etc styles. Here’s my concern. I’ve heard and its ilk are fantastic tools for SEO and that SE spiders are designed to crawl towards these tags specifically when looking for keywords. What are your thoughts? If you eliminate them, wouldn’t that make it harder for people to find your ebook using browser searches or any other search function that uses the browser’s search algorithms? How about cramming all the SEO keywords into the tag instead? Would that be as effective? Or less effective?
Since you’re not crafting a website or web pages, I am not sure how relevant SEO or browser searches are. Don’t forget you are creating eBooks, and they are in a completely different field of itself. The discoverability of the book is determined by your landing page, your Amazon product page, etc. but not by the content of the actual eBook itself. I doubt search engines and robots even know how to parse and eBook, especially not one that is potentially DRM encrypted.
First, great work! I bought your book and it’s helped me as I learn how to prepare, format, and convert ebooks.
I’m wondering about your advice to steer clear of <h1> etc. tags, and to create customized styles like p.h1 instead.
Here’s my concern. I’ve heard <h1> and its ilk are fantastic tools for SEO and that SE spiders are designed to crawl towards these tags specifically when looking for keywords. What are your thoughts? If you eliminate them, wouldn’t that make it harder for people to find your ebook using browser searches or any other search function that uses the browser’s search algorithms? How about cramming all the SEO keywords into the title tag instead? Would that be as effective? Or less effective?
Thanks for these informative articles. I notice on this page in the p.h1 and p.headline examples you used text-size and text-weight where they should be font-size and font-weight.
You are absolutely correct. I apologize and I’ve corrected the instances, of course. Thanks for pointing it out. I’m surprised no one’s caught that before.
First, thank you for this very informative series. I will be buying your book as well. You have given me the tools to give the same care to the formatting of the ebook as I did to the print version.
The concern I have with styling paragraph tags instead of using headline tags is accessibility for readers using assistive technology. Assistive technology, like screen readers, use the proper structure of documents, including headlines to give a blind or visually impaired reader the same context we get from the text being bold and enlarged.
I will be using resets and styling headline tags, hoping I can get that to work, for the best product for all of our readers.
As you will see in the book I am actually no longer promoting the use of resets. Turns out that they caused quite a few problems in their own right as new devices came to market. These days I prefer to leave the defaults in place and then style from there.
As for the assistive technologies, you are absolutely correct, but it’s no good if they are not working properly to begin with. The problem with eBooks in general is that they do not follow proper HTML standards. On paper, yes, but not in reality. The market is so fragmented with so many bad devices and even poorer implementations, that half the features usually do not work – and the Kindle family is on the forefront of these perpetrations. Using proper structure and best HTML practices is all nice and good, but it’s really academic if nearly all the devices and software readers are so borked that they completely defeat the purpose in the first place. But your mileage may vary, of course.