Paul Salvette in Bangkok: April 2012

April 28, 2012

Adding Images to Your Kindle eBook

Thank you for visiting this eBook design tutorial. We now have an eBook design startup—BB eBooks—dedicated to helping independent authors and small presses get their eBooks formatted, converted, and ready for sale at all the major online retailers (e.g. Amazon's Kindle Store, Barnes & Noble's Nook, iBookstore, Smashwords, etc.) Please contact us for a no-obligation quote. For those writers, editors, and publishers looking to go the DIY route for eBook production (you probably are if you visited this page), we offer free online tutorials and apps to help you professionally design your eBook. Please visit our Developers page and let’s work together to improve the overall standards of eBooks. Also, please sign up for the mailing list for promotions, design & marketing tips, plus eBook industry news.

Looking for a complete guide on eBook design and development? Please consider The eBook Design and Development Guide, which contains everything you need to know about HTML, CSS, EPUB, and MOBI/KF8 to make an eBook like a pro. Pick it up at Amazon for $6.99 today.

Previous Post: Page Breaks

Similar to page breaks, images are something that frequently get mangled by publishers who don't invest the time and energy toward professional eBook design. In print books there is tremendous attention to detail regarding the image sizing, how text flows around an image, and how captions are displayed below an image. Unfortunately, the state of eBook land is nowhere near that standard, and it is not uncommon for readers to see an image that is haphazardly placed on their Kindle, completely disrupting their reading experience. This partly due to the fact that publishers are still getting used to the concept of reflowable content, but it also due to sloppy HTML markup and CSS. There are limitations on how images can be arranged in the e-ink Kindles and Kindle for iOS; however, the Kindle Fire supports many more features (including floating, which will be discussed in this section).

Styling Images (All Kindle Devices)

The e-ink Kindles and Kindle for iOS can only support images as, essentially, a block element. It is not possible to wrap text around an image, which is also known as "floating." However, care should be taken to ensure that the image is the right size, that it is properly aligned in the viewport, and perhaps it has a caption if needed. Recall the proper HTML markup for an image:

<img src="tester.jpg" alt="Centered Baby Pic" width="134" height="200" />

In this case tester.jpg is a 134px wide/200px high image located in the same directory as our HTML file. Do not neglect to add the alt attribute or your HTML will fail EPUB validation. Please also recall that img elements should not appear on their own in your HTML markup, and they should be wrapped in a block element (typically … tags). As an example, let's try adding an image with a caption in one paragraph element and see how it renders on an e-ink Kindle:

<img alt="Centered Baby Pic" height="200" src="tester.jpg" width="134" />Pic with Caption That Has No CSS

Example of Poor Image Layout with no CSS

The preceding example is most certainly not how you want the layout of your text and image to look, but a large number of not-to-be-named eBooks appear like this (even the expensive ones!). Notice that the image is in-line with the caption text, which aligns vertically with the bottom of the image by default. Let's try adding some CSS to center both the image and caption. Also, you can force the caption text directly below the image with a line break tag ( ).

Some example CSS for images that functions well on all Kindle devices is as follows:

p.imgcentered
{
text-indent: 0;
margin: 1em 0 0 0;
padding: 0;
text-align: center;
font-size: 0.8em;
}

And the HTML:

<img src="tester.jpg" alt="Centered Baby Pic" width="134" height="200" /> Centered Pic

Properly Centered Image with Caption Below

Important Note: Be careful with the text-indent property when centering images. You should set it to 0 to avoid the box that the image is in from being slightly off-center.

This is the limit to how much styling you can do to images for the e-ink Kindles and Kindle for iOS. Since floating is not recognized on e-ink Kindles and Kindle for iOS, it is best to treat every image like a block element. If you want to make a collage of two images together, this guide recommends using your favorite photo-editing software to save the collage as one big image. However, the Kindle Fire allows for many more styling features for images.

Adding Borders to Images (Kindle Fire Only)

You may want to create a border around an image just so that your readers can easily distinguish it from textual content. Creating borders around images is very simple and done in the same fashion as a block element. It is also possible to add a drop shadow utilizing CSS3 properties and values, and you will learn more about that in the Advanced CSS section. Here is some example CSS to add a simple red border around an image:

p.imgcentered img
{
border-width: 2px;
border-style: solid;
border-color: red;
}

Image with a Border in Kindle Fire

Tip: You can use the shorthand CSS property border to include all three of these styles in one declaration. In this example, the declaration would be border: 2px solid red;.

Understanding Floating (Kindle Fire Only)

