Paul Salvette in Bangkok: design

Showing posts with label design. Show all posts

July 13, 2012

A New and Improved EPUB and KindleGen Tutorial

The EPUB and KindleGen tutorial originally written last year is one of the most viewed pages on this site. I believe the reason for this is that the information online is relatively sparse concerning this open eBook standard. I spent some time working on a new tutorial for building an eBook from the ground up, without the use of third-party software. The result is the EPUB and KindleGen tutorial on the BB eBooks website. There are also EPUB samples that you can download for your eBook projects on our Developers page.

Please let me know if you have any feedback or questions on it, and I hope that it helps eBook designers create better eBooks.

June 22, 2012

Our New eBook Startup - BB eBooks

We have officially launched our eBook design startup based in Bangkok, Thailand—BB eBooks. Our company’s business model is simple: “providing quality services at a low cost.” At BB eBooks we would like to assist independent authors and small presses turn their manuscripts into professional eBooks, so that they can make great sales at all the major online retailers (e.g. Amazon's Kindle Store, Barnes & Noble's Nook, iBookstore, Smashwords, etc.) The eBook conversion process can be frustrating for independent authors and small presses due to the changing requirements and new technologies. We want to help the writing community and our services are only a one-time fee—BB eBooks takes no royalties and does not charge hidden fees. Your manuscript can become an eBook for as low as $50, so please visit our website to learn how we can help you. We can also do Print-on-Demand. All of the quotes for our services we provide are no-obligation. Also, please sign up for the mailing list for promotions, design & marketing tips, plus eBook industry news.

BB eBooks also has an online eBook reader, and we have a small library of some of the classics in the public domain. This service is absolutely free for you to enjoy a casual read. The BB eBooks reader works on any device—PCs, tablets, and mobile—right in your favorite web browser. 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.

Thank you very much for your time, and we look forward to hearing from you.

Sincerely,

Bee and Paul

FOR IMMEDIATE RELEASE

===========

BB eBooks Provides Affordable Services for Self-Publishing Authors and Small Presses

Bangkok, Thailand – June 20, 2012 – BB eBooks recognizes the rapid growth of the eBook market and understands the writer's needs to have full control over their crafted work. With its technical knowledge, customer-oriented approach, and understanding of the eBook market, BB eBooks seeks to provide self-publishers and small presses with professional design services for all eBook formats. BB eBooks utilizes the latest technology – HTML, CSS, and XML – to make sure that all eBooks look excellent across a wide range of electronic devices.

One of the main advantages of eBooks is portability, replacing the burden of carrying around the tremendous weight of textbooks, hardcovers, and other large print formats. Typically, an eBook reader can store up to 1,000+ books and it facilitates sharing amongst readers instantaneously. Another benefit of eBooks is the low-cost due to lack of warehousing and distribution requirements.

Unfortunately, many eBooks sold by the major distributors (i.e. Amazon, Apple, and Barnes & Noble) are poorly designed and frequently criticized by readers. When asked how BB eBooks would improve standards in eBook design, Paul Salvette (Managing Director) replied, "We focus on using the latest technology standards and our own knowledge of HTML/CSS to handcraft each eBook, rather than just trying to use bloated software to convert a print book to an eBook."

Many authors and small presses face technical challenges in trying to achieve a professional-quality eBook. Panich Choonhanirunrit (Director of Marketing and Sales), who is also a writer, said, "We really want to alleviate the burden in the publishing process by providing the outstanding eBook design at an affordable price. That way, writers can spend their valuable time focusing on what's important—writing."

The company aims to turn information into professional eBooks as a service to the content-creating community. This will allow writers and small presses with limited budgets to sell their eBooks world-wide.

March 16, 2012

Introduction to CSS for the Kindle Fire and Applying a Stylesheet

Introduction to CSS for the Kindle Fire

Up until now in the guide, you have learned about using HTML markup to add content into your eBook. While nothing is more important than the actual written word, fixing it up with typographical best practices is a way to show your readers that your eBook is professional. Cascading Style Sheets (or CSS) is a way to add presentation to your eBook's content. This is accomplished by applying different rules, which are called declarations, to elements within your HTML that alter how the marked-up content appears to the reader.

As an example, here is an image of three different paragraphs that each has its own presentation or style:

Three Paragraphs Styled Differently