Floating an image is the process of wrapping text around it, which is typical of a print book. You can either float images to the left or to the right. You can actually float just about any element, and you will learn how to use floating to make drop caps in the Advanced CSS section. The float: left; and float: right; declarations are used to make an element (in our case a paragraph element wrapped around an image) float to either the left or right. This sounds like a very simple concept, but the actual way that floating ties in with HTML/CSS can be rather complicated, particularly in complex web design. If you are interested in learning about all of the intricacies of floating, A List Apart and CSS Tricks have excellent articles on the subject. For our purposes, think about floated elements as content that gets shoved to the left or the right, with the following content in the HTML markup trying to wrap around whatever was floated.

Suppose you want to have an image floated to the left with text wrapped around it. Some example CSS would be as follows:

p.imgleft
{
text-indent: 0;
margin: 1em 0 0 0;
padding: 5px;
text-align: center;
font-size: 0.8em;
float: left;
}

And the HTML:

<img src="tester.jpg" alt="Floated Left Baby Pic" width="134" height="200" /> Floated Left Pic
…

Image Floated to the Left on the Kindle Fire

You will notice that padding was added to the paragraph element that was floated. This ensures that the text that wraps around it does not directly butt up against the image. Also, the floated element is placed before the content that will wrap around it.

Comprehension of the CSS Box Model is needed to explain how the Kindle Fire renders it. In this case, the width of the box that is floated to the left collapses to the width of the image plus the padding. If you have a longer text caption (one that exceeds the width of the image), the width of the box will become the width of the caption. Observe this example:

Floated Box Expands Based on Caption Length

If you wish to avoid this problem, you can declare the width property of the floated element. This will ensure that the text wraps to the next line.

Clearing the Float (Kindle Fire Only)

Floating works well if the text wrapping around the image is long enough so that the height of its box is longer than the height of the image box. However, if you have a paragraph element that is short, the next paragraph element will also continue to wrap around the floated element. This may not be the design that you intended. Observe the following CSS for an image floated to the right:

p.imgright
{
text-indent: 0;
margin: 1em 0 0 0;
padding: 0 0 0 5px;
text-align: center;
font-size: 0.8em;
float: right;
}

And the HTML:

<img src="tester.jpg" alt="Floated Right Baby Pic" width="134" height="200" /> Floated Right Pic
A very short first paragraph that is too short to get around the image.
The next paragraph - not clearing the float!

Example of Not Clearing the Float

The fact that both paragraph elements are wrapped around the image is not a bug in the Kindle Fire. All markup and content in the HTML following a floated element will try to wrap around it, unless you clear the float. Clearing is done with the CSS declaration clear: both;, and it ensures that nothing is to the left or the right of that selected element. In this case, you want to clear the float on the second paragraph to ensure that it appears below the image floated to the right. Some example CSS to add to the preceding example:

p.clearit {clear: both;}

Some example HTML that alters the second paragraph:

The next paragraph - clearing the float and then some more!

Example of Clearing the Float

Perpetual worrywarts like to say that eBooks will never be the same as print books due to the lack of good methods to layout the images in reflowable content. However, HTML and CSS provide powerful tools that allow you to layout images in a variety of different ways (particularly on the Kindle Fire). Take the time to experiment with your presentation and content, and you will distinguish yourself as a professional eBook designer.

Next Post: Advanced CSS - Borders, Rounded Corners, and Box Shadows

April 24, 2012

Adding Page Breaks for Your Kindle eBook

Looking for a complete guide on eBook design and development? Please consider The eBook Design and Development Guide, which contains everything you need to know about HTML, CSS, EPUB, and MOBI/KF8 to make an eBook like a pro. Pick it up at Amazon for $6.99 today.

For a long time in web development, no one really cared about page breaks due to the simple fact that websites are designed to be scrolled. However, inserting page breaks and the art of pagination has become essential with eBook design. Proper page breaking vastly improves the reader's experience by clearly annotating breaks in content. Hopefully by now you have realized that page numbers are not needed or wanted in reflowable content eBooks, since the page size is completely arbitrary based on the reader's device and personal settings. But, that doesn't mean that page breaking at the right point in your content is unimportant. A lack of page breaks at the proper location in eBooks is truly the mark of an amateur. People who make the misguided step of converting an eBook directly from a .doc/.docx or, even worse, from a PDF, are bound to have pagination issues and a sloppy eBook.

Forcing Page Breaks in the Kindle

With CSS, forcing page breaks is very easy. There are two basic ways to do this: the page-break-before: always; declaration and the page-break-after: always; declaration. As you probably guessed, the former creates a page break before the markup selected is rendered and the latter creates a page break after the markup selected is rendered. Typically you will want to make page breaks in relationships to major breaks in the content such as chapter headings, section breaks, and appendices. Here is some example CSS to force page breaks:

h2.pagebreak_beforeme
{
margin: 2em 0 0 0;
page-break-before: always;
text-align: center;
}

h2.pagebreak_afterme
{
margin: 2em 0 0 0;
page-break-after: always;
text-align: center;
}

Example of Page Breaks in the Kindle Fire

All versions of the Kindle (Kindle Fire, Kindle for iOS, and e-ink Kindles) recognize these page break properties of CSS. Unfortunately, at the time of this writing there is a discrepancy amongst the different devices with the way that the margin is rendered from the top of the Kindle's viewport to the heading with a page-break-before: always; declaration. You will notice that a top margin of 2em was declared in the preceding CSS. Observe how this is rendered differently between the Kindle Fire, Kindle for iOS, and e-ink Kindles:

Problems with Margin Rendering on Page Breaks

The Kindle Fire clips the top margin (and top padding) on anything following a page break, while the Kindle for iOS and e-ink Kindles render it properly. This presents a frustrating conundrum, because anywhere there is a page break in your eBook (and there will most likely be several), you cannot control the spacing between the viewport and the top of the heading on the Kindle Fire. You may be tempted to add blank spaces to force spacing, but you should not resort to such silly tactics. To achieve perfection on your page breaks, there really is only one solution…

The Alternative and Better Method for Controlling Page Breaks on the Kindle

This guide has not discussed yet how to actually build the EPUB package and convert it into a MOBI/KF8 eBook. It is considered good practice to split your HTML file that contains all of your markup and content into numerous smaller files within the eBook package. For technical reasons, this prevents the eReading device from having to load one massive HTML file into its memory, which would make it run slower. Generally, splitting the files should be done somewhere logical (e.g. one HTML file for each chapter). At every split in the HTML file, the eBook on all Kindle devices (and all eReading devices for that matter) will appear as a page break to the reader, regardless of the CSS declarations. Whenever there is a new heading at the start of one of these HTML files, the margin declarations will be recognized.

You will learn more about file-splitting during the discussion of the EPUB package structure. For now just recognize the limitations of using CSS for page breaks.

Avoiding Page Breaks

In some cases you may want to avoid a page break within an element. A good example is the caption of an image. Seeing the image's caption on the page after the image does not make for a good reading experience. To avoid this common scenario, you can use the CSS declaration page-break-inside: avoid;, which will cause the eReading device to try and put all of the selected content on the same page.

Important Note: The page-break-inside: avoid; CSS declaration is only recognized on the Kindle Fire.

Here is some example CSS to declare a paragraph class where the Kindle Fire will try to render all the content in the paragraph element on one page:

p.pagebreak_avoid
{
page-break-inside: avoid;
text-align: center;
font-size: 0.8em;
}

And the corresponding HTML:

…
<img src="tester.jpg" width="400" height="600" alt="Picture of a Cute Baby" /> The Caption would go here. If it's really long, you probably want it to be on the same page as the picture.
…

Avoiding Page Breaks in the Kindle Fire

This image has a large height (600px) that almost takes up an entire page of the Kindle Fire in portrait orientation. What's happening is the Kindle Fire will insert a page break before the image to ensure that there is room on the subsequent page for both the image and caption. If page-break-inside: avoid; is not declared, you could end up in a situation where the image is rendered at the bottom of the page, and the caption appears on the following page.

Avoiding page breaks is also useful in other situations where you want to guarantee that content is rendered on the same page such as: multiple tables, lengthy quotations, or technical specifications. If you want to avoid a page break in between multiple paragraph elements, consider wrapping everything in a div block element and using CSS to select that div to have the page-break-inside: avoid; declaration.

Tip: If you're workflow involves debugging in a web browser (Chrome is recommended), you can see how the pagination functions in your document under the "Print Preview" feature. Only during printing do web browsers render page breaks.

Hyphens and the Kindle - Not Just Yet

So the good news is that the CSS3 specification allows for the control of hyphenation. This is especially useful in situations where you want to avoid hyphens (like headings). The bad news is that the team at Amazon has not coded their Kindles (even the Kindle Fire) to recognize the CSS to alter hyphenation control. The Kindles do not have a very aggressive hyphenation policy (unlike iBooks), so we're not totally S.O.L. as eBook designers. However, if they decide to issue an update that supports changing hyphenation, the CSS is pretty shake and bake:

Some selector {hyphens: none;}

No Way to Control Hyphens on the Kindle

April 18, 2012

Indents, Margins, and Alignment for the Kindle Fire

Block vs. First-Line Indenting

There are two commonly accepted styles for paragraphs: block and first-line indent. Block paragraphs are typical for non-fiction. It involves no indents in the opening sentence, but leaves a blank line in-between every single paragraph. First-line indent paragraphs have a small indent on the first sentence of the paragraph, but no space in-between paragraphs. Both paragraph styles allow the reader to easily determine when a paragraph starts and when a paragraph ends. This typography convention is not new, but it gets screwed up by poor eBook design.

Below is an example of the different paragraph styles:

Block vs. First-Line Indenting Example in Chrome

Joel Friedlander has an excellent post on the subject of paragraph styles, and he strongly advises to choose one or the other, but never both.