You will notice that the first paragraph is indented on the first line, the second has a different font, and the third is fully justified (aligned on both sides) rather than left-justified (aligned on the left side only). While the differences may be somewhat trivial, utilizing different styles can aid the reader in focusing their attention on certain portions of content and giving your eBook a professional look.

During the early years of web development, it became a fundamental axiom to separate content (HTML) and presentation (CSS) from each other. This is because many elements of content on a given website have the exact same type of styling, and it is much easier to change the code in a single CSS file than alter every single element of the HTML.

As an eBook designer, it is even more important to separate presentation and content. What if you had dozens of paragraphs indented the same way in a lengthy novel, and you wanted to make a small modification to each of those indents? If your presentation was coded into the HTML, you would have to go through each paragraph tag and make the necessary changes. If you're like the author, you would probably make one or two mistakes along the way resulting in some goofy indents on those paragraphs. For CSS you only have to make one change to alter the indents on all of these paragraphs. Do yourself a favor and save a vast amount of time by learning CSS.

In regards to the Kindle format, CSS can be used to apply styles specifically for the older e-ink Kindles or the Kindle Fire without changing the HTML. This is handy, because the Kindle Fire can support more advanced CSS (such as floating images and drop caps) that would create problems on the older Kindles. You can even completely hide content on the e-ink Kindles that would appear on the Kindle Fire, and vice versa. The new CSS3 specification is powerful and supports a variety of complex features such as box shadows, rounded corners, and even animation. It is recommended that you learn the easier ways to style CSS (such as changing the font size) and then work your way onto the complexities.

Applying a Stylesheet

There are three basic ways to apply CSS presentation to your HTML, and only one is recommended--using an external stylesheet with a .css file extension. However, you should be aware of the other two methods.
As an example, we would like to apply the following CSS, which makes any content in a <p> element be left-justified:

p {text-align: left;}

The first approach is to include it within the head portion of the HTML. The CSS will be enclosed within the <style> element as follows:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<title>Your Title Here</title>
<style type="text/css">
p {text-align: left;}
</style>
</head>
<body>
<p>My first paragraph that is aligned to the left. Hopefully my CSS will work.</p>
<p>My second paragraph that is left-justified. There is some debate over whether left-justified or fully-justified text is better in eBooks. It's hard to say. To each their own.</p>
</body>
</html>

The second approach, and the one that is not recommended at all, is to add the CSS style directly into the HTML as an attribute. This is accomplished by using style="some css" within the tag of an HTML element (be sure not to use the curly braces). To style the two paragraphs, the HTML would look as follows:

<p style="text-align: left;">My first paragraph that is aligned to the left. Hopefully my CSS will work.</p>
<p style="text-align: left;">My second paragraph that is left-justified. There is some debate over whether left-justified or fully-justified text is better in eBooks. It's hard to say. To each their own.</p>

This method is not recommended, since the major benefit of utilizing CSS is to not have to rewrite dozens of lines of code. Using the style attribute requires you to make changes within every HTML element you want to change.

The final approach and the one recommended by this guide is using an external stylesheet. Simply create a new file in your text editor called anyname.css. The content of the CSS file would simply be one line of text in this case:

CSS File Example with Color-Coded Syntax

If you are using a good text editor like Notepad++, the syntax formatting and coloring will appear different than the HTML file. This is extremely useful for troubleshooting.

To reference the CSS file for a particular HTML file, you simply add a link element into the head section of the HTML. An example is as follows:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<title>Your Title Here</title>
<link type="text/css" rel="stylesheet" href="mystylesheet.css" />
</head>
<body>
<p>My first paragraph that is aligned to the left. Hopefully my CSS will work.</p>
<p>My second paragraph that is left-justified. There is some debate over whether left-justified or fully-justified text is better in eBooks. It's hard to say. To each their own.</p>
</body>
</html>

This method of using an external stylesheet is recommended, because you can use the same stylesheet for numerous HTML files and the syntax is color-coded differently for advanced text editors.

Tip: You can keep the CSS file in a different directory and reference it in the link element using a relative path to the HTML file. This is considered a good practice. For example linking to a directory called cssfiles that is in the same directory as the HTML file would have the href="cssfiles/mystylesheet.css" attribute. Linking to the CSS file in the parent directory of the HTML file would have the href="../mystylesheet.css" attribute.

Next Post: Selectors and Declarations