It may be tempting for you hipsters who still use typewriters to consider inserting a tag in-between every paragraph for the block style, or blank spaces for each first-line indent. This is extremely sloppy eBook design, and it is much easier (and professional) to utilize CSS to get the job done. A CSS property is used here called text-indent, which adds an indent to the first line of every paragraph.

For block paragraphs, you can use the following CSS:

p {
text-indent: 0;
margin: 1em 0 0 0;
padding: 0;
}

For first-line indent paragraphs, you can use the following CSS:

p {
text-indent: 1.25em;
margin: 0;
padding: 0;
}

Notice how the selector p was used, so that every single element will have this styling throughout the eBook. This makes life easier, because you do not have to insert a class name into every paragraph element that you want to have styled. It is considered a good practice to have between a 1em and 2em indent for fiction, and this guide recommends 1.25em. However, you should feel free to adjust it to get the look you desire. Also, don't forget the "trouble" mnemonic for remembering the four values following the margin property (top-right-bottom-left).

Aligning Text

All of the content in your eBook is not going to be paragraph elements. You probably want to add some chapter headings, section breaks, and other bit of content that will not have the same styling characteristics as your standard paragraphs. There is a handy CSS property called text-align that allows you to align the text with the self-explanatory values of left, center, right, or justify.

By default, the Kindle typically sets text-align to justify; however, other eBook reading devices (like iBooks and Adobe Digital Editions) sets text-align to left. The jury is still deciding on whether left-aligned text or fully-justified text is better for eBooks, so you should trust your instinct and go with the whichever one you feel is best for your readers.

Here is an example of different CSS styles being applied alter content alignment:

h2 {text-align: center;}
p {text-align: justify;}
p.leftaligned {text-align: left;}
p.rightaligned {text-align: right;}

And the HTML:

<h2>Some Chapter Heading in the Middle</h2>
This a normal paragraph. Some people prefer left-aligned paragraphs, but others prefer justified. Which one is better? You have to make that decision as the designer.
This paragraph is aligned to the left without an indent. Some people think this is more appropriate, particularly for works of fiction. However, it leaves a nasty ragged-right edge. If you like it better, set the alignment CSS for all paragraph elements to the left.
This paragraph is aligned to the right. This might only be suitable if you are ending something with a signature. Use with discretion.

Alignment Examples in the Kindle Fire

Important Note: The text-align property is actually aligning the text within the content area of the box, but it is not aligning the box. Even though the text appears to be centered in the above example, the h2 box is actually fanned out across the width of the viewport, since the margins are 0 by default. You need to adjust the margin property to actually align the box within the viewport. If you are confused by this, please consult Liz Castro's discussion of the subject.

Using Margins to Your Advantage

Now that you are a whiz at the CSS Box Model, you can actually adjust the margins of your eBook to utilize some neat typographical tricks. For instance, suppose you have a quote or citation that you want to offset from the regular content. Typically, block quotes have spacing on both the left and right so that their width is shorter than the standard content paragraphs. You can adjust the margins on the left and right to achieve this effect. Changing the margins should not be confused with altering the indent; because, the indent only affects the first-line while the margin affects the entire box (i.e. all lines of text within the paragraph).

Here is some example CSS for a block quote:

p {
text-indent: 1.25em;
margin: 0;
padding: 0;
text-align: justify;
}
p.blockquote {
text-indent: 0;
margin: 0 2.5em 0 2.5em;
padding: 0;
font-style: italic;
}

And here is the corresponding HTML:

This is the paragraph of normal content. In this case, it has a first-line indent so it would probably be a work of fiction.
Notice the margins here on this notable quotable. It's shorter on both the left and right.

Working with Margins

Tip: When creating your stylesheet, be careful when you use selectors that grab all elements (in the above examplep). If we had not made the declaration for the blockquote class o text-indent: 0;, then the indent for the quote would have been 1.25em creating an ugly offset.

As mentioned in the previous section, the older e-ink Kindles render margins differently than the Kindle Fire. When overlapping regions of adjacent boxes have margins not equal to zero, the e-ink Kindles will add them up, while the Kindle Fire renders the largest margin value. To avoid frustration, a good practice is to only declare the top margin with a non-zero value and always have the bottom margin be zero.

Depending on the design you are trying to achieve, you may want to make the first paragraph in a chapter have a larger top margin than subsequent paragraph elements, so that there is ample space between that first paragraph and the heading.

Some example CSS would be as follows:

h2 {margin: 0; padding: 0; text-align: center;}
p {margin: 1em 0 0 0; padding: 0; text-align: justify; text-indent: 0;}
p.firstpara {margin: 2em 0 0 0;}

And the HTML:

<h2>Chapter Heading</h2>
This is the first paragraph of a chapter that occurs after a heading. Notice how there is a 2em margin between the h2 box and this paragraph box.
This is just a regular old tag. It keeps a margin of 1em from the paragraph above it, so that the reader thinks that it is a blank line.

Tricking Out Kindle's Margins

Putting Everything Together

This is a lot of information to take in, and you really need to experiment on your own to get your eBook design the exact way you want it. Let's try putting together a story with all the styling characteristics you've learned so far. The content is a chapter of some Top Gun fan fiction, which may not be Shakespeare, but we can at least make the design look nice. Hypothetically, we want to have the following types of content in this chapter of our eBook:

a centered chapter heading
the first paragraph of the chapter must be spaced from the chapter heading by 2em
first-line indent paragraph style with a fully-justified alignment
a quote that has a block paragraph style with left-justified alignment

Some suitable CSS to accomplish this:

h2 {

margin: 0;
padding: 0;
text-align: center;
font-size: 1.5em;
font-weight: bold;
}

p {
text-indent: 1.25em;
margin: 0;
padding: 0;
text-align: justify;
font-size: 1.0em;
}

p.firstpara {
margin: 2em 0 0 0;
}

p.blockquote {
text-indent: 0em;
margin: 1em 2.5em 0 2.5em;
font-style: italic;
}

p.firstpara_after_blockquote {
margin: 1em 0 0 0;
}

span.i {font-style: italic;}

And the HTML containing this wretched story:

<h2>Top Gun Romance</h2>
Navy officers playing volleyball in the sun. Dogtags dangling from their muscular chests. It cannot be disputed that this scene was the most awesomest scene in the history of cinema.
What's this? Goose has a wife? Impossible! It must be cover. Did you see how he reacted when Tom Cruise made this phenomenal, witty quip.
Eh, lieutenant, what were you doing there?
Communicating. Keeping up foreign relations. You know… giving him the bird.
When I was in the Navy, we had a lot of discussion about how this movie really paved the way for Don't Ask Don't Tell to be repealed.
The movie, Top Gun, and it's excellent soundtrack were so ahead of its time.

Sample eBook Content with Various CSS Applied in Kindle Fire

There are a lot of CSS declarations in the preceding example, but this is typical of what a stylesheet for a real eBook looks like. Pay particular attention to how the top margins work. We had to declare special classes for paragraphs that come after the chapter heading and the block quote. This is because we wanted to have that extra amount of spacing not inherent in the normal first-line indent paragraph style. Bottom margins are kept at zero throughout all paragraphs to ensure the spacing is not different between e-ink Kindles and the Kindle Fire. Also note that we had to declare text-indent: 0; for the blockquote class, because we had already set text-indent: 1.25em; for all paragraphs. Recall the CSS specificity hierarchy ensures that anything with a class will override the declarations made for general elements.

As you become more proficient and advanced with CSS, be sure to keep a big-picture view in mind of how one simple declaration can affect the styling of your entire eBook.

Next Post: Page Breaks and Hyphenation

April 15, 2012

Understanding the CSS Box Model - eBook Design Tutorial

Looking for a complete guide on eBook design and development? Please consider The eBook Design and Development Guide, which contains everything you need to know about HTML, CSS, EPUB, and MOBI/KF8 to make an eBook like a pro. Pick it up at Amazon for $6.99 today.

Previous Section: Text Styling

Do you remember that episode of The Simpsons where Bart goes to the box factory? For you whippersnappers, this was from the mid-90s, so it may be a bit before your time. As an eBook designer, it helps to think like the boring manager--everything is boxes--even though it involves being ridiculed by Krusty. The content displayed on the eBook reading device is actually a series of boxes, one stacked on top of another. Every …, <div>…</div>, and any other block element tag forms a box in the content, where nothing can be to left or right of it. When you have an <h2> chapter heading followed by three paragraph elements, you have a total of four boxes. Understanding how to alter the properties of each box allows you to adjust the spacing, indents, border, and background. This permits you to make advanced typographical changes to the presentation of your eBook.

The CSS box model contains four regions:

Margin - area of empty space outside of the border that surrounds the entire box
Border - rectangle around the box that surrounds the padding and content
Padding - area of empty space between the content and border
Content - the inner area that contains the text or image from the HTML

CSS Box Model Visualized

Margin and Padding Syntax

This box model applies to each and every block-level element in your HTML markup. You can assign different values for the top, right, bottom, and left values of the margin and padding properties in your CSS. Like the font properties, it is a good practice to assign margin and padding values in em units of relative measurement; however using absolute measurements in px may be suitable. Here is an example of assigning margin and padding values in CSS:

p.someclass {
margin-top: 1.5em;
margin-right: 0;
margin-bottom: 0;
margin-left: 1.5em;
padding-top: 0;
padding-right: 0.1em;
padding-bottom: 0;
margin-left: 0.1em;
}