February 23, 2012

Adding Hyperlinks to Your Kindle Fire eBook

External Hyperlinks

For hyperlinks outside of the eBook, you can designate targets as either websites (http://website.com) or email addresses (mailto:name@domain.com). Be sure to add the http:// or mailto: before your hyperlinks, or else your HTML markup will fail EPUB validation. The HTML markup to add a hyperlink is an in-line element with the following syntax: <a href="http://website.com">hyperlinked text</a>.

Getting back to the elf story, suppose you want to hyperlink the phrase “Joe Selfpubber” with an email address that opens the eReading device's email application and "Drop him a line" with a hyperlink that goes to the author's website. The HTML markup would be as follows:

<p><a href="mailto:joeselfpubber@gmail.com">Joe Selfpubber</a> is trying to make it big by selling his eBooks on the Kindle Fire so that he can quit his lousy day job. <a href="http://joeselfpubber.com">Drop him a line sometime</a>.</p>

Adding Hyperlinks with HTML

By default, most web browsers and eReading devices will render hyperlinked text blue and underlined. You can alter this presentation using CSS. By clicking on “Drop him a line sometime”, you will be taken to http:// joeselfpubber.com, and by clicking “Joe Selfpubber”, it will pull up the eReading device's or computer's email client with “joeselfpubber@gmail.com” in the TO: block.

Tip: Hyperlinks offer the opportunity to link to content outside of the eBook that may be of interest to your readers, as well as a chance to content market your own goods and services. Do not pass up the occasion to utilize hyperlinks extensively.

Important Note: Some websites use ampersands within the URLs for certain links. In order for your markup to be valid, you need to convert the ampersands into HTML entities (i.e. &) or use percent encoding (i.e. & should be changed to %26).

Internal Hyperlinks

Internal hyperlinks target specific content within the eBook itself, permitting the reader to jump from section to section. To define where the hyperlink should target, you must establish anchors within your eBook. This is accomplished using the id="anchorname" attribute, which can be placed inside almost any HTML tag (e.g. <p>, <div>, <span>, <a>, etc.). The id attribute is also important in styling your content with CSS.

Establishing the hyperlink to target the anchor is done in a similar fashion as hyperlinking to external content. The anchorname defined in the id attribute gets targeted by using the # key. For example, <a href="myebook.html#anchorname">hyperlinked text</a> would target the content with the id="anchorname" attribute inside the myebook.html file. You should use a relative path for the .html file.

Here is an example of adding anchors and internal hyperlinks to your HTML markup in a file called myebook.html:

<p id="section1">This is the 1st paragraph.</p>
<p>By clicking on this <a href="myebook.html#section1">link</a>, you'll go back to the 1st paragraph.</p>

By clicking on the hyperlinked text, the web browser or eReading device will go back to the first paragraph. You will notice that the value of the id attribute is completely transparent to the reader.

Internal Hyperlink Example in Google Chrome

Important Note: The value of the id attribute must be labeled uniquely throughout the HTML document. Also, it must not start with a number or special character (e.g. 1anchorname, $anchorname, etc.)

Internal Hyperlink Bug in Kindle

There is a bug in the way the KF8/MOBI format is compiled that provides such a poor reading experience a section must be devoted to its awareness. Technically, you can specify an anchor with in-line HTML markup like <a id="anchor1" /> or <span id="anchor1">some text</span>. However, when the reader clicks on a hyperlink to this anchor in the older e-ink Kindles or the Kindle apps, it will completely mangle the formatting of the target text that is designed using CSS. Sadly, this problem was not corrected by Amazon in their most recent release of the KindleGen software.

This is problematic because you often want your internal hyperlinks to target specific chapter headings. For example, the design of this sample novella has CSS to style it, and there is an in-line HTML anchor within the HTML markup for the heading:

<p class="chapheading"><a id="chap3" />Chapter 3<br />Las Vegas</p>

If a hyperlink to #chap3 is clicked on within any Kindle device, except the Kindle Fire, the following bug occurs where the formatting is completely blown out:

Bug with Internal Hyperlinks Example on the Kindle for iPhone

To avoid this only use the id attribute within block elements. To be safe you can wrap <div>…</div> tags around the entire heading and insert the id attribute to define the anchor. The HTML markup for this particular case would look as follows:

<div id="chap3"><p class="chapheading">Chapter 3<br />Las Vegas</p></div>

This method of including the id attribute in a separate <div> element will avoid the Kindle bug.

Tip: In addition to defining anchors within the <div> element, be sure to label your anchors in a logical fashion to help yourself in the design process and workflow.

Next Post: Basic CSS

February 16, 2012

Adding Ordered and Unordered Lists to Your Kindle eBook

Examples of Ordered and Unordered Lists

Older e-ink Kindles have marginal support for lists; however, they typically work as long as the presentation properties aren't modified using CSS. The Kindle Fire has much better support for lists, and their presentation can be extensively altered using CSS.

HTML Markup for Lists

The entire contents of an ordered or unordered list are wrapped in the tags <ol>…</ol> or <ul>…</ul> respectively. Within these elements, text is added in between <li>…</li> tags to denote the content for one bullet. The HTML markup for the above screenshot would look as follows:

<p>Things to do today (in order)</p>
<ol>
<li>Fire agent</li>
<li>Learn how to design an eBook</li>
<li>Upload my eBook to the Kindle store</li>
</ol>
<p>Things to do today (in no particular order)</p>
<ul>
<li>Walk the dog</li>
<li>Write 1,000 words</li>
<li>Make alimony payments</li>
</ul>

Important Note: Do not wrap the contents of an entire ordered or unordered list within <p> tags (i.e. <p><ol><li> Item1 </li></ol></p>). This is improper coding and will result in failed HTML validation. Also, be sure to follow the rule that the first tag opened should be the last to be closed. <ol><li>…</li></ol> is correct, but <ol><li>…</ol></li> is incorrect.

When working with lists, it is comforting to know that if the content for one bullet is wrapped onto the next line, it will be indented the same distance from the bullet as the first line. Therefore, all the text inside a list will be flush. This is a nice typographical feature when you want to display specific information to your reader.

Lists Appear Flush from One Line to the Next

Nested Lists

Nesting lists allows you to display sub-bullets under one bullet. This is particularly useful when constructing the Table of Contents. While support for nested lists on the older e-ink Kindles is poor, it works well on the Kindle Fire. Care must be taken with the syntax and tag placement for nested list HTML markup, and use of an HTML Validator is almost essential. If you want to add a sub-level list to one bullet, add a separate ordered or unordered list in between the opening <li> and closing </li> tags of the root-level element. Some sample HTML is as follows (indented for convenience):

<p>Things to do today (in order)</p>
<ol>
  <li>Fire agent</li>
  <li>Learn how to design an eBook utilizing my awesome new HTML and CSS skills
  <ul>
    <li>Brush up on KindleGen compiling</li>
    <li>Debug my EPUB</li>
  </ul>
  </li>
<li>Upload my eBook to the Kindle store</li>
</ol>

Nested List Example in Google Chrome

Notice how the closing </li> for #2 on the ordered list comes after the </ul> for the sub-level list.

When designing eBooks for the Kindle, it is a good practice to be cautious in the use of nested lists due to their poor rendering on older e-ink Kindles when CSS is applied. However, if no CSS is defined for the list, they will have acceptable rendering.

Acceptable Rendering of Nested Lists on the Kindle

Next Post: Working with Hyperlinks

February 15, 2012

HTML Tables on the Kindle Fire

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.

Previous Post: Embedding Audio and Video

Tables are useful for displaying tabulated data in a logical format, and are particularly crucial for data-heavy non-fiction works. They can be used within the content of the eBook, or they may be more suitable to place in the appendix. A long time ago, web design utilized the HTML markup for tables to layout the entire webpage into various sections (e.g. the banner, the sidebar, and the main content). You should never use this approach when designing your eBook for the Kindle Fire. Limit your use of tables to tabular information only.

The original Kindle does not support HTML tables and flattens the information into one long column; however, later versions of the e-ink Kindles (e.g. Kindle DX, Kindle 3, etc.) have marginal support for them. The Kindle Fire allows extensive styling of HTML tables, which you will learn about in CSS, and renders them as well as a web browser. To ensure readability across all Kindle devices, Amazon advises using images for tables rather than HTML markup, particularly for highly complex tables. Nevertheless, you should learn about the basic HTML markup for tabular information to insert simple tables into your eBook.

The HTML Table Model

Proper HTML markup for tabular information is accomplished by encoding your content row by row rather than by columns. This is because the web browser or eBook reading device renders the markup by stacking rows on top of each other to create a table. Within each row there are cells where content can be inserted. For example a table with 3 rows and 3 columns would have 9 cells total, and the HTML markup would specify three rows that each had three cells.

The basic HTML tags for tables are as follows:

<table>…</table>: wraps around the entire table to indicate that the HTML nested inside is for tabular information
<tr>…</tr>: markup that indicates a table row, which wraps around the individual cells
<td>…</td>: markup that wraps around the content of an individual cell
<th>…</th>: similar to <td>, except used for table header cells

Additionally, there are two attributes for the <td> element you should be aware of if you would like to merge cells (i.e. turning two or more cells in a table into one big cell):

colspan="x": indicates that the cell should merge across x columns in the row
rowspan="x": indicates that the cell should merge across x rows in the column

For eBook designers accustomed to building tabular information in programs like Excel, this HTML markup may not be particularly intuitive. Therefore, the HTML table model should be visualized as follows:

HTML Table Model Visualized

You should limit the size of your tables inside eBooks due to the small viewing windows of eReading devices (such as the Kindle for iPhone app). This guide recommends no more than 4 columns inside your table, and no more than approximately 10 rows. Tables that appear across multiple pages on the Kindle do not paginate well and are a general headache for readers. Consider splitting complex tables with lots of information into multiple tables.

HTML Example for a Table

Say you wanted to have a table of some exciting 80s movies in your eBook. The table is similar in structure to the preceding table model example. The top row will include table header cells that indicate the type of data in each column. The subsequent rows will include 3 cells of information (name of the movie, year it was released, and a rating). The last two rows will have one merged cell that spans across two columns and two rows. An example of the HTML markup would be as follows:

<h2>Awesome 80s Movies Table</h2>
<table>
<tr>
<th>Movie Name</th>
<th>Year Released</th>
<th>Rating</th>
</tr>
<tr>
<td>Hard Rock Zombies</td>
<td>1985</td>
<td>7</td>
</tr>
<tr>
<td>The Wizard</td>
<td>1988</td>
<td>9</td>
</tr>
<tr>
<td>Spinal Tap</td>
<td>1984</td>
<td>11!</td>
</tr>
<tr>
<td colspan="2" rowspan="2">Placeholder for More Movies</td>
<td>1</td>
</tr>
<tr>
<td>3</td>
</tr>
</table>

As you can see, reading the HTML markup from top to bottom goes row by row within the table element. You do not have to explicitly clarify how many rows and how many columns are inside the table, because HTML understands the number of columns will be the maximum amount of sequential <td> elements within a row, and the number of rows is the number of <th> and <tr> elements within the <table>…</table> tags. Therefore, you could always add more table rows at a later time.

Without CSS styling of the tables, presentation behavior can be random on the Kindle. The following example of the HTML markup for the table above would appear in the Kindle Fire and e-ink Kindles with some minor CSS styling that you will learn about later:

An Example of a Table Rendered in the Kindle Fire and Older e-ink Kindles

Tip: Indenting your HTML markup with spaces can help you understand where elements are nested; however, it is by no means required. Whether or not you indent your HTML has no effect on how it is rendered by a web browser or eReading device.

Alternative Method of Displaying Tables as Images

Because the HTML markup for tables can be a bit cumbersome, it may be advantageous to just save the table as an image and insert it into the eBook. Simple tables as images, if saved in the GIF format, are rarely large in size. This is also beneficial if you are working on designing an eBook and only have a PDF manuscript.

To save a table as an image, perform the following steps:

Open the document with the tabular information
Copy the contents of the document to your clipboard (alt+printscreen for Windows and command+control+shift+3 for Mac users)
Paste the contents of the clipboard into your favorite photo-editing software
Crop and resize as needed
Save as a GIF image

Example of Saving a Table in a PDF to an Image

This technique will ensure that the table can be seen as intended by the author across all Kindle devices. However, ensure that you keep the size of the table small and the image dimensions large so that the tabular information is legible.

Next Post: Working with Lists on the Kindle Fire

February 9, 2012

Embedding Audio and Video in eBooks on the Kindle Fire

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: Working with Images

Embedded audio and video is defined as actually packaging the files into your eBook, while streaming audio and video is linking your HTML markup to a server (e.g. YouTube) where the eReading device downloads it for use by the reader. So, the good news is that embedded audio and video only works on the Kindle App for iOS devices (i.e. Kindle for iPad, iPhone, etc.), which is a small fraction of readers, and streaming audio and video is not allowed inside Kindle eBooks at all. This sort of makes for a difficult interactive experience. Since embedded audio and video files are massive in size, it is almost pointless to include them in an eBook you plan on selling at the Amazon Kindle store. Nevertheless, you should become familiar with the HTML5 elements that make embedded audio and video possible in the hopes that future Kindle hardware and software will be able to support them.

The Rise of HTML5 for Audio and Video

For a long time, audio and video on websites was only supported by a sloppy plug-in process with Adobe's Flash Player that was equally cumbersome no matter what browser you were using. Following Steve Jobs' quip that Flash was lousy for mobile devices, web standards have been shifting toward the much easier to code and consume HTML5 elements for multimedia. All major browsers support the new audio and video elements and provide automated, simple controls to play the media, adjust the volume, and mute.

The problem lies with the fact that different browsers recognize only specific formats. This is due to codec licensing fiascoes and the fact that all the major players (Apple, Microsoft, Mozilla, Google, etc.) having different ideas on the best way to encode multimedia. Amazon has chosen to go with the codecs that are supported by Microsoft and Apple, which is the mp4 format for videos and mp3 format for audio. If you have audio and video content that you want to embed that is not in the mp4 or mp3 format, you can convert it with open source software such as VLC.

Embedding Audio and Video in Your eBook

The HTML5 elements for embedding audio and video are fairly simple. Suppose you had a video of a baby hanging out with the relatives in northeastern Thailand in a file called baby.mp4, along with some amusing audio in a file called babyscreaming.mp3. Some sample HTML code would be as follows:

<p>I'm one of those annoying fathers that is so boring he only talks about his damn kids.</p>
<p> <audio src="babyscreaming.mp3" controls title="Audio of a Baby Screaming"></audio></p>
<p><video src="baby.mp4" controls poster="images/babyplaceholder.jpg" title="Video of a Thai Baby"></video></p>
<p>That's it for right now.</p>

Embedded Audio and Video in the Chrome Browser

The audio and video files will not play until the user clicks on them. Notice that, like the img element, the <audio> and <video> tags are nested within paragraph tags to give them block element behavior (i.e. on their own line). There are ways to make the audio and video play automatically in web browsers, but this is highly annoying for people goofing off at work and will not be discussed in this guide.

Let's break down each of these attributes within the HTML5 multimedia tags. The src attribute (required) is similar to the img element in that it specifies a relative path to the source file. The controls attribute (required) tells the browser or eReading device to use the automatic controls programmed into the software. The title attribute (optional) provides a description of the content that is generally displayed when the mouse pointer is rolled over the controls. The poster attribute (optional) in the video element provides an image to be shown in the video frame until the reader clicks the video to play.

Amazon imposes some additional requirements beyond the HTML5 specification to ensure a good reading experience across all Kindle devices. If the reader is not using the Kindle App for iOS, then there should be a way to at least inform them that there is multimedia accompanying the eBook. The additional requirements per Amazon are as follows:

Audio and video files must be kept in a separate directory entitled audiovideo (e.g. audiovideo/baby.mp4)
Metadata about the description of the multimedia and its length in minutes and seconds must be provided within the paragraph tags (e.g. A Video about Baby (00:20)</p>)
Fallback text must be provided within the audio or video element if the Kindle device cannot render the mp3 or mp4 format (e.g. <video…This device does not support the required audio or video format. Please view it at my website.</video>)
Multimedia content requires a reference in the Table of Contents

Utilizing all of these requirements in the HTML markup would result in the following code about this hypothetical baby video in northeastern Thailand:

<p>I'm one of those annoying fathers that is so boring he only talks about his damn kids.</p>
<p> <audio src="babyscreaming.mp3" controls title="Audio of a Baby Screaming">This device does not support the required audio or video format. Please view it at my website.</audio> An Audio Clip of Baby Screaming (01:34)</p>
<p><video src="baby.mp4" controls poster="images/babyplaceholder.jpg" title="Video of a Thai Baby"> This device does not support the required audio or video format. Please view it at my website.</video> A Video about Baby (00:20)</p>
<p>That's it for right now.</p>

Important Note: The fallback text in between the <audio></audio> or <video></video> tags will only render if the multimedia files cannot be read by the eReading device. The content after the </audio> or </video> tag will always render.

The audio and video will be embedded properly on Kindle iOS apps; however, the fallback content of telling the reader to check out baby on a website will appear on older e-ink Kindles, Kindle App for Android, and the Kindle Fire. Below is an example of how the same HTML markup would render on the Kindle Fire and Kindle iPad app:

Example of Fallback Content and Embedded Content

Embedding of video and audio in Kindle eBooks leaves much to be desired due to the lack of support. However, future Kindles will most likely move toward supporting this content to provide a more interactive experience for the reader—one can only hope.

Next Post: Working with Tables

February 5, 2012

Working with Images on the Kindle Fire

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: Introduction to HTML for the Kindle Fire

Whether a vignette in between section breaks or a portrait of yourself playing with your cats in your workspace, images are a way to spice up your manuscript and make your eBook a more enjoyable read. While the e-ink Kindles are grayscale, the Kindle Fire, as well as other eReading devices like the Nook Color, iPad, etc., are in color. You don't need to be too concerned about including color images for some devices and grayscale images for others, because the e-ink Kindles will automatically convert color images to grayscale.

Images can be a bit tricky to work with, particularly when making them viewable on older Kindles, but they are well worth the time and effort. Do yourself a favor and get some free software such as Photoscape, to resize your images and convert them to various different formats. It may also be worthwhile to learn how to create your own images using Gimp (free) or Photoshop (expensive). For those not artistically inclined, public domain images can be acquired for commercial use at Wikipedia or at Open Clip Art. You can also purchase images for royalty-free usage at sites like iStockphoto or Dreamstime.

Important Note: Images that are used in eBooks should always be saved in RGB color model rather than CMYK, because CMYK is strictly for printing purposes. Also, Amazon advises saving images as 300 pixels per inch (300 ppi).

Image Formats Supported by Kindle

You should be aware of the different formats of images, because they should be chosen based on what type of imagery you are trying to display to your readers. The Kindle Fire supports four different formats as follows:
GIF: 256-color format that is suitable for line art, tables, and graphical text.
JPG: 16 million-color image format that can be degraded in quality to keep the size small. JPG is the most used image format and is suitable for photographs and artwork
PNG: high-quality, big-file size image format that can be used for logos, small complex images, and anything you want to look sharp.
BMP: Uncompressed image format (recommend never using due to its large file size).
SVG: Scalable Vector Graphics format that is composed of XML describing how the two-dimensional canvas should be drawn rather than pixels. As the name implies, it can be scaled to any size. This format is only supported on the Kindle Fire.

Size Does Matter for eBook Images

Why not just use the high-quality PNG format for all your images to give your readers the most sharp reading experience? Unfortunately, PNG images tend to be much larger in size than JPGs and GIFs, and the Kindles have limited space. You want to keep the size of your image files as small as possible without sacrificing too much quality. Many readers will be downloading your eBook via a cellular connection or through a crummy wireless connection at the local Starbucks. If your eBook is a huge clunker that takes up the same amount of space as a full-length movie, your reader may have a bad first impression waiting for the eBook file to download to their device.

Most importantly, size costs money. Amazon has a policy of charging a "delivery fee" to the publisher based on the size of your eBook for each one sold. It is currently $0.15/MB for any eBook with the 70% royalty option (typically eBooks selling at $2.99 or higher). So, if you are trying to sell a 5MB eBook, you would lose 75 cents per eBook. It may not sound like much, but if you plan on selling a thousand eBooks, that's $750—a full rent check for most of us. Beware of the size of your eBook.

Here are some tips to keep the file size of your images minimized:

For line-art, tables, and images that are text-heavy, use the GIF format, which doesn't have many colors.
Always consider degrading the quality of your JPGs with photo-editing software (simply cutting down the quality from 100% to 90% can half the size of the image file in some cases)/
Only use PNGs or SVGs when you need an image to look sharp (like your personalized logo).
Always cut down the image height and width to the size you want it to appear on the Kindle Fire. Since the Kindle Fire viewport is 1024x600px, you never need an image bigger than those dimensions (not applicable to the SVG format since it can be scaled to any size).
Amazon Kindle allows image sizes up to 256KB, but you should get each image much smaller than that. When the MOBI/KF8 eBooks is compiled, KindleGen automatically converts images greater than 127KB to a smaller size.
The cover image should be exactly 600x800px. A nice cover image will typically be in between 80-127KB.
Images within the eBook (except for the cover image) should be no bigger than 500x600px so they work properly and don't get automatically converted on older e-ink Kindles with the 524x640px viewport.

Adding Images to Your eBook

Now that you understand the various formats and how to minimize the size, it's time to start adding them into your HTML markup. The HTML tag is simply <img />; however, it's important that you include attributes. HTML attributes provide additional information about the particular element they reside in. For example, here is some markup that tells the browser or eReading device to insert the tree.gif image in the images directory with a description of "A Picture of a Tree".

<img alt="A Picture of a Tree" src="images/tree.gif" />

The src attribute (pronounced "source") defines the directory and the image filename, while the alt attribute provides an alternative description of the image in case the browser or eReader cannot render it properly. The file directory specified in the src attribute is relative to the directory where the HTML file is located. So, if your html file is in c:/temp/myebook.html, the tree image would be in c:/temp/images/tree.gif. You always need to include the alt attribute for images in order for your eBook to pass EPUB validation.

Important Note: The filename and directory specified in the src attribute is case sensitive.

Try adding an image into the elf story to see how it looks in your browser. Some example HTML would be as follows:

<p>It was not a good time for the elves residing in the woods. The warlocks had poisoned their fields and stolen all their food, the bastards.<img src="images/tree.gif" alt="A Picture of a Tree" /></p>
<p>By the time the manuscript got around to the second paragraph, everyone but one elf was dead—what a shame!</p>

Example of an Image In-Line with the Content

If you want to have the image function like a block element and not be placed in-line with the text, you can wrap paragraph tags around it like so:

<p>It was not a good time for the elves residing in the woods. The warlocks had poisoned their fields and stolen all their food, the bastards.</p>
<p><img src="images/tree.gif" alt="A Picture of a Tree" /></p>
<p>By the time the manuscript got around to the second paragraph, everyone but one elf was dead—what a shame!</p>

Example of an Image Acting Like a Block Element

In general, you should wrap the self-closing <img /> tag in paragraph tags to make it function like a block element. By using CSS to adjust the paragraph tags, you can wrap text around the image, align it, and even add drop shadows. Unfortunately, for the older e-ink Kindles, they have very limited support for where you can place the image. They must not be "floated", which means they cannot have text wrapping around them. This makes fancy typography like drop-caps impossible. There is also the problem of the older e-ink Kindles randomly resizing your images.

Avoid Automatic Resizing of Images on Old Kindles

The tree.gif image used in the above example is 179x145 pixels. Once the MOBI/KF8 file is compiled, the tree image will look okay in the Kindle Fire as well as the Kindle apps for iPhone, iPad, and Android. However, the older e-ink Kindle will completely bloat the dimensions of the image, making the aspect look ridiculous and the image appear grainy.

Example of Image Mangling in Older Kindles

To avoid the maddening automatic resizing of images on older e-ink Kindles, you can specify height and width attributes. This forces the image to display with its exact dimensions. An example of the markup for the 179x145px tree image would be as follows:

<p><img alt="A Picture of a Tree" height="145" src="images/tree.gif" width="179" /></p>

Proper Image Resizing for Older Kindles

Tip: The order of attributes does not matter inside HTML elements. For example, you could have specified the width attribute before the height attribute, and the HTML markup would be perfectly valid.

Special Note on Using SVG Images for the Kindle Fire

Since SVG images can be scaled to any size, you should always specify either a height or width attribute within the <img /> tag. By only specifying one of the attributes, the aspect of the SVG will be maintained. Some example HTML markup for an image called fancytree.svg would be as follows:

<p><img src="images/fancytree.svg" height="200" alt="A Picture of a Tree with Awesome SVG" /></p>

An SVG Image in the Kindle Fire

Unfortunately, SVG images are only supported in the Kindle Fire. Older e-ink Kindles (including the Kindle App for the iPad and iPhone) will completely ignore them and not even display the description in the alt attribute. Once you master CSS, you will learn some tricks to show the SVG image for readers with the Kindle Fire, while providing a fallback JPG or GIF for readers with older Kindles.

Next Post: Adding Audio and Video Content to Your eBook for the Kindle Fire

Pages