This assigns the values uniquely, which is fine, but there is a shorthand way to do this. The equivalent declaration for the margin values above would be margin: 1.5em 0 0 1.5em;, and for the padding values the equivalent statement would be padding: 0 0.1em;. When using four values after the margin or padding property, you just need to remember TRBL (i.e. "Top-Right-Bottom-Left"). If you only have two values, such as the padding example above, the first number will be the top and bottom value, while the second number will be left and right value. It is also possible to just use one number such as margin: 1em;, which would assign the 1em margins all around the box.

Border and Background

Some new CSS concepts have been introduced in this discussion of the box model. The border is the rectangle that encompasses the padding and content section. Styling the border will be covered in more detail in the advanced CSS section, but here is a basic way to add border to your content:

p.someclass {
border-width: 2px;
border-style: solid;
border-color: black;
}

The shorthand declaration for this would be border: 2px solid black;. We will also explore more on backgrounds in the future, but for now be aware that you can set the background color with the background-color: color value; declaration, where color value is either one of the 143 predefined color names or hexadecimal code. By definition of the CSS box model, the background is underneath the border, padding, and content areas, but not the margin area.

CSS Box Model in Action

The CSS box model can be difficult to comprehend, so here is an example that will help to alleviate some confusion. In this HTML markup and content, we have three paragraphs that all have different padding and margin properties:

This is paragraph #1 of the box example. It comes before paragraph #2 and has some margin and padding properties assigned to it.
This is paragraph #2 of the box example. It has margins but no padding.
This is paragraph #3 of the box example. The margins have been removed so you can see how they interact, but some padding has been added. Aren't you glad you grew up to be some schmoe working in a box factory.

Some example CSS to alter the margins would be as follows:

p.para1 {
margin: 3em 0 0 3em;
padding: 0.75em;
background-color: pink;
border: 2px solid black;
}
p.para2 {
margin: 1.5em 0;
padding: 0;
background-color: cyan;
border: 2px solid black;
}
p.para3 {
margin: 0;
padding: 12px 12px 0 6px;
background-color: orange;
border: 2px solid black;
}

Example of Paragraphs with Different Margin/Padding in Chrome

Can you spot the differences in each of the paragraphs? The first box has a margin-top of 3em and a margin-left of 3em with some even padding around the content area. The second box has 1.5em margins on the top and bottom, but no margins on the left and right. Additionally, it has no padding, so the content butts right up against the border. The third box has no margins and some uneven padding. Don't be confused that the box doesn't merge right up against the browser viewing window in Chrome, because most web browsers and eReading software automatically add bit of space between the viewing window and box (with the notable exception of Adobe Digital Editions).

Here is a blown-up sample between the first and second box to help you better visualize how boxes stack on top of one another:

Example of Paragraphs in Chrome with Specifics on Sizing

Tip: To center your box, you can make the declaration margin: 0 auto;.

CSS Box Model as It Applies to eBooks on the Kindle

You may ask what happens if you get in a situation where the margin-bottom is 2em for the first box, and the margin-top is 1em for the second box. The nether region between the first and second box is sort of getting mixed signals from the CSS. Will the space between them be added up cumulatively to 3em, will it be the bigger of the two (in this case 2em), or will the software crash and the world come to an end? The answer is that most browsers and eReading devices will choose spacing between the two that is the largest (in this case, the margin-bottom: 2em; for the first box). This is the case for the Kindle Fire.

However, for e-ink Kindles and the Kindle for iOS apps, eBooks are rendered differently (yes, this is becoming a frustrating pattern). Instead of the margins collapsing into the bigger margin value, they add up cumulatively. You will learn some tricks on how to deal with this discrepancy in the subsequent section. As an example, here are two screen shots on the Kindle Fire and an e-ink Kindle with the exact same CSS and HTML. There is a margin-bottom: 2em; on box#1 and a margin-top: 2em; on box #2. Note the discrepancies in rendering:

Margins Rendered Differently on the Various Kindles

Now that you can visualize all block element tags as "boxes", it is possible to tinker with the spacing between your headings and paragraphs to highly customize the look of your eBook. In the next section, you will learn how to adjust your margins, along with indentation and alignment, to give your eBook a professional polish.

Next Section: Adjusting Indents, Alignment, and Margins

April 6, 2012

Using CSS to Style Text for eBooks

Altering Text into Bold, Italics, Underlined, Strikethrough, and Small Caps

Utilizing bold, italics, underlined, and occasionally strikethrough and small caps text can convey meaning and emphasis for certain words. Certain content, like the titles of movies, is also recommended to be italicized per the Chicago Manual of Style. Don't come off as uneducated to your readers due to a misunderstanding of CSS, because you will get slammed in your reviews. The properties and values in CSS for this type of text are simply as follows:

Bold: font-weight: bold;
Italics: font-style: italic;
Underline: text-decoration: underline;
Strikethrough: text-decoration: line-through;
Small caps: font-variant: small-caps;

All that is required is applying these declarations using CSS selectors. Some example HTML of a passage in our book could be as follows:

<h2 class="mysmcaps">Chapter X</h2>
This paragraph needs some emphasis, as well as some strong emphasis. Being modest is best the worst, because I can't underline things.

The corresponding CSS to select the HTML would be as follows

h2.mysmcaps {font-variant: small-caps;}
span.b {font-weight: bold;}
span.i {font-style: italic;}
span.u {text-decoration: underline;}
span.strk {text-decoration: line-through;}

Styling Some In-Line Text

This type of CSS presentation you typically want to apply to only a word or two within a paragraph. Therefore, it is usually most appropriate to use an in-line span element within your HTML markup to hook the CSS with a class attribute. However, you could easily style entire paragraphs or even the entire <body> element as bold, italics, underline, or strikethrough.

Tip: The class names in the CSS are completely arbitrary, but you should name them something that is logical and easy to remember so you can repeat throughout the HTML of your eBook.

Leading

Leading is a typography term that originates from when typesetters would jam strips of lead in between rows of type. It defines the spacing in between lines. For the Kindle, you probably do not need to adjust this value, since the default leading on the devices is designed for a good reading experience. However, this is good typographical knowledge to have in case of future changes to the platform.

Paragraphs with short leading have the lines of text very close together, and it is a lousy reading experience, especially for fiction. Therefore, be careful when adjusting the leading. The CSS declaration to modify the leading is simply line-height: value;, where the value is a relative percentage (100% being the value for "single-spaced" paragraphs). 120% leading tends to look nice for both fiction and non-fiction, but you should feel free to experiment. The Kindle Fire and e-ink Kindles have a default of 120% leading. You may be familiar with the term "double-spaced" text, which is a leading value of 200%. It is not recommended that you ever double-space text in an eBook, because it looks incredibly childish and silly.

Some sample HTML and CSS where leading of varying amounts is applied is as follows:

This is a paragraph that has too little leading. It is terrible on the eyes and not recommended unless you hate your readers.
This is a paragraph that has a nice amount of leading. Notice how it is easy to read.
This paragraph has too much leading. Double-spaced paragraphs might be okay for manuscripts and book reports for your 7th-grade English teacher, but it looks extremely unprofessional.

The CSS:

p.shortleading {line-height: 70%;}
p.goodleading {line-height: 120%;}
p.bigleading {line-height: 200%;}

Examples of Paragraphs with Various Leading in Chrome

Leading adjustment with the line-height property does not affect e-ink Kindles or Kindle for iOS apps. On the Kindle Fire, you cannot have leading less than 120%. If you do specify a leading of 70%, as an example, the presentation would simply remain at the default of 120%.

Introducing em

Em is another typographical term that defines the height of the letter "M" block when the printing press was the hottest new invention since the Magna Carta. Why should you care? Frequently, web developers and eBook developers use measurements (e.g. pixels or "px") to define font sizes, indents, and the spacing of margins. In the digital age, the "em" unit has evolved into what is called a relative measurement, which means that the font-size, margin, indent, and other presentation properties will scale based on the reader's pre-defined font settings rather than a specific value assigned by the designer. That's great news for readers, because it allows them to read an eBook with their own preferences. Don't ever mess with a reader's experience.

The Kindle and Kindle Fire default font size is 16px. Therefore, using a font-size of 2em is equivalent to 32px (or 200%) as an example. Instead of trying to remember this when you use your stylesheet to adjust the sizes of fonts, you can simply use a value of 1.0em. When a reader changes their font setting to bigger or smaller on the Kindle, it will render the text appropriately regardless of whether the text is specified in an absolute and relative measurement. However, many web browsers and eBook reading devices render the font-size to the absolute measurement regardless of the user's preference. You should endeavor to use relative measurements as a best practice, so that your eBook will be reader-friendly across all devices.

Adjusting Font-Size

Now that you understand the importance of using the relative measurement "em", you can begin altering the size of your text. You probably want headings to be greater than 1em, content text to be 1em, and footnotes and endnotes to be a bit smaller font size than everything else. As an eBook designer, this task may seem trite and not particularly challenging. However, neglecting small details can create an unpleasant reading experience for your reader. One of the most common errors in eBooks is poorly sized text (such as the chapter heading being smaller than the content in the chapter).

To change the size of the text, you simply use the CSS property font-size: value;, where value is in a unit of ems. An example of the HTML would be as follows:

<h2 class="chapheading">Chapter 355</h2>
This is normal content typically seen on the Kindle. It has a 16px font at default settings1. It's important that you pay attention to text size throughout your eBook. CSS makes short work of this task.
<h3 class="appendixheading">Footnotes</h3>
1May be adjusted by reader

And the CSS:

h2.chapheading {font-size: 1.5em;}
h3.appendixheading {font-size: 1.25em;}
p.content {font-size: 1.0em;}
p.footnote {font-size: 0.8em;}

eBook of Varying Font Sizes

While the sizes are appropriate, one thing that looks unseemly in this example is the footnote number. Footnotes are typically in superscript at a font-size of about 60% (or 0.6em). To superscript the number, you simply use a span element to wrap around it, and use the declaration vertical-align: super;. You can also use this property to declare any other text that should be superscripted.

Some example HTML and CSS would be as follows:

This is normal content typically seen on the Kindle. It has a 16px font at default settings 1. That is my 1st footnote.

The CSS:

p.content {font-size: 1.0em;}
span.footnoteindex {font-size: 0.6em; vertical-align: super;}

Font Sizes with Superscript Support

Important Note: Keep in mind when designing eBooks for the older e-ink Kindles that they often render slightly different em values at the same exact size (e.g. 1.0em and 0.9em font-sizes both appear as 1.0em). The Kindle Fire does not have this bug. Trial and error using the Kindle Previewer is essential in ensuring the text is correctly sized on the e-ink Kindles.

Bug on e-ink Kindles with Font Sizing

Tracking

Tracking is another typographical term defining a fixed space between letters. While leading is spacing on the vertical axis for a paragraph of text, tracking is spacing on the horizontal axis. The CSS property for tracking is letter-spacing: value;, where value is a relative em value. The default percentage is 0em, so a negative value would bring letters closer together, while a positive value would push them further apart.

Some sample HTML and CSS where tracking of varying amounts is applied is as follows:

This is a paragraph with some squished tracking.
This is a paragraph with some wide tracking you could drive a truck through.
This is a paragraph with default tracking, which is generally fine.

The CSS:

p.smalltracking {letter-spacing: -0.1em;}
p.widetracking {letter-spacing: 0.1em;}
p {letter-spacing: 0em;}

Varying Levels of Tracking

While you are unlikely to have to adjust the tracking on a regular basis, it may be useful for specialized eBooks such as poetry collections or excerpting content from a newspaper to give that "old-timey" look.

Changing Colors

Using different colors was pretty much an exercise in futility a few years back, when virtually all eBook reading devices were grayscale. However, with the introduction of the Kindle Fire and the popularity of the iPad (which has the Kindle iOS app), it is now worthwhile to jazz up your eBook by adding some colors to your text. This statement should come with a word of caution. Back in the mid-1990s when the internet primarily consisted of Captain Kirk fanfic, colors were used and abused on websites to create content with seriously tacky presentation (blinking text anyone?). The big publishing houses have kept things simple by designing their eBooks with all-black text. However, don't be afraid to think outside of the box. Adding color to your text may be useful if you are working on designing something like an electronic textbook.

To add color to your CSS, you use the color: value; declaration. The value can either be one of the 143 predefined color names (e.g. navy, pink, black) or a # sign preceding a six-character hexadecimal code, which allows for over 16 million different colors (e.g. #000000 for white). These values can be easily generated on a number of sites online or using open source software.

Some sample HTML and CSS with different colors is as follows:

This is the final sentence in your textbook.
<h2 class="redheading">Exercises for Your Teams</h2>
<ol>
<li>The Blue team should focus on…</li>
<li>The Purple team should focus on…</li>
</ol>

The CSS:

p.content {color: black;}
h2.redheading {color: red;}
span#blueteam {color: #237DE4;}
span#purpleteam {color: #9123E4;}

Experimenting with Text of Different Colors

Next Post: Understanding the CSS Box Model

Pages

April 28, 2012

Adding Images to Your Kindle eBook

Styling Images (All Kindle Devices)

Adding Borders to Images (Kindle Fire Only)

Understanding Floating (Kindle Fire Only)

Clearing the Float (Kindle Fire Only)

April 24, 2012

Adding Page Breaks for Your Kindle eBook

Forcing Page Breaks in the Kindle

The Alternative and Better Method for Controlling Page Breaks on the Kindle

Avoiding Page Breaks

Hyphens and the Kindle - Not Just Yet

April 18, 2012

Indents, Margins, and Alignment for the Kindle Fire

Block vs. First-Line Indenting

Aligning Text

Using Margins to Your Advantage

Putting Everything Together

April 15, 2012

Understanding the CSS Box Model - eBook Design Tutorial

Margin and Padding Syntax

Border and Background

CSS Box Model in Action

CSS Box Model as It Applies to eBooks on the Kindle

April 6, 2012

Using CSS to Style Text for eBooks

Altering Text into Bold, Italics, Underlined, Strikethrough, and Small Caps

Leading

Introducing em

Adjusting Font-Size

Tracking

Changing Colors