tag:blogger.com,1999:blog-89176015771611813962024-03-13T17:01:34.882+07:00Paul Salvette in BangkokThailand, Bangkok, Land of Smiles, Writing, Author, Flash Fiction, Short Story, Novella, Iraq, Veterans, Military Isan, Kwaai, Buffalo, Fiction, กรุงเทพฯ, ควาย, นักเขียน, เขียน, Baan Nguu, บ้านงู, On Nut, Udom Suk, Suan Luang, Phra Khanong, Bang Na, Mechai, Viravaidya, Horror, Speculative, Genre, E-books, Kindle, ภาษาอังกฤษ, English Language, Thai Language, Learn Thai, eBook formatting, Formatting, XHTML, Paul Salvette, MOBI, EPUB, Smashwords, Amazon, Kindle, Nook, Self-publishing, IndiePaul Salvettehttp://www.blogger.com/profile/11818202201018195312noreply@blogger.comBlogger117125tag:blogger.com,1999:blog-8917601577161181396.post-44087038220686076842012-10-25T20:43:00.000+07:002012-10-25T20:57:42.181+07:00With New Kindles Come New ResponsibilitiesSo, Amazon r<a href="http://epubsecrets.com/amazon-announces-kindle-publishing-tools-v2-7.php">eleased a new build of KindleGen today</a>. It is the program that makes the Kindle eBooks used by publishing professionals. As a reader, you could probably care less, but I'll tell you why you should be interested. This new program ensures that eBooks can be properly read on the new Paperwhite and Kindle Fire HD devices. Therefore, I spent the better part of the day getting my fiction recompiled so it's more enjoyable for readers with these new-fangled contraptions. Having a piss poor eBook being sold to your readers is sort of asking for the Rodney Dangerfeld treatment.<br />
<br />
Anyway, here's some of my fiction that's up there now: <br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfdvtSzrnTMCShtvW-DPmxp2EiFgnjm6Tv3vmOxWylssUkUx3fbzWUmDU3nCAKC-Fd2UDrISfo3aZOWtPcKC4X0JdHwEUMYYaJStcOGPkoa6hHFwmjHMbFDt6cgasd8skMuWoP3wkV5Ew/s1600/america-goes-on-kindles.gif" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="107" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfdvtSzrnTMCShtvW-DPmxp2EiFgnjm6Tv3vmOxWylssUkUx3fbzWUmDU3nCAKC-Fd2UDrISfo3aZOWtPcKC4X0JdHwEUMYYaJStcOGPkoa6hHFwmjHMbFDt6cgasd8skMuWoP3wkV5Ew/s320/america-goes-on-kindles.gif" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Paperwhite on the Left and Kindle Fire on the Right (<a href="http://www.amazon.com/gp/product/B005I5WYU6/ref=as_li_tf_tl?ie=UTF8&tag=paulsal-20&linkCode=as2&camp=217145&creative=399373&creativeASIN=B005I5WYU6">America Goes On</a>)</td></tr>
</tbody></table><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWW3ElwBoWwkbw5OuF4cfsHlaiDu1RTvolCOEdODTq0nsrpsNKPaXuJ4zQPfGB54CdUHWv1Rz3-jXS5kFNaIfiO8SoB9BDC_FXqOLVDyup0MEBhfWRdjB91CFhPv_hV6TRk7YEoIREIvM/s1600/america-goes-on-kindlefire.gif" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWW3ElwBoWwkbw5OuF4cfsHlaiDu1RTvolCOEdODTq0nsrpsNKPaXuJ4zQPfGB54CdUHWv1Rz3-jXS5kFNaIfiO8SoB9BDC_FXqOLVDyup0MEBhfWRdjB91CFhPv_hV6TRk7YEoIREIvM/s320/america-goes-on-kindlefire.gif" width="311" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Drop Caps and Glyphs - W00T! (<a href="http://www.amazon.com/gp/product/B005I5WYU6/ref=as_li_tf_tl?ie=UTF8&tag=paulsal-20&linkCode=as2&camp=217145&creative=399373&creativeASIN=B005I5WYU6">America Goes On</a>)</td><td class="tr-caption" style="text-align: center;"><br />
</td></tr>
</tbody></table><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDVuhA2Inpz9J8mRwav3LtAgzBqJZ_7Ut6W1qT2PqExXtDmyFzGMiiwiOo4Wxt1yLUZTO1EkrNcw8lO4FiwiLwttilVwbwLGnAawXWt-fSpE_m-Ai0c9LyK3BNBtex07yGBBHg9UnaPmo/s1600/saddamheads.gif" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="297" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDVuhA2Inpz9J8mRwav3LtAgzBqJZ_7Ut6W1qT2PqExXtDmyFzGMiiwiOo4Wxt1yLUZTO1EkrNcw8lO4FiwiLwttilVwbwLGnAawXWt-fSpE_m-Ai0c9LyK3BNBtex07yGBBHg9UnaPmo/s320/saddamheads.gif" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Little Saddam Heads as Section Breaks - Why Not (<a href="http://www.amazon.com/gp/product/B005FQCS36/ref=as_li_tf_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=B005FQCS36&linkCode=as2&tag=paulsal-20">The Bunker Below Believers' Palace</a>)</td></tr>
</tbody></table>While my writing still has a ways to go, I'd like to think that at least the design and formatting is 4.0. As the Managing Director of an <a href="http://bbebooksthailand.com/">eBook conversion shop</a>, I'd be a really schnook if it wasn't. Check it out on Amazon by visiting my <a href="http://www.amazon.com/Paul-Salvette/e/B005FXDZ9U">author page</a>.Paul Salvettehttp://www.blogger.com/profile/11818202201018195312noreply@blogger.com2tag:blogger.com,1999:blog-8917601577161181396.post-25477884857771596462012-10-07T19:25:00.002+07:002012-10-07T19:25:17.047+07:00My Dumb Life<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiptrjSugcdC-4MPrK5j0GAjHTqarUPz0M4LmvoQ1UF58Brg8LkZNH-QjnROb2AvaMOJMxdXSG9YBLffiMDqMKwhlQhgFC_iEtRo7iS-RDrB2odJKYMmNQiPltsbvqTMGQ2h_6YRQpYnrY/s1600/baby-mamma.JPG" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiptrjSugcdC-4MPrK5j0GAjHTqarUPz0M4LmvoQ1UF58Brg8LkZNH-QjnROb2AvaMOJMxdXSG9YBLffiMDqMKwhlQhgFC_iEtRo7iS-RDrB2odJKYMmNQiPltsbvqTMGQ2h_6YRQpYnrY/s320/baby-mamma.JPG" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Cruisin!</td></tr>
</tbody></table>
Just in case you're hearing all the boring details of my life, you can find them here at <a href="https://myriteofpassage.wordpress.com/2012/10/05/change-means-going-all-in/">Belinda Nicoll's blog</a>. She has a great new series for authors focusing on Change and has asked them to provide stepping stones in their life. This is a challenge for most authors, since they are not accustomed to talking about themselves. Sure, writing a 100K-worder novel is no problem, but asking for 500-1,000 words on yourself...that's tough.Paul Salvettehttp://www.blogger.com/profile/11818202201018195312noreply@blogger.com0tag:blogger.com,1999:blog-8917601577161181396.post-59050741155732707682012-09-26T22:07:00.002+07:002012-09-26T22:07:23.059+07:00The eBook Design and Development Guide - My Latest<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi04obE0JJcHpIMbmWixKtanBSvH-4-ocngNLU0OvcIlZkMTyTEgQyABGjU5OJqGUeSydf0RqDOmA4rqpBEUbcJIEw6jgU4T_h7kZICiXjGe7dXJb2b5u6PKRIGYgAAoksMxKvaooxHPvs/s1600/eBook-Design-Development-Paul-Salvette.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi04obE0JJcHpIMbmWixKtanBSvH-4-ocngNLU0OvcIlZkMTyTEgQyABGjU5OJqGUeSydf0RqDOmA4rqpBEUbcJIEw6jgU4T_h7kZICiXjGe7dXJb2b5u6PKRIGYgAAoksMxKvaooxHPvs/s1600/eBook-Design-Development-Paul-Salvette.jpg" /></a></div>
After eight-months of toil, the <i>eBook Design and Development Guide</i> is finally published. I'm pretty proud of this one, since it includes some nice color-coded snippets and over 150 images. Here are some screen shots:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdVZA1gBL151xz3wsrtS2V6WgT_W9_RCr5rx7IhKSDnB__W7GtRVvrcpY3dt7koz1P5aSr_XqgQLyDrHUF917Kuyo2j_vL38hWwX29Q3NjxSY41QGIMzRlt7zBausvBcMrkWGmw90bmNA/s1600/pauls-eBook-design-development.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="260" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdVZA1gBL151xz3wsrtS2V6WgT_W9_RCr5rx7IhKSDnB__W7GtRVvrcpY3dt7koz1P5aSr_XqgQLyDrHUF917Kuyo2j_vL38hWwX29Q3NjxSY41QGIMzRlt7zBausvBcMrkWGmw90bmNA/s320/pauls-eBook-design-development.jpg" width="320" /></a></div>
<br />
You can pick it up at <a href="http://www.amazon.com/gp/product/B009G2JMRK/ref=as_li_qf_sp_asin_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=B009G2JMRK&linkCode=as2&tag=paulsal-20">Amazon for $6.99</a>. Thanks so much.<br />
<br />
While eBook sales continue to increase around the world, the actual layout and presentation of eBooks is in a sorry state. Mangled formatting, defective images, and non-reflowable content are just a few symptoms of the problem. Many publishing houses and independent authors believe that converting an eBook directly from Word, InDesign, or another publishing program will produce a “good enough” eBook. However, poor sales and poor reviews from readers suggests otherwise.<br />
<br />
The eBook Design and Development Guide is a technical reference for serious publishers and authors who want to produce professional eBooks with a focus on quality. This guide provides all the technical knowledge of HTML, CSS, EPUB, XML, and KindleGen that is necessary to create your eBook from a source manuscript into an eBook ready for sale at all the major eBook vendors, including the Amazon Kindle Store, Barnes & Noble Nook, Kobo, and the iBookstore.<br />
<br />
No prior experience is required and the process of eBook production requires no expensive third-party software. This guide will teach you how to master the following tasks:<br />
<br />
<ul>
<li>Converting your manuscript into HTML</li>
<li>Adding hyperlinks, bullets, and tables to your eBook</li>
<li>Embedding correctly-sized images in your eBook</li>
<li>Creating a clickable Table of Contents for your eBook</li>
<li>Adding basic presentation and styling to your eBook with CSS such as font sizing, margins, and indentation</li>
<li>Embedding fonts in your eBook</li>
<li>Adding advanced styling to your eBook such as gradients, drop caps, and backgrounds</li>
<li>Creating a valid EPUB eBook</li>
<li>Creating a valid MOBI/KF8 eBook with KindleGen</li>
<li>Adding metadata into your eBook</li>
<li>Working with regular expressions for quickly converting an eBook</li>
</ul>
<br />
Additionally, the guide provides a step-by-step walkthrough for a sample conversion of an eBook, as well as some helpful tips on the publishing and marketing process. All HTML, CSS, and EPUB templates are available for immediate use in this guide so you can start making your eBook for Kindle, Barnes & Noble, iBookstore, and all the other major platforms.<br />
<br />
This book is a follow-up to <i>How to Format Your eBook for Kindle, NOOK, Smashwords, and Everything Else</i> with much more details on HTML, CSS, and the EPUB standard. It also explains how to properly design an eBook for the new Kindle Format 8 (KF8) devices such as the Kindle Fire, Kindle Touch, and Paperwhite.<br />
<br />
Buy this 65,000-word guide that contains 150 images and 200 code snippets, and you will be able to create professional eBooks that really stand out from the crowd.Paul Salvettehttp://www.blogger.com/profile/11818202201018195312noreply@blogger.com8tag:blogger.com,1999:blog-8917601577161181396.post-19930752512386933962012-09-04T15:16:00.003+07:002012-09-04T15:16:36.436+07:00The Sentinel in Sector 5 - a Sci-Fi Novella<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6B7hSY1cjs_ie2QbKp4tryhbYaFs8Sp42iFKzemdFPAlrTRm8Wv7SYjbscXLmYMKkjZfhvtusy2g2FkPmqH1ZbbSkK8SyemRvfN4Ng1kLabaK9D0TrMrsAmIxjzgvZ3OMeOnNaKPZEnw/s1600/SentinelinSector5_Small.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6B7hSY1cjs_ie2QbKp4tryhbYaFs8Sp42iFKzemdFPAlrTRm8Wv7SYjbscXLmYMKkjZfhvtusy2g2FkPmqH1ZbbSkK8SyemRvfN4Ng1kLabaK9D0TrMrsAmIxjzgvZ3OMeOnNaKPZEnw/s1600/SentinelinSector5_Small.jpg" /></a></div>
Writing across a lot of different genres is not necessarily a bad thing. I've always been a fan of the shotgun approach. Following up on literary fiction, crime/hard-boiled, and technical non-fiction, it's now time to dip my toe into science fiction.<br />
<br />
I have always been a huge fan of post-apocalypse science fiction. From <i>Canticle for Leibowitz</i> to <i>Lucifer's Hammer</i>, speculating on the direction our future is headed has always been fascinating to me. Political commentary in fiction can be even more effective than non-fiction. Classics like <i>Brave New World</i> as well as newcomers like the <i>Hunger Games Trilogy</i> have a way of making you think about the current state of affairs. How our children integrated into society? What future will they be left with? I did my best to try and incorporate some of the great works that have influenced me in this short novella, and I hope that you will enjoy it.<br />
<br />
======<br />
Five hundred years after mankind was nearly destroyed by The Plague, a
controlled society known as the Precinct continues the evolution of the
human race. The Wardens select all children for their lifelong
occupation at age 5 and the Administrators teach them for 15 years their
duties and responsibilities to Society.<br /><br />Alan7347F is a 17-year
old Student classified to be a Machine Operator, but he spends his days
wondering about the demise of his Ancestors’ civilization. One night, a
rogue citizen, the Vagabond, creates a simulation that allows Alan and
his classmates to travel back in time to experience firsthand the chain
of events that nearly destroyed humanity. However, as the simulation
unfolds, it becomes unclear what its true purpose is. <i>The Sentinel in
Sector 5</i> is a 30,000-word sci-fi novella about the burning questions
lingering in a young man's heart amid a restricted society.<br /><br />Like a
cross between <i>The Hunger Games</i> and <i>Brave New World</i>, <i>Sentinel in Sector 5</i>
is sure to keep you entertained while making you think about where our
civilization is headed.<br />
======<br />
<br />
This novella is only <a href="http://www.amazon.com/gp/product/B0095J2RBC/ref=as_li_tf_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=B0095J2RBC&linkCode=as2&tag=paulsal-20">$2.99 at Amazon</a>, and please let me know what you think.Paul Salvettehttp://www.blogger.com/profile/11818202201018195312noreply@blogger.com1tag:blogger.com,1999:blog-8917601577161181396.post-44370829612365101392012-08-13T10:35:00.001+07:002012-08-13T10:35:18.836+07:008 Things to Learn from Jake Needham about eBooks and Publishing<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw3oI8em-1IoNfS4TsprbSpcQYf61_CTWOtgNNaYcvcndRjjoYu6WYM7ay0qV8MAhyphenhyphen55Ierwp8k_yWZlENRUrHRswWVsgrwxuWkSacjTpdj6WVXaRWPxinT8VyAIHyhacsGzAKFfDyNMg/s1600/worldtrouble-thumb.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw3oI8em-1IoNfS4TsprbSpcQYf61_CTWOtgNNaYcvcndRjjoYu6WYM7ay0qV8MAhyphenhyphen55Ierwp8k_yWZlENRUrHRswWVsgrwxuWkSacjTpdj6WVXaRWPxinT8VyAIHyhacsGzAKFfDyNMg/s200/worldtrouble-thumb.jpg" width="131" /></a></div>
It's not everyday in Thailand that you get to hear an internationally-acclaimed author talk about his work. The last time I had the opportunity to hear a writer speak was <a href="http://www.paulsalvette.com/2011/05/5-things-i-learned-from-stephen-leather.html">Stephen Leather over a year ago</a>. Author <a href="http://jakeneedham.com/">Jake Needham</a> gave a great talk yesterday morning at the <a href="http://www.pattayacityexpatsclub.com/">Pattaya City Expats Club</a>. I'm not a dues-paying member of this club, just some bum who happens to have a residence in the same province. Thankfully, I was invited to join the audience by the friendly folks at the PCEC. I've been working through Jake's latest thriller: <a href="http://www.amazon.com/gp/product/B007N6A4DW/ref=as_li_qf_sp_asin_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=B007N6A4DW&linkCode=as2&tag=paulsal-20"><i>A World of Trouble</i></a>. People who have spent time in Thailand will recognize some of the familiar personalities and typical foibles of the country, but those who haven't been to the <i>Land of Smiles</i> can also enjoy this great crime novel.<br />
<br />
Jake Needham sells around <b>5,000 eBooks a month</b> and has been <b>writing for years</b>, so when he talks it is wise to listen. One nice thing about being part of the author community is that veteran writers often share tips and tricks of the trade and are extremely helpful to people just starting out. You cannot say this about every community--how many investment bankers are going to give you stock tips without charging an arm and a leg? Anyway, here's 8 good points he brought up on <b>publishing</b>, <b>eBooks</b>, and the <b>future of reading</b>.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4_g92_NqRd6gtwb6fVyMgXswtz4Sf3XmaI_Nfim9WEwOSF8zS9aYZrZlNbqYaRwCemSc0zegB5iuwbzVk-QWwI0d8vS66Qg9wGXke8-VnUHwJIDBLtXtoSd7kHBszru2rLg4fqa64BY4/s1600/Jake-Needham-Pattaya.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4_g92_NqRd6gtwb6fVyMgXswtz4Sf3XmaI_Nfim9WEwOSF8zS9aYZrZlNbqYaRwCemSc0zegB5iuwbzVk-QWwI0d8vS66Qg9wGXke8-VnUHwJIDBLtXtoSd7kHBszru2rLg4fqa64BY4/s1600/Jake-Needham-Pattaya.JPG" /></a></div>
<br />
<br />
<h3>
1) Print Books are Hard to Discover</h3>
<br />
Due to the distribution challenges, logistical requirements, and high fixed costs for print books, it can be hard for authors to even get your book in a bookstore in the first place. Joel Friedlander touched on what a <a href="http://www.thebookdesigner.com/2012/07/video-bookstore-distribution/">pain distributing to bookstores</a> was in a blog post a few weeks back. Once you get your book into a bookstore, it might not even be worthwhile. Unless you're some bigwig author, most bookstores are just going to turn them sideways and stuff them on a shelve in between the Woman's Studies section and the bathroom. Jake mentioned some of his frustrations with this process.<br />
<br />
<h3>
2) Retailers of Print Books are a Commodity Business</h3>
<br />
One of the "dirty little secrets" of the book business, Jake noted, is that the Barnes & Nobles, Waterstones, and Asiabooks (in Thailand's case) of the world just want to stock shelves with books and move them out the door. They're not really interested in selling specific books or figuring out what customers really want. In a lot of ways it's like going to Walmart or Tesco and buying sugar. Jake asked the audience do you really care what brand of sugar you buy? No, not really. You just want to know that the sugar (or books) are there, because the customer is probably going to buy some no matter what the brand name is. Of course you and I know that a business model involving mass sales without customer feedback or a solid marketing strategy is not well-suited to the information age...just ask <a href="http://www.slate.com/articles/business/moneybox/2011/07/readers_without_borders.html">Borders</a>.<br />
<br />
<h3>
3) The Publisher's Main Reason for Existence was Product Placement, but That No Longer Applies with eBooks</h3>
<br />
Once upon a time, the big added value that publishers offered was the infrastructure and capacity to get your book in a bookstore. If you were a top-tier author, they might even do a little promotion for you (ads in magazines, swag, etc.) However, with the rise of eBooks the playing field is becoming much more level. The <a href="http://www.digitalbookworld.com/2012/why-amazon-dominates/">Amazon algorithm is about as mysterious as the Bermuda Triangle</a>, but one thing for certain is that it doesn't really discriminate whether you are self-published or Big 6-published. Jake said that this reality truly benefits the author and the reader.<br />
<br />
<h3>
4) With eBooks, Readers are the Gatekeepers, Not Publishers</h3>
Jake said he was pleased that readers are the ones who decide whether a book will be a success or not. Under the publishing process for the last several hundred years or so, authors had to write to impress the publisher, but not the reader. By allowing a direct connection between author and reader through eBooks, an author can better understand their audience. This of course also has the benefit of improving your writing and sales. If you're the kind of author who enjoys writing so they can <a href="http://davidgaughran.wordpress.com/2012/08/06/the-bonfire-of-the-straw-men/">hobknob with the blue-hairs on the wine and cheese circuit of Manhattan</a>, this new paradigm of writing for the masses might be a bad thing. However, if you're like the rest of us trying to make a living, this is great.<br />
<br />
<h3>
5) The Accessibility of eBooks Can't Be Beat</h3>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS4mS7eIxoLeMgU2K9U1pp-pzqODnjNokAnAe0xiaXbeXza-ruVy9VphQ1uI1chOzbYEFvEaxcZdNtzJxr6UEUrFAZgsMie5PUSAq-xMnPxjf1urkfD5QkQ3QsuK5rsSfSroWI3Bbb_D4/s1600/Author-photo.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS4mS7eIxoLeMgU2K9U1pp-pzqODnjNokAnAe0xiaXbeXza-ruVy9VphQ1uI1chOzbYEFvEaxcZdNtzJxr6UEUrFAZgsMie5PUSAq-xMnPxjf1urkfD5QkQ3QsuK5rsSfSroWI3Bbb_D4/s200/Author-photo.jpg" width="163" /></a></div>
Speaking as a reader, Jake noted that he really enjoyed the accessibility of eBooks. As a person who actually has the money to travel (he must not be married to a Thai woman), Jake enjoys carrying around an iPad rather than a suitcase full of books. He even mentioned that he would read on his iPhone in a pinch. Jake prefers the back-lit eReading off tablets (same as me), but other folks in the audience mentioned the e-ink displays were easier on the eyes (<a href="http://www.teleread.com/ebooks/jeff-bezis-discusses-kindle-e-books-and-future-of-reading/">same as Jeff Bezos</a>). One gentleman during the Q&A even stated that he needs to read on a MacBook plugged into a 32" monitor due to trouble with his eyesight. Whatever format the reader prefers, the reflowable nature of eBooks allows a good reading experience for people of all different preferences.<br />
<h3>
6) As an Author, Don't Be Afraid to Outsource</h3>
<br />
Giving some hope to our new startup, <a href="http://bbebooksthailand.com/">BB eBooks</a>, Jake noted that he outsources his cover design and interior design/eBook formatting. He said that the EPUB and MOBI/KF8 formats were the major standards, but he didn't really know how they were put together. That sounds about right, because you sort of have to be a big nerd with skin problems and some time on your hands to figure out the <a href="http://bbebooksthailand.com/developers.html">technical requirements of eBooks</a>. He paid a company to turn his word document into the eBook format, which is the crux of our own business model. He also talked about the need to invest in a cover designer and editor. All in all, he said you could get your book published for about <b>$500</b>. This is in the <a href="http://bbebooksthailand.com/blog/Why-Self-Publishers-Are-Small-Businessmen.html">same ballpark as we advise our clients</a>; however, it really depends on what you want to do and not do.<br />
<br />
<h3>
7) Marketing is Somewhat Mysterious, but Get to Know Your Readers</h3>
<br />
Like every other author, small press, and big publishing houses, the bulletproof way to market your eBook is a bit of mystery. Jake knows this and every author who isn't full of himself knows this. eBooks and social media are just so new and dynamic that it's difficult to say. However, Jake did provide some tidbits on marketing. He says that <b>word of mouth</b> works best for him and he is constantly connecting with his readers, which lets people know he is a good guy. No one wants to buy a book from a jackass. Lindsay Buroker has some <a href="http://www.lindsayburoker.com/book-marketing/authorpreneurship-101-shameless-self-promotion-vs-shameful-self-promotion/">great tips on how not to be a schmuck when you market your eBook</a>.<br />
<br />
<h3>
8) eBook Piracy is not a Big Concern</h3>
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: left; margin-right: 1em; text-align: left;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIdG5vpdI6wDPXa_4mnhIc4ODYAypA4qfYSpDlpuhKfNqsPuYOy8OUNLdgJFUS46ETjjVQ4ikz0ErU3FR1qj-iUj8MpotfT5N9ecYhSoPRcFH2qS0shjfWwBhUmpmpiYcpl8d6lPmeFN8/s1600/thai-rat.jpg" imageanchor="1" style="clear: left; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIdG5vpdI6wDPXa_4mnhIc4ODYAypA4qfYSpDlpuhKfNqsPuYOy8OUNLdgJFUS46ETjjVQ4ikz0ErU3FR1qj-iUj8MpotfT5N9ecYhSoPRcFH2qS0shjfWwBhUmpmpiYcpl8d6lPmeFN8/s1600/thai-rat.jpg" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Perusin' the Thai Rath</td></tr>
</tbody></table>
During the Q&A, I asked Jake about his approach to the problem of eBook piracy. He said because his eBooks are priced reasonably and fairly (about $4.99), he isn't really worried about it. This is extremely good news for a high-profile author to be saying this, since Digital Rights Management (DRM) is <a href="http://www.baldurbjarnason.com/notes/points-on-drm/">holding back the entire eBook industry</a>. Jake said he had never heard about one of his eBooks being pirated. I checked some of the <b>torrent sites</b> that are known to have pirated eBooks (no, I won't share the links), and lo and behold none of Jake's books were there. Hopefully, Jake will take this message to <a href="http://www.rachellegardner.com/2011/11/authors-and-book-piracy/">other authors</a> who equate eBook piracy with the Four Horseman of the Apocalypse.<br />
<br />
A big <b>thank-you</b> is in order to <b>Jake Needham</b> for making time to give a talk on a Sunday morning (over a three-day weekend in Thailand no less). Show some love by picking up a copy of <a href="http://www.amazon.com/gp/product/B007N6A4DW/ref=as_li_qf_sp_asin_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=B007N6A4DW&linkCode=as2&tag=paulsal-20"><i>A World of Trouble</i></a>.Paul Salvettehttp://www.blogger.com/profile/11818202201018195312noreply@blogger.com4tag:blogger.com,1999:blog-8917601577161181396.post-32450014830373064762012-07-31T15:17:00.002+07:002012-07-31T15:17:30.958+07:00Being Old Makes You a Better Writer<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFyyufraibkZrcJ-pC_viLEClLyE3JH6mDtqbWLdsrvivY4TN9HpQztNPE4ztE6G7hTywI1o3yE6rzLVTLMjwxGXEvvL7YFHTF54Bm4AnQHS-fO21LDO3slJNAOxcePhE4QsujsBCzZ9A/s1600/monica.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFyyufraibkZrcJ-pC_viLEClLyE3JH6mDtqbWLdsrvivY4TN9HpQztNPE4ztE6G7hTywI1o3yE6rzLVTLMjwxGXEvvL7YFHTF54Bm4AnQHS-fO21LDO3slJNAOxcePhE4QsujsBCzZ9A/s320/monica.jpg" width="320" /></a></div>
<br />
So, we recently celebrated our <a href="http://www.paulsalvette.com/2011/07/5-tips-on-having-kid-in-thailand-farang.html">little girl's</a> first birthday over the weekend. She is a very active and social little tike, and I figure she gets that from her mother's side. My side of the family is a bit more reserved and often incapable of expressing emotions. I just know she'll have a good life.<br />
<br />
In my 20s I would have never thought that being married with kids would be very exciting. My primary concern during my college and Navy years was partying with my friends and meeting women. It would have been almost impossible for me to commit to any long term project or initiative, especially writing a book or <a href="http://bbebooksthailand.com/">starting a small business</a>. However, as you get older and life changes, you tend to be able to focus more on what's important. I was at first overwhelmed with the thought of having to be responsible financially for someone other than myself, but it's a good kind of pressure that helps you stay on track.<br />
<br />
Since I'm able to put behind me the shenanigans of my 20s, it has really helped to keep a clear mind. Not that my accomplishments are anything spectacular, but for me it would have been difficult to try and take on a big endeavor when I was younger. That is why I feel the best writers are older (usually at least 40), and writing a book is indeed a big project. Older writers don't have the need for instant gratification and they can commit to something long term. I'm not saying that young writers are lousy, but people seem to become better wordsmiths as they age.<br />
<br />
The <a href="http://www.the-digital-reader.com/2012/05/24/heres-how-you-should-look-at-the-taliest-self-pub-survey/#.UBeTc6PwqIA">Taleist self-publishing survey estimates</a> that 75% of writers are between ages 30-60. I don't think a single one of our clients at BB eBooks (all authors) is under 40. So while the fun and excitement of youth goes away with age, at least you can become a better writer. That's what I'm counting on.Paul Salvettehttp://www.blogger.com/profile/11818202201018195312noreply@blogger.com1tag:blogger.com,1999:blog-8917601577161181396.post-4894795478688765652012-07-13T15:39:00.000+07:002012-07-13T15:39:21.969+07:00A New and Improved EPUB and KindleGen Tutorial<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiV-4uySnf6kX1eeN6-GN4yMM_T6OShBlWKg6sQD-yyUghcNFqEe7CP3UhoWxK9CMUHYNzZuue7iJEtFf1nlB7AN9Yr1lNfVlBBA-uiwp4xib48xP-2Xlrk9peBIJfnZ1f52h1mHKlQeDs/s1600/EPUB-Logo.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiV-4uySnf6kX1eeN6-GN4yMM_T6OShBlWKg6sQD-yyUghcNFqEe7CP3UhoWxK9CMUHYNzZuue7iJEtFf1nlB7AN9Yr1lNfVlBBA-uiwp4xib48xP-2Xlrk9peBIJfnZ1f52h1mHKlQeDs/s1600/EPUB-Logo.jpg" /></a></div>
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, <i>without</i> the use of third-party software. The result is the <a href="http://bbebooksthailand.com/bb-epub-kindlegen-tutorial.html">EPUB and KindleGen tutorial on the BB eBooks website</a>. There are also EPUB samples that you can download for your eBook projects on our <a href="http://bbebooksthailand.com/developers.html">Developers page</a>.<br />
<br />
Please let me know if you have any feedback or questions on it, and I hope that it helps eBook designers create better eBooks.Paul Salvettehttp://www.blogger.com/profile/11818202201018195312noreply@blogger.com0tag:blogger.com,1999:blog-8917601577161181396.post-71386177790551142312012-07-08T10:49:00.000+07:002012-07-08T10:49:59.820+07:00Everything You Want to Know about Publishing<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4ODpGN5iYrGtn8HOb6umPeqwxSzJX_7lSJLLyr6OQalPNjXdpPpYyTOTeBEIL5dwNMG4Zxr1E2AyREA9uWcO0dzBtzlwH2JoP93dkRvwucn4K6sn2IM2WEnYMnZ0f2ENH_wz8u00ESYA/s1600/Great-Books.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4ODpGN5iYrGtn8HOb6umPeqwxSzJX_7lSJLLyr6OQalPNjXdpPpYyTOTeBEIL5dwNMG4Zxr1E2AyREA9uWcO0dzBtzlwH2JoP93dkRvwucn4K6sn2IM2WEnYMnZ0f2ENH_wz8u00ESYA/s1600/Great-Books.jpg" /></a></div>
<br />
We have been receiving a lot of inquiries at our <a href="http://bbebooksthailand.com/">BB eBooks site</a> about <b>how and where to self-publish</b>. It can be a bit daunting at first, since all the different eBook stores have differing standards. That is why we compiled a <a href="http://bbebooksthailand.com/publishing.html">comprehensive list</a> that can hopefully act as a resource for independent writers and self-publishers.<br />
<br />
Some highlights include the following:<br />
<ul>
<li><a href="http://bbebooksthailand.com/publishing.html#publishing_cover_storespecs">Cover image specification by eBook store</a></li>
<li><a href="http://bbebooksthailand.com/publishing.html#publishing_sales_publisher">Setting up your accounts at the major eBook stores</a> (e.g. Amazon KDP, Barnes & Noble, etc.)</li>
<li><a href="http://bbebooksthailand.com/publishing.html#publishing_marketing_seo">SEO Tips for Authors</a></li>
</ul>
Please let us know if you have any questions about the material, because we would like to continuously improve upon it.Paul Salvettehttp://www.blogger.com/profile/11818202201018195312noreply@blogger.com1tag:blogger.com,1999:blog-8917601577161181396.post-91845501465747455512012-06-22T10:58:00.001+07:002012-06-22T10:58:18.548+07:00Our New eBook Startup - BB eBooks<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmyqUBZhF7BO4l5WQ2Sb9HQ9nwjVLVdybiJfAf5qH9EHMSmOQd-P1uB824bQUSPDwxmsBcQxJ1OkJywmwhKfs7uew49Sbmydqvb3VTiZz3mu0DqHFeYLbAgXgTkGXmUtN6MV-4HC7ysJs/s1600/BBeBooksLogo_Small.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="53" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmyqUBZhF7BO4l5WQ2Sb9HQ9nwjVLVdybiJfAf5qH9EHMSmOQd-P1uB824bQUSPDwxmsBcQxJ1OkJywmwhKfs7uew49Sbmydqvb3VTiZz3mu0DqHFeYLbAgXgTkGXmUtN6MV-4HC7ysJs/s320/BBeBooksLogo_Small.png" width="320" /></a></div>
<br />
We have officially launched our eBook design startup based in Bangkok, Thailand—<a href="http://bbebooksthailand.com/">BB eBooks</a>. Our company’s business model is simple: “providing quality services at a low cost.” At BB eBooks we would like to assist <i>independent authors</i> and <i>small presses</i> turn their manuscripts into professional eBooks, so that they can make great sales at all the major online retailers (e.g. <a href="http://kdp.amazon.com/">Amazon's Kindle Store</a>, <a href="http://pubit.barnesandnoble.com/">Barnes & Noble's Nook</a>, <a href="http://www.apple.com/ipad/built-in-apps/">iBookstore</a>, <a href="http://www.smashwords.com/">Smashwords</a>, 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 <b>one-time fee</b>—BB eBooks takes no royalties and does not charge hidden fees. Your manuscript can become an eBook for <b>as low as $50</b>, so please visit our <a href="http://bbebooksthailand.com/">website</a> to learn how we can help you. We can also do <b>Print-on-Demand</b>. 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.<br />
<br />
BB eBooks also has an <a href="http://bbebooksthailand.com/ebooks.html">online eBook reader</a>, and we have a small library of some of the classics in the public domain. This service is <i>absolutely free</i> 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 <i>free online tutorials</i> and <i>apps</i> to help you professionally <b>design your eBook</b>. Please visit our <a href="http://bbebooksthailand.com/developers.html">Developers page</a> and let’s work together to improve the overall standards of eBooks.<br />
<br />
Thank you very much for your time, and we look forward to hearing from you.<br />
<br />
Sincerely,<br />
<br />
<br />
Bee and Paul<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLt3_eXzqAmQtvR8JdRCOcstPMOt8afYeRvrGSgoRquKoimYYyRI-lsuOyZO_7ji2c2OfvbxilgWrkUQE9PilxraJ3qjBdfaQ_dQcXiAzc0S9xCvbk3bh5CXTC3vF8IShrun_R7u7BnRc/s1600/Boonyalisa-Salvette.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLt3_eXzqAmQtvR8JdRCOcstPMOt8afYeRvrGSgoRquKoimYYyRI-lsuOyZO_7ji2c2OfvbxilgWrkUQE9PilxraJ3qjBdfaQ_dQcXiAzc0S9xCvbk3bh5CXTC3vF8IShrun_R7u7BnRc/s1600/Boonyalisa-Salvette.jpg" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbtGUMUMcCgF4c9qwk8D7q3Ll82v8E7rnaRzc9eJOGYVa64Bv13CXoMbkx0NSegda6cyz_MIRruhdd_IaOpZsYYyDqX2Tk1Bxzx8_6KX3_x6sleYCSAQMamR2RfsTJP4RcnDzV1dZbZzw/s1600/Paul-Salvette.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbtGUMUMcCgF4c9qwk8D7q3Ll82v8E7rnaRzc9eJOGYVa64Bv13CXoMbkx0NSegda6cyz_MIRruhdd_IaOpZsYYyDqX2Tk1Bxzx8_6KX3_x6sleYCSAQMamR2RfsTJP4RcnDzV1dZbZzw/s1600/Paul-Salvette.jpg" /></a></div>
<br />
<br />
<br />
<div style="text-align: center;">
FOR IMMEDIATE RELEASE</div>
<div style="text-align: center;">
===========</div>
<b>BB eBooks Provides Affordable Services for Self-Publishing Authors and Small Presses</b><br />
<br />
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.<br />
<br />
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.<br />
<br />
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."<br />
<br />
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." <br />
<br />
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.Paul Salvettehttp://www.blogger.com/profile/11818202201018195312noreply@blogger.com2tag:blogger.com,1999:blog-8917601577161181396.post-10958617102540567612012-06-15T09:10:00.001+07:002012-09-26T22:10:57.497+07:00Adding Background Images and Gradients to Your eBooks<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmyqUBZhF7BO4l5WQ2Sb9HQ9nwjVLVdybiJfAf5qH9EHMSmOQd-P1uB824bQUSPDwxmsBcQxJ1OkJywmwhKfs7uew49Sbmydqvb3VTiZz3mu0DqHFeYLbAgXgTkGXmUtN6MV-4HC7ysJs/s1600/BBeBooksLogo_Small.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="53" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmyqUBZhF7BO4l5WQ2Sb9HQ9nwjVLVdybiJfAf5qH9EHMSmOQd-P1uB824bQUSPDwxmsBcQxJ1OkJywmwhKfs7uew49Sbmydqvb3VTiZz3mu0DqHFeYLbAgXgTkGXmUtN6MV-4HC7ysJs/s320/BBeBooksLogo_Small.png" width="320" /></a></div>
<br />
Thank you for visiting this eBook design tutorial. We now have an eBook design startup—<a href="http://bbebooksthailand.com/">BB eBooks</a>—dedicated to helping <i>independent authors</i> and <i>small presses</i> get their eBooks formatted, converted, and ready for sale at all the major online retailers (e.g. <a href="http://kdp.amazon.com/">Amazon's Kindle Store</a>, <a href="http://pubit.barnesandnoble.com/">Barnes & Noble's Nook</a>, <a href="http://www.apple.com/ipad/built-in-apps/">iBookstore</a>, <a href="http://www.smashwords.com/">Smashwords</a>, etc.) Please <a href="http://bbebooksthailand.com/quote.html">contact us</a> 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 <i>free online tutorials</i> and <i>apps</i> to help you professionally <b>design your eBook</b>. Please visit our <a href="http://bbebooksthailand.com/developers.html">Developers page</a> and let’s work together to improve the overall standards of eBooks. Also, please <a href="http://bbebooksthailand.com/">sign up</a> for the mailing list for promotions, design & marketing tips, plus eBook industry news.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi04obE0JJcHpIMbmWixKtanBSvH-4-ocngNLU0OvcIlZkMTyTEgQyABGjU5OJqGUeSydf0RqDOmA4rqpBEUbcJIEw6jgU4T_h7kZICiXjGe7dXJb2b5u6PKRIGYgAAoksMxKvaooxHPvs/s1600/eBook-Design-Development-Paul-Salvette.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi04obE0JJcHpIMbmWixKtanBSvH-4-ocngNLU0OvcIlZkMTyTEgQyABGjU5OJqGUeSydf0RqDOmA4rqpBEUbcJIEw6jgU4T_h7kZICiXjGe7dXJb2b5u6PKRIGYgAAoksMxKvaooxHPvs/s1600/eBook-Design-Development-Paul-Salvette.jpg" /></a></div>
<br />
Looking for a <b>complete guide</b> on eBook production? Please consider <i>The eBook Design and Development Guide</i>, 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 <a href="http://www.amazon.com/gp/product/B009G2JMRK/ref=as_li_qf_sp_asin_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=B009G2JMRK&linkCode=as2&tag=paulsal-20">Amazon for $6.99 today</a>.<br />
<br />
Changing the background in eBooks is not possible on e-ink Kindles/Kindle for iOS; however, since the Kindle Fire runs on the Webkit engine, it is possible to use higher-level CSS properties to style different types of backgrounds on this device. To change the color, you simply use the <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">background-color: color code;</span> syntax. This may be suitable in some situations, but print books often have repeating images or gradients in the background of certain types of content to draw the reader's attention. This guide discourages altering the background for the entire eBook, because it prevents the user from selecting their default background (<a href="http://www.dummies.com/how-to/content/modify-the-appearance-of-a-page-in-the-kindle-fire.html">on the Kindle Fire users have a choice between white, sepia, and black</a>). Full background alterations can also looks tacky--like a MySpace page circa 2005.<br />
<br />
<h2>
Background Images</h2>
<br />
Hypothetically, you have a public domain image from a site like <a href="http://openclipart.org/">Open Clip Art</a> that you would like to be the background for some boxes of content in your eBook. This <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">50x50px</span> image has the filename <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">seashell.jpg</span> and it is in the <b>same directory</b> as your CSS file. The CSS syntax to declare the seashell as a background image is as follows:<br />
<blockquote class="tr_bq">
<div style="font-family: "Courier New",Courier,monospace;">
<span style="color: blue; font-weight: bold;">p</span>.<span style="color: red;">myseashells</span></div>
<div style="font-family: "Courier New",Courier,monospace;">
{</div>
<div style="font-family: "Courier New",Courier,monospace;">
<span style="color: #2b547e;">background-image</span>: url("seashell.jpg");</div>
<div style="font-family: "Courier New",Courier,monospace;">
}</div>
</blockquote>
<b>Tip:</b> If your image file was in a different directory than your CSS, you simply specify a relative path for the URL such as <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">"./myimages/seashell.jpg"</span>. In this example, the CSS file is in the parent directory to <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">myimages</span>.<br />
<br />
Now that you have declared a background image for paragraph elements with the <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">myseashells</span> class, you can implement the CSS with the following HTML markup:<br />
<blockquote class="tr_bq" style="font-family: "Courier New",Courier,monospace;">
<span style="color: blue;"><p></span>Normal paragraph content<span style="color: blue;"></p></span><br />
<span style="color: blue;"><p</span><span style="color: red;"> class</span>=<span style="color: purple;">"myseashells"</span><span style="color: blue;">></span>This is paragraph content where there is a background image applied. Notice how by default it repeats both horizontally and vertically. We will learn how to further customize our CSS to allow repeating images.<span style="color: blue;"></p></span></blockquote>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjND4ejJ5KDUqstGd2R2RVtEjSsQ9SQGfMjd34AjIjXC71xZ2I_CridNyE7U-hjW1Ah6aXgI_qn8c4uzI4N2Y_P1fDpc1U6h6MRZlp4zyUvoB83BRXeSoZVfKFwdttxfEjhKjcyc_D6Umk/s1600/background-image-kindle-fire.gif" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjND4ejJ5KDUqstGd2R2RVtEjSsQ9SQGfMjd34AjIjXC71xZ2I_CridNyE7U-hjW1Ah6aXgI_qn8c4uzI4N2Y_P1fDpc1U6h6MRZlp4zyUvoB83BRXeSoZVfKFwdttxfEjhKjcyc_D6Umk/s1600/background-image-kindle-fire.gif" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Background Image on Kindle Fire</td></tr>
</tbody></table>
<br />
By default the background image repeats vertically and horizontally to encompass the entire box of the paragraph element. The first seashell is located at the top and left of the box, and it repeats until the start of <i>the border section</i> of the box. This means that if any <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">padding</span> is applied on the box, the background image will be rendered behind the <i>padding section</i> as well as the <i>content section</i>.<br />
<br />
The preceding example is a bit unseemly, because it overwhelms the content. There isn't a good way in CSS to add transparency to a background image. To make the image have some opacity, you can add an alpha channel in a suitable image editor and save the image as a <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">PNG</span>. You may also want the background-image to repeat in specific directions or not at all. Here is the CSS to perform this task:<br />
<blockquote class="tr_bq">
<div style="font-family: "Courier New",Courier,monospace;">
<span style="color: #2b547e;">background-repeat</span>: repeat-x; <span style="color: green;">/* Repeat Image Horizontally Only */</span></div>
<div style="font-family: "Courier New",Courier,monospace;">
<span style="color: #2b547e;">background-repeat</span>: repeat-y; <span style="color: green;"> /* Repeat Image Vertically Only */</span></div>
<div style="font-family: "Courier New",Courier,monospace;">
<span style="color: #2b547e;">background-repeat</span>: no-repeat; <span style="color: green;"> /* Image Only Appears in the Top Left */</span></div>
</blockquote>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEVYoYpiAZ2w20nsXTyA5mjmjXKoBYuScoIVxWL0MsJU4y1w8Tt5vKosNmWdLJL4nvMp7gPEjPkM_mrxqZtAjheOYEQKSoonfi4Z8sbK4ph45apk972cIgUpH4NOJrUz1uSRgffcnOTJ4/s1600/background-repeats-kindle-fire.gif" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEVYoYpiAZ2w20nsXTyA5mjmjXKoBYuScoIVxWL0MsJU4y1w8Tt5vKosNmWdLJL4nvMp7gPEjPkM_mrxqZtAjheOYEQKSoonfi4Z8sbK4ph45apk972cIgUpH4NOJrUz1uSRgffcnOTJ4/s1600/background-repeats-kindle-fire.gif" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Different Repeating Background Directions</td></tr>
</tbody></table>
<br />
<h2>
Gradients</h2>
<br />
Adding gradient colors to your eBook gives a very professional look on content you would like to emphasize to the reader. While using a gradient for the entire background of the viewport would cause poor readability, gradients can be useful for individual boxes of content you would like to stand out. The <a href="http://www.webkit.org/blog/1424/css3-gradients/">syntax for generating a gradient background</a> can get a bit complicated. It also doesn't help that the CSS3 standard for gradients is <a href="https://developer.mozilla.org/en/CSS/linear-gradient">still evolving and changing</a>, even though it was introduced way back in 2008. Since Kindle Fire is based on the Webkit engine, the following is the basic CSS syntax for a linear gradient. Please note the <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">-webkit-</span> prefix and the fact that there are <b>no spaces</b> before or after the parentheses:<br />
<blockquote class="tr_bq">
<div style="font-family: "Courier New",Courier,monospace;">
<span style="color: #2b547e;">background-image</span>: -webkit-gradient(linear, staring point, ending point, from(color), to(color));</div>
</blockquote>
If you wanted a gradient to start on top of the box with a <b>white color</b> and end with a <b>gray color</b>, some sample CSS would look as follows:<br />
<blockquote class="tr_bq">
<div style="font-family: "Courier New",Courier,monospace;">
<span style="color: blue; font-weight: bold;">p</span>#<span style="color: #5c5858;">graygradient</span></div>
<div style="font-family: "Courier New",Courier,monospace;">
{</div>
<div style="font-family: "Courier New",Courier,monospace;">
<span style="color: #2b547e;">background-image</span>: -webkit-gradient(linear, left top, left bottom, from(white), to(gray));</div>
<div style="font-family: "Courier New",Courier,monospace;">
<span style="color: #2b547e;">border-radius</span>: 15px;</div>
<div style="font-family: "Courier New",Courier,monospace;">
<span style="color: #2b547e;">border</span>: 1px solid black;</div>
<div style="font-family: "Courier New",Courier,monospace;">
<span style="color: #2b547e;">padding</span>: 5px;</div>
<div style="font-family: "Courier New",Courier,monospace;">
}</div>
</blockquote>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXeJS_L_nxAaIU9wSBTuLZtDcywrdiifZ7N892fPQvvlX-Zk1m_S-AyMHyF6wcXB7B9-gh5dV_7j9nUeU29JvIFA46U5XZXLHmMny0oKNGDkxXmmSLNqOoRLpgFJDnLZn-nUjc8OH9jXQ/s1600/gradient-kindle-fire.gif" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXeJS_L_nxAaIU9wSBTuLZtDcywrdiifZ7N892fPQvvlX-Zk1m_S-AyMHyF6wcXB7B9-gh5dV_7j9nUeU29JvIFA46U5XZXLHmMny0oKNGDkxXmmSLNqOoRLpgFJDnLZn-nUjc8OH9jXQ/s1600/gradient-kindle-fire.gif" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Gradients on Kindle Fire</td></tr>
</tbody></table>
<br />
Notice how the gradient starts at the top with the white color and terminates at the bottom with the gray color. It is also possible to provide different directions in the first and second values. The entire specification that is unique for Webkit is <a href="http://www.webkit.org/blog/175/introducing-css-gradients/">here</a>.<br />
<br />
<b>Important Note:</b> The <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">-webkit-</span> prefix is required for the CSS3 to be recognized on Chrome and Kindle Fire. The <a href="http://www.webkit.org/blog/1424/css3-gradients/">newer gradient specification</a> that uses a different syntax does not yet render on the Kindle Fire.Paul Salvettehttp://www.blogger.com/profile/11818202201018195312noreply@blogger.com3tag:blogger.com,1999:blog-8917601577161181396.post-69785925744199981642012-06-11T21:57:00.000+07:002012-09-26T22:11:17.249+07:00Embedding Fonts in Kindle eBooks<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmyqUBZhF7BO4l5WQ2Sb9HQ9nwjVLVdybiJfAf5qH9EHMSmOQd-P1uB824bQUSPDwxmsBcQxJ1OkJywmwhKfs7uew49Sbmydqvb3VTiZz3mu0DqHFeYLbAgXgTkGXmUtN6MV-4HC7ysJs/s1600/BBeBooksLogo_Small.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="53" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmyqUBZhF7BO4l5WQ2Sb9HQ9nwjVLVdybiJfAf5qH9EHMSmOQd-P1uB824bQUSPDwxmsBcQxJ1OkJywmwhKfs7uew49Sbmydqvb3VTiZz3mu0DqHFeYLbAgXgTkGXmUtN6MV-4HC7ysJs/s320/BBeBooksLogo_Small.png" width="320" /></a></div><br />
Thank you for visiting this eBook design tutorial. We now have an eBook design startup—<a href="http://bbebooksthailand.com/">BB eBooks</a>—dedicated to helping <i>independent authors</i> and <i>small presses</i> get their eBooks formatted, converted, and ready for sale at all the major online retailers (e.g. <a href="http://kdp.amazon.com/">Amazon's Kindle Store</a>, <a href="http://pubit.barnesandnoble.com/">Barnes & Noble's Nook</a>, <a href="http://www.apple.com/ipad/built-in-apps/">iBookstore</a>, <a href="http://www.smashwords.com/">Smashwords</a>, etc.) Please <a href="http://bbebooksthailand.com/quote.html">contact us</a> 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 <i>free online tutorials</i> and <i>apps</i> to help you professionally <b>design your eBook</b>. Please visit our <a href="http://bbebooksthailand.com/developers.html">Developers page</a> and let’s work together to improve the overall standards of eBooks. Also, please <a href="http://bbebooksthailand.com/">sign up</a> for the mailing list for promotions, design & marketing tips, plus eBook industry news.<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi04obE0JJcHpIMbmWixKtanBSvH-4-ocngNLU0OvcIlZkMTyTEgQyABGjU5OJqGUeSydf0RqDOmA4rqpBEUbcJIEw6jgU4T_h7kZICiXjGe7dXJb2b5u6PKRIGYgAAoksMxKvaooxHPvs/s1600/eBook-Design-Development-Paul-Salvette.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi04obE0JJcHpIMbmWixKtanBSvH-4-ocngNLU0OvcIlZkMTyTEgQyABGjU5OJqGUeSydf0RqDOmA4rqpBEUbcJIEw6jgU4T_h7kZICiXjGe7dXJb2b5u6PKRIGYgAAoksMxKvaooxHPvs/s1600/eBook-Design-Development-Paul-Salvette.jpg" /></a></div><br />
Looking for a <b>complete guide</b> on eBook design and development? Please consider <i>The eBook Design and Development Guide</i>, 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 <a href="http://www.amazon.com/gp/product/B009G2JMRK/ref=as_li_qf_sp_asin_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=B009G2JMRK&linkCode=as2&tag=paulsal-20">Amazon for $6.99 today</a>.<br />
<br />
Publishers who have extensive experience in the print industry know that the fonts which are chosen when a book goes to print is an extremely important decision. However, this thought process must be radically changed when it comes to eBooks. Readers like to have complete control over the reading experience. One of the great things about eBooks is that readers can change the font to whatever is suitable for them. Perhaps they like Times New Roman (a serif font that was designed for newspapers). Perhaps they enjoy reading with an Arial font (a common sans-serif font). Perhaps they prefer to use some unique font that they found somewhere else (this can be done if by <a href="http://wiki.mobileread.com/wiki/Kindle_Font_Hack_for_all_2.x_and_3.x_Kindles">“jailbreaking” the Kindle</a>). Everyone is different. For this reason, this guide discourages defining fonts on eBooks for content text. There is also the matter of <a href="http://www.richnetapps.com/web-fonts-embedding/">contentious and confusing legalities regarding embedding fonts in eBooks</a>. However, if you are determined to define a font for your content, it is possible to do so with the Kindle Fire.<br />
<h2> The Core Kindle Fonts</h2>The older e-ink Kindles and Kindle for iOS support two types of fonts: <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">Palantino</span> and <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">Courier New</span> (a mono-spaced font). Font embedding is not allowed; therefore, there is not much selection.<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9tuWCf0XuEiVt4zK2wh1FOyOSR2xT0cWmMaaNDJJfH3_5rF3aCH86bxnCADh1295T-gSVIjPPLhBWkXAAeyXakJvTev1v6Mz2-u_3ghH32Am7bu26J_q7JBZTievYBnmyoRlWiYS-HKo/s1600/eink-kindle-fonts-two.gif" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9tuWCf0XuEiVt4zK2wh1FOyOSR2xT0cWmMaaNDJJfH3_5rF3aCH86bxnCADh1295T-gSVIjPPLhBWkXAAeyXakJvTev1v6Mz2-u_3ghH32Am7bu26J_q7JBZTievYBnmyoRlWiYS-HKo/s1600/eink-kindle-fonts-two.gif" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">The two fonts of the e-ink Kindle/Kindle for iOS</td></tr>
</tbody></table>Luckily, the newer Kindle Fire offers a bit more variety. Kindle Fire users have the option to select the following core fonts on their device:<br />
<ul><li>Georgia (the default)</li>
<li>Caecilia</li>
<li>Trebuchet</li>
<li>Verdana</li>
<li>Arial</li>
<li>Times New Roman</li>
<li>Courier</li>
<li>Lucida</li>
</ul><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaC_NzW4vamRona0kQCTlblRmnzzx5nJ_ScXTSL2xQG-wEELP6w3U1eTQw0Ctsa8KEiRUH6QPVC9Qy_HwloApvV_NBUSD3pB2-OdG198UUUaW7V8X3aWVg5LMAtOHFp6eWYFrnSNH_BTI/s1600/kindle-fire-core-fonts.gif" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaC_NzW4vamRona0kQCTlblRmnzzx5nJ_ScXTSL2xQG-wEELP6w3U1eTQw0Ctsa8KEiRUH6QPVC9Qy_HwloApvV_NBUSD3pB2-OdG198UUUaW7V8X3aWVg5LMAtOHFp6eWYFrnSNH_BTI/s1600/kindle-fire-core-fonts.gif" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Fonts Supported Natively by Kindle Fire</td></tr>
</tbody></table><br />
To change fonts using CSS, here is the basic syntax for the property/value combination:<br />
<blockquote class="tr_bq"><div style="font-family: "Courier New",Courier,monospace;"><span style="color: #2b547e;">font-family</span>: "Font Name", "Fallback Font", "Another Fallback Font";</div></blockquote>Note that the quotes are required on the font name if it has a space within its name, (e.g. <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">"Times New Roman"</span>). Also, ensure that you correctly capitalize the font name per the list above. It is standard practice to include "fallback fonts" in <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">font-family</span> declarations. The eReading device will attempt to load the fonts from left to right; so, if the first font is not recognized by the device for whatever reason, it will try to load the second one. It is also standard practice to have the last fallback font as one of the generic families (i.e. "<span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">serif</span>", "<span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">sans-serif</span>", or "<span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">monospace</span>").<br />
As an example, suppose we wanted a paragraph to have the <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">Courier</span> typeface with some <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">Verdana</span> inside. Some example CSS would be as follows:<br />
<blockquote class="tr_bq"><div style="font-family: "Courier New",Courier,monospace;"><span style="color: blue; font-weight: bold;">p</span>.<span style="color: red;">courier</span></div><div style="font-family: "Courier New",Courier,monospace;">{</div><div style="font-family: "Courier New",Courier,monospace;"><span style="color: #2b547e;">font-family</span>: "Courier", monospace;</div><div style="font-family: "Courier New",Courier,monospace;">}</div><div style="font-family: "Courier New",Courier,monospace;"><br />
</div><div style="font-family: "Courier New",Courier,monospace;"><span style="color: blue; font-weight: bold;">span</span>.<span style="color: red;">verdana</span></div><div style="font-family: "Courier New",Courier,monospace;">{</div><div style="font-family: "Courier New",Courier,monospace;"><span style="color: #2b547e;">font-family</span>: "Verdana", sans-serif;</div><div style="font-family: "Courier New",Courier,monospace;">}</div></blockquote><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcaPWroOwK14gNf9tAgdARo6zZFF7qod6LGAx7g0POxBcNbKPKlPwPQXVMhHY5Ck7uEfamL54Je_7lj1cFVPIQKgyQve7wCtDBoHm3boJKG1n_QU3hF_0ChUGvlG5XZ7uoOmA-vBJ4E58/s1600/font-differences-kindle-fire.gif" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcaPWroOwK14gNf9tAgdARo6zZFF7qod6LGAx7g0POxBcNbKPKlPwPQXVMhHY5Ck7uEfamL54Je_7lj1cFVPIQKgyQve7wCtDBoHm3boJKG1n_QU3hF_0ChUGvlG5XZ7uoOmA-vBJ4E58/s1600/font-differences-kindle-fire.gif" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Different Font Examples on the Kindle Fire</td></tr>
</tbody></table><br />
Please try to experiment with different fonts, but remember to be careful about how you type in the font name in your CSS, or else it will not properly render.<br />
<br />
<b>Important Note:</b> Due to anomalies in the Kindle Fire Previewer device, some typical fonts such as <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">"Comic Sans"</span> and <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">"Helvetica"</span> may appear to be working properly on the Previewer, but they will not work on an actual Kindle Fire. The only fonts that work "natively" on the Kindle Fire are the eight listed above. It may be wise to embed your fonts (as discussed below) if you cannot test your eBook on an actual Kindle Fire device.<br />
<h2> Embedding Fonts</h2>For those eBook designers who want to take things to the next level, you may wish to embed a font that is not supported natively in the Kindle Fire. <b>Beware</b>. You have to make sure you have the proper license and rights or you (or your client) can get your pants sued off by a bunch of low-life copyright trolls. One way to be sure that your desired font is okay to use commercially is to visit the <a href="http://fontsquirrel.com/">Font Squirrel website</a>. They have an outstanding selection of fonts to choose from, and you simply download the font file (in ttf and otf format) from different foundries. Make sure to read the license agreement from each specific foundry to verify that it is okay to embed in an eBook.<br />
<br />
Say you want to change the headings of your eBook to a font from an excellent open-source foundry, such as <a href="http://www.theleagueofmoveabletype.com/">The League of Moveable Type</a>. Let's try the <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">Orbitron</span> font to make our chapter headings more fancy. You need to declare the new font with an <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">@font-face</span> declaration at the beginning of your CSS. This defines a name for your font and points to the file. The file name is relative to the location of the CSS.<br />
<br />
For this example, the Orbitron otf font has a filename of <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">orbitron-medium.otf</span> and is located in the same directory as the CSS file. To be able to use this font, the CSS is as follows:<br />
<blockquote class="tr_bq"><div style="font-family: "Courier New",Courier,monospace;"><span style="color: blue; font-weight: bold;">@font-face</span></div><div style="font-family: "Courier New",Courier,monospace;">{</div><div style="font-family: "Courier New",Courier,monospace;"><span style="color: #2b547e;">font-family</span>: "My Awesome Font";</div><div style="font-family: "Courier New",Courier,monospace;"><span style="color: #2b547e;">src</span>: url("orbitron-medium.otf");</div><div style="font-family: "Courier New",Courier,monospace;">}</div></blockquote>You now can access the font "My Awesome Font" anywhere in your CSS the same way you would declare a core font. Declaring this font for all <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">h2</span> headings would simply look as follows:<br />
<blockquote class="tr_bq"><div style="font-family: "Courier New",Courier,monospace;"><span style="color: blue; font-weight: bold;">h2</span></div><div style="font-family: "Courier New",Courier,monospace;">{</div><div style="font-family: "Courier New",Courier,monospace;"><span style="color: #2b547e;">font-family</span>: "My Awesome Font", "Helvetica", sans-serif;</div><div style="font-family: "Courier New",Courier,monospace;"><span style="color: #2b547e;">font-size</span>: 1.5em;</div><div style="font-family: "Courier New",Courier,monospace;"><span style="color: #2b547e;">text-align</span>: center;</div><div style="font-family: "Courier New",Courier,monospace;">}</div></blockquote><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqcf_lTluuM6X4iZVks83foYLbNZqRkHpCB0HxVLbAnwBANPjFBpCyR14olNljdLzFhsKN9H-rRgy9Dh97cfNq_0pVuO7m6GNw_GG23yUXZmYsb70NnZBx2bqX_UHzCYKkk0oxS02c01A/s1600/kindle-font-embedded.gif" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqcf_lTluuM6X4iZVks83foYLbNZqRkHpCB0HxVLbAnwBANPjFBpCyR14olNljdLzFhsKN9H-rRgy9Dh97cfNq_0pVuO7m6GNw_GG23yUXZmYsb70NnZBx2bqX_UHzCYKkk0oxS02c01A/s1600/kindle-font-embedded.gif" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Embedded Font in Kindle Fire</td></tr>
</tbody></table><br />
<b>Important Note:</b> You also have to include the font file in the eBook package. This will be discussed later in the guide.Paul Salvettehttp://www.blogger.com/profile/11818202201018195312noreply@blogger.com5tag:blogger.com,1999:blog-8917601577161181396.post-35683617803605428672012-06-01T09:25:00.002+07:002012-09-26T22:11:43.902+07:00Borders, Rounded Corners, and Box Shadows for eBook Design<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmyqUBZhF7BO4l5WQ2Sb9HQ9nwjVLVdybiJfAf5qH9EHMSmOQd-P1uB824bQUSPDwxmsBcQxJ1OkJywmwhKfs7uew49Sbmydqvb3VTiZz3mu0DqHFeYLbAgXgTkGXmUtN6MV-4HC7ysJs/s1600/BBeBooksLogo_Small.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="53" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmyqUBZhF7BO4l5WQ2Sb9HQ9nwjVLVdybiJfAf5qH9EHMSmOQd-P1uB824bQUSPDwxmsBcQxJ1OkJywmwhKfs7uew49Sbmydqvb3VTiZz3mu0DqHFeYLbAgXgTkGXmUtN6MV-4HC7ysJs/s320/BBeBooksLogo_Small.png" width="320" /></a></div><br />
Thank you for visiting this eBook design tutorial. We now have an eBook design startup—<a href="http://bbebooksthailand.com/">BB eBooks</a>—dedicated to helping <i>independent authors</i> and <i>small presses</i> get their eBooks formatted, converted, and ready for sale at all the major online retailers (e.g. <a href="http://kdp.amazon.com/">Amazon's Kindle Store</a>, <a href="http://pubit.barnesandnoble.com/">Barnes & Noble's Nook</a>, <a href="http://www.apple.com/ipad/built-in-apps/">iBookstore</a>, <a href="http://www.smashwords.com/">Smashwords</a>, etc.) Please <a href="http://bbebooksthailand.com/quote.html">contact us</a> 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 <i>free online tutorials</i> and <i>apps</i> to help you professionally <b>design your eBook</b>. Please visit our <a href="http://bbebooksthailand.com/developers.html">Developers page</a> and let’s work together to improve the overall standards of eBooks. Also, please <a href="http://bbebooksthailand.com/">sign up</a> for the mailing list for promotions, design & marketing tips, plus eBook industry news.<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi04obE0JJcHpIMbmWixKtanBSvH-4-ocngNLU0OvcIlZkMTyTEgQyABGjU5OJqGUeSydf0RqDOmA4rqpBEUbcJIEw6jgU4T_h7kZICiXjGe7dXJb2b5u6PKRIGYgAAoksMxKvaooxHPvs/s1600/eBook-Design-Development-Paul-Salvette.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi04obE0JJcHpIMbmWixKtanBSvH-4-ocngNLU0OvcIlZkMTyTEgQyABGjU5OJqGUeSydf0RqDOmA4rqpBEUbcJIEw6jgU4T_h7kZICiXjGe7dXJb2b5u6PKRIGYgAAoksMxKvaooxHPvs/s1600/eBook-Design-Development-Paul-Salvette.jpg" /></a></div><br />
Looking for a <b>complete guide</b> on eBook design and development? Please consider <i>The eBook Design and Development Guide</i>, 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 <a href="http://www.amazon.com/gp/product/B009G2JMRK/ref=as_li_qf_sp_asin_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=B009G2JMRK&linkCode=as2&tag=paulsal-20">Amazon for $6.99 today</a>.<br />
<br />
<a href="http://www.paulsalvette.com/2012/04/previous-post-page-breaks-similar-to.html">Previous Post: Adding Images</a><br />
<br />
Now that you have a solid understanding of HTML and CSS, it is time to get into some of the bells and whistles. The <a href="http://www.w3.org/TR/CSS/#css3">CSS3 specification</a> allows for a wide variety of ways to manipulate content presentation in an aesthetically pleasing manner. Unfortunately, many of these CSS properties are not supported for e-ink Kindles and Kindle for iOS; however, many modern eReading devices will hopefully begin to support them soon. All advanced CSS properties will be tested on the Kindle Fire for the purposes of this guide.<br />
<br />
<h2>Borders</h2><br />
While placing a border around an image or paragraph of text is nothing new, it was not fully-supported on the Kindle until the KF8 format came around in 2011. Recall from the CSS Box Model discussion that the border encloses the content and padding area, <b>but not</b> the margin area.<br />
<br />
There are three main CSS properties when working with borders to define the thickness, style, and color of the border. The CSS properties are <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">border-width</span>, <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">border-style</span>, and <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">border-color</span>. This will define the style for all four sides of the rectangle that form the border. If you would like to define different styles for the top, right, bottom, or left part of the border, you can utilize properties such as <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">border-left-width</span>, <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">border-top-style</span>, <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">border-bottom-color</span>, etc.<br />
<br />
The values of the border properties are fairly straightforward. <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">border-width</span> is defined in pixels, <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">border-style</span> can be <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">solid</span>, <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">dashed</span>, <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">dotted</span>, and a few others, and <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">border-color</span> is simply one of the hexadecimal color codes or predefined names.<br />
<br />
Hypothetically, let's say we want to enclose an image with a red border and a paragraph of text with a dashed-black border. Some example CSS would be as follows:<br />
<blockquote class="tr_bq" style="font-family: "Courier New",Courier,monospace;"><span style="color: blue; font-weight: bold;">img</span>#<span style="color: #5c5858;">redborder</span><br />
{<br />
<span style="color: #2b547e;">border-width</span>: 2px;<br />
<span style="color: #2b547e;">border-style</span>: solid;<br />
<span style="color: #2b547e;">border-color</span>: red;<br />
}<br />
<br />
<span style="color: blue; font-weight: bold;">p</span>#<span style="color: #5c5858;">dashedborder</span><br />
{<br />
<span style="color: #2b547e;">border-width</span>: 1px;<br />
<span style="color: #2b547e;">border-style</span>: dashed;<br />
<span style="color: #2b547e;">border-color</span>: black;<br />
<span style="color: #2b547e;">padding</span>: 5px;<br />
<span style="color: #2b547e;">margin</span>: 1em;<br />
}</blockquote><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_GI-DTv3vZ1KRjxDrBCUkrLkqrlgFhhpMWKkDWO2soTo2Wc1BmhfYXkbqtnUOghrrnJ2vFfGDyx_mvqk1pQeoPkfT_WnlhGYJFEhXhrUmKlNfjwSWqobmjXZruUhViiP0JvpLIypWWg4/s1600/border-kindle-fire.gif" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_GI-DTv3vZ1KRjxDrBCUkrLkqrlgFhhpMWKkDWO2soTo2Wc1BmhfYXkbqtnUOghrrnJ2vFfGDyx_mvqk1pQeoPkfT_WnlhGYJFEhXhrUmKlNfjwSWqobmjXZruUhViiP0JvpLIypWWg4/s1600/border-kindle-fire.gif" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Borders on the Kindle Fire</td></tr>
</tbody></table>When working with borders that enclose text, make sure that you add a bit of <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">padding</span> in your CSS. Otherwise, the inner edge of the border will butt up right against the text, creating less-than-pleasing results.<br />
<br />
<b>Tip:</b> There is a shorthand way to define borders in your CSS. You can simply write three values in one declaration with the following syntax: <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">border: <i>width style color</i>;</span>. As an example for the image above, the CSS would become <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">border: 2px solid red;</span>. You can also use this short-hand if you only want to style one leg of your border (e.g. <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">border-right: <i>width style color</i>;</span>).<br />
<br />
<h2>Rounded Corners</h2><br />
Ever since Apple became a mainstay in everyone's life, rounded corners have become ubiquitous. In the bad old days of design, it was a bit of challenge to create rounded corners, because it involved aligning a grid of images on the outside of the content. Fortunately, <a href="http://www.css3.info/preview/rounded-border/">rounded corners require just one line of CSS</a> for eReading devices and web browsers that support CSS3. To make the CSS box have rounded corners, you simply use the following declaration: <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">border-radius: <i>#</i>px;</span>, where the <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">#</span> value is the radius of the rounded portion of each corner. Additionally, you can specify different values for each corner with the properties <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">border-top-left</span>, <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">border-top-right</span>, <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">border-bottom-right</span>, and <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">border-bottom-left</span>.<br />
<br />
As an example, say you wanted rounded corners on the previously-mentioned paragraph that had a dashed and black border. You simply need to add one line of CSS to achieve this effect:<br />
<blockquote class="tr_bq" style="font-family: "Courier New",Courier,monospace;"><span style="color: blue; font-weight: bold;">p</span>#<span style="color: #5c5858;">dashedborder</span><br />
{<br />
<span style="color: #2b547e;">border-width</span>: 1px;<br />
<span style="color: #2b547e;">border-style</span>: dashed;<br />
<span style="color: #2b547e;">border-color</span>: black;<br />
<span style="color: #2b547e;">padding</span>: 5px;<br />
<span style="color: #2b547e;">margin</span>: 1em;<br />
<span style="color: #2b547e;">border-radius</span>: 10px;<br />
}</blockquote><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitw5Q6T5ZhvDQf1MCum0BPdqlDIHeupAgVVbml4aDRzFUs-A12P4ynblzTBGDmx2vQTJsd_l-tEtfIZSXvfDgbJxzm8gYKdM1JHHqYWVOl2z1xYhJXdRBQazF19B-lmdtL289dZ6Em22k/s1600/rounded-corner-kindle-fire.gif" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitw5Q6T5ZhvDQf1MCum0BPdqlDIHeupAgVVbml4aDRzFUs-A12P4ynblzTBGDmx2vQTJsd_l-tEtfIZSXvfDgbJxzm8gYKdM1JHHqYWVOl2z1xYhJXdRBQazF19B-lmdtL289dZ6Em22k/s1600/rounded-corner-kindle-fire.gif" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Rounded Corners on Kindle Fire</td></tr>
</tbody></table>The <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">10px</span> value may not be rounded enough for your liking, so please feel free to experiment by adjusting the radius value of the corner.<br />
<br />
You can use the <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">border-radius</span> property even if there is no border. Perhaps you wanted a gray background that had no border, but was rounded off on the edges. This is a very common technique in web design, and it looks great on eBooks for things like pull quotes, tip boxes, and other content you would like to stand out from the regular content. Some example CSS is as follows:<br />
<blockquote class="tr_bq" style="font-family: "Courier New",Courier,monospace;"><span style="color: blue; font-weight: bold;">p</span>#<span style="color: #5c5858;">graycallout</span><br />
{<br />
<span style="color: #2b547e;">background-color</span>: #999999;<br />
<span style="color: #2b547e;">padding</span>: 5px;<br />
<span style="color: #2b547e;">margin</span>: 1em;<br />
<span style="color: #2b547e;">border-radius</span>: 15px;<br />
}</blockquote><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhc8LVV4nb8vs8FtWTlhz3BYsY72iQtTJxrCwmEmxHNJa3JYV9yT9aqYT_1yxsMVCVoZcFNP-_4bpuOF4gl5dGMiWQm6NcB9CLrIzLHdscR3XtOPCst-FlaS9U79jOh4ACY4R-gwwK2dSA/s1600/rounded-corner-background-kindle-fire.gif" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhc8LVV4nb8vs8FtWTlhz3BYsY72iQtTJxrCwmEmxHNJa3JYV9yT9aqYT_1yxsMVCVoZcFNP-_4bpuOF4gl5dGMiWQm6NcB9CLrIzLHdscR3XtOPCst-FlaS9U79jOh4ACY4R-gwwK2dSA/s1600/rounded-corner-background-kindle-fire.gif" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><br />
Paragraph with Rounded Corners on the Background</td></tr>
</tbody></table><br />
On many CSS3 properties that are discussed online, you may see what are known as "<a href="http://peter.sh/experiments/vendor-prefixed-css-property-overview/">vendor prefixes</a>." Instead of the property <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">border-radius</span>, the property is written as <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">-webkit-border-radius</span> (for Webkit-based browsers like Safari and Chrome) or <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">-moz-border-radius</span> (for Gecko-based like Firefox). These prefixes permit designers to specify different values for different web browsers <a href="http://www.alistapart.com/articles/prefix-or-posthack/">while all the titans of the tech industry agree on a unified standard</a>. For the purpose of eBook design, you may consider adding the -webkit- prefix for your Kindle Fire and iBooks CSS3 properties along with the normal CSS3 property. In the case of rounded corners, you would simply write two lines of code instead of one:<br />
<blockquote class="tr_bq" style="font-family: "Courier New",Courier,monospace;"><span style="color: #2b547e;">border-radius</span>: 10px;<br />
<span style="color: #2b547e;">-webkit-border-radius</span>: 10px;</blockquote>Although, the Kindle Fire supports the <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">border-radius</span> property <i>without</i> the <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">-webkit-</span> prefix at the time of this writing.<br />
<br />
<h2>Box Shadows</h2><br />
Another design nicety that used to be a difficult task is <i>box shadows</i>—the blurred shadow offset that creates a 3-dimensional look. These are common in text books, and they have only recently been made possible with eReading devices recognizing CSS3 properties. The basic CSS syntax for box shadows is as follows:<br />
<blockquote class="tr_bq" style="font-family: "Courier New",Courier,monospace;"><span style="color: #2b547e;">-webkit-box-shadow</span>: [<i>horizontal offset</i>] [<i>vertical offset</i>] [<i>blur distance (optional)</i>] [<i>color</i>];</blockquote>The four values specified must be separated by spaces, <b>not commas</b>. Additionally, the offsets can be negative. A negative horizontal offset will make the shadow go to the left, while a positive value will make the shadow go right. Additionally, a negative vertical offset will make the shadow go up, while a positive offset will make the shadow go down. Please note that the <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">-webkit-</span> prefix is required for the CSS to be recognized on the Kindle Fire. As with the <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">border-radius</span> property, it is permissible and recommended to include a CSS declaration without the <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">-webkit-</span> prefix in order to support eReading devices not utilizing the Webkit engine.<br />
<br />
An example of a red box shadow that is dropped <i>down</i> and to the <i>left</i> of a box would be as follows:<br />
<blockquote class="tr_bq" style="font-family: "Courier New",Courier,monospace;"><span style="color: blue; font-weight: bold;">p</span>#<span style="color: #5c5858;">redboxshadow</span><br />
{<br />
<span style="color: #2b547e;">background-color</span>: red;<br />
<span style="color: #2b547e;">padding</span>: 5px;<br />
<span style="color: #2b547e;">margin</span>: 1em;<br />
<span style="color: #2b547e;">border-radius</span>: 15px;<br />
<span style="color: #2b547e;">-webkit-border-radius</span>: 15px;<br />
<span style="color: #2b547e;">box-shadow</span>: -10px 10px 10px #999;<br />
<span style="color: #2b547e;">-webkit-box-shadow</span>: -10px 10px 10px #999;<br />
}</blockquote><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmf8Pi4ufTc6fB5ehotc7J6TzTgNHsb0BKoyOKgXDoSPSi6ueSTLcPZK1W40Uje9U_fE4dOsEjua4gApgmQNBdf4w3kGSNnGakvFvtpVUXdncsGbryv4aKgWCAAKqri5Q0DXSTGs077kE/s1600/boxshadow-kindle-fire.gif" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmf8Pi4ufTc6fB5ehotc7J6TzTgNHsb0BKoyOKgXDoSPSi6ueSTLcPZK1W40Uje9U_fE4dOsEjua4gApgmQNBdf4w3kGSNnGakvFvtpVUXdncsGbryv4aKgWCAAKqri5Q0DXSTGs077kE/s1600/boxshadow-kindle-fire.gif" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Box Shadow Example on Kindle Fire</td></tr>
</tbody></table><br />
This guide provides the most basic way to implement a box shadow, <a href="http://css-tricks.com/snippets/css/css-box-shadow/">but there are many more options</a> such as creating inner shadows, fine-tuning the "spread" of the shadow, and other tricks.<br />
<br />
While the effects that these CSS3 statements produce may seem simple, they have only recently become supported for eBooks. Hopefully other eReading devices besides the Kindle Fire will become more CSS3-friendly, so that eBook developers can have more creativity and design freedom when they are crafting eBooks.<br />
<br />
<b><u>Next Post: Changing Fonts</u></b>Paul Salvettehttp://www.blogger.com/profile/11818202201018195312noreply@blogger.com7tag:blogger.com,1999:blog-8917601577161181396.post-6291695464380667512012-04-28T10:37:00.000+07:002012-09-26T22:11:53.971+07:00Adding Images to Your Kindle eBook<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmyqUBZhF7BO4l5WQ2Sb9HQ9nwjVLVdybiJfAf5qH9EHMSmOQd-P1uB824bQUSPDwxmsBcQxJ1OkJywmwhKfs7uew49Sbmydqvb3VTiZz3mu0DqHFeYLbAgXgTkGXmUtN6MV-4HC7ysJs/s1600/BBeBooksLogo_Small.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="53" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmyqUBZhF7BO4l5WQ2Sb9HQ9nwjVLVdybiJfAf5qH9EHMSmOQd-P1uB824bQUSPDwxmsBcQxJ1OkJywmwhKfs7uew49Sbmydqvb3VTiZz3mu0DqHFeYLbAgXgTkGXmUtN6MV-4HC7ysJs/s320/BBeBooksLogo_Small.png" width="320" /></a></div><br />
Thank you for visiting this eBook design tutorial. We now have an eBook design startup—<a href="http://bbebooksthailand.com">BB eBooks</a>—dedicated to helping <em>independent authors</em> and <em>small presses</em> get their eBooks formatted, converted, and ready for sale at all the major online retailers (e.g. <a href="http://kdp.amazon.com">Amazon's Kindle Store</a>, <a href="http://pubit.barnesandnoble.com/">Barnes & Noble's Nook</a>, <a href="http://www.apple.com/ipad/built-in-apps/">iBookstore</a>, <a href="http://www.smashwords.com/">Smashwords</a>, etc.) Please <a href="http://bbebooksthailand.com/quote.html">contact us</a> 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 <em>free online tutorials</em> and <em>apps</em> to help you professionally <b>design your eBook</b>. Please visit our <a href="http://bbebooksthailand.com/developers.html">Developers page</a> and let’s work together to improve the overall standards of eBooks. Also, please <a href="http://bbebooksthailand.com">sign up</a> for the mailing list for promotions, design & marketing tips, plus eBook industry news.<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi04obE0JJcHpIMbmWixKtanBSvH-4-ocngNLU0OvcIlZkMTyTEgQyABGjU5OJqGUeSydf0RqDOmA4rqpBEUbcJIEw6jgU4T_h7kZICiXjGe7dXJb2b5u6PKRIGYgAAoksMxKvaooxHPvs/s1600/eBook-Design-Development-Paul-Salvette.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi04obE0JJcHpIMbmWixKtanBSvH-4-ocngNLU0OvcIlZkMTyTEgQyABGjU5OJqGUeSydf0RqDOmA4rqpBEUbcJIEw6jgU4T_h7kZICiXjGe7dXJb2b5u6PKRIGYgAAoksMxKvaooxHPvs/s1600/eBook-Design-Development-Paul-Salvette.jpg" /></a></div><br />
Looking for a <b>complete guide</b> on eBook design and development? Please consider <i>The eBook Design and Development Guide</i>, 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 <a href="http://www.amazon.com/gp/product/B009G2JMRK/ref=as_li_qf_sp_asin_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=B009G2JMRK&linkCode=as2&tag=paulsal-20">Amazon for $6.99 today</a>.<br />
<br />
<a href="http://www.paulsalvette.com/2012/04/adding-page-breaks-for-your-kindle.html">Previous Post: Page Breaks</a><br />
<br />
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 <i>reflowable content</i>, but it also due to <i>sloppy HTML markup and CSS</i>. 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 <b>floating</b>, which will be discussed in this section).<br />
<br />
<h2>Styling Images (All Kindle Devices)</h2><br />
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:<br />
<blockquote class="tr_bq" style="font-family: "Courier New",Courier,monospace;"><span style="color: blue;"><img</span><span style="color: red;"> src</span>=<span style="color: purple;">"tester.jpg"</span><span style="color: red;"> alt</span>=<span style="color: purple;">"Centered Baby Pic"</span><span style="color: red;"> width</span>=<span style="color: purple;">"134"</span><span style="color: red;"> height</span>=<span style="color: purple;">"200"</span><span style="color: blue;"> /</span><span style="color: blue;">></span></blockquote>In this case <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">tester.jpg</span> is a 134px wide/200px high image located in the same directory as our HTML file. Do not neglect to add the <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">alt</span> attribute or your HTML will fail EPUB validation. Please also recall that <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">img</span> elements should not appear on their own in your HTML markup, and they should be wrapped in a block element (typically <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;"><p>…</p></span> 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:<br />
<blockquote class="tr_bq" style="font-family: "Courier New",Courier,monospace;"><span style="color: blue;"><p></span><span style="color: blue;"><img</span><span style="color: red;"> alt</span>=<span style="color: purple;">"Centered Baby Pic"</span><span style="color: red;"> height</span>=<span style="color: purple;">"200"</span><span style="color: red;"> src</span>=<span style="color: purple;">"tester.jpg"</span><span style="color: red;"> width</span>=<span style="color: purple;">"134"</span><span style="color: blue;"> /</span><span style="color: blue;">></span>Pic with Caption That Has No CSS<span style="color: blue;"></p></span></blockquote><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx3d1j1wb1Fqfd_Pap7xYPcUUTdbFVQV5_s4lHokgD3o6wk4MoZGHuvxYXMunhkdQxteCPw4XkM2C7DfGh6N8ei8P4I5Yxl0xBWUsRmK8PAPZrfIQ72zywdzOhcXQ0kWoXUpXY-jN1-C0/s1600/images-nocss.gif" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx3d1j1wb1Fqfd_Pap7xYPcUUTdbFVQV5_s4lHokgD3o6wk4MoZGHuvxYXMunhkdQxteCPw4XkM2C7DfGh6N8ei8P4I5Yxl0xBWUsRmK8PAPZrfIQ72zywdzOhcXQ0kWoXUpXY-jN1-C0/s1600/images-nocss.gif" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Example of Poor Image Layout with no CSS</td></tr>
</tbody></table><br />
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 (<span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;"><br /></span>).<br />
<br />
Some example CSS for images that functions well on all Kindle devices is as follows:<br />
<blockquote class="tr_bq" style="font-family: "Courier New",Courier,monospace;"><span style="color: blue; font-weight: bold;">p</span>.<span style="color: red;">imgcentered</span><br />
{<br />
<span style="color: #2b547e;">text-indent</span>: 0;<br />
<span style="color: #2b547e;">margin</span>: 1em 0 0 0;<br />
<span style="color: #2b547e;">padding</span>: 0;<br />
<span style="color: #2b547e;">text-align</span>: center;<br />
<span style="color: #2b547e;">font-size</span>: 0.8em;<br />
}</blockquote>And the HTML:<br />
<blockquote class="tr_bq" style="font-family: "Courier New",Courier,monospace;"><span style="color: blue;"><p</span><span style="color: red;"> class</span>=<span style="color: purple;">"imgcentered"</span><span style="color: blue;">></span><span style="color: blue;"><img</span><span style="color: red;"> src</span>=<span style="color: purple;">"tester.jpg"</span><span style="color: red;"> alt</span>=<span style="color: purple;">"Centered Baby Pic"</span><span style="color: red;"> width</span>=<span style="color: purple;">"134"</span><span style="color: red;"> height</span>=<span style="color: purple;">"200"</span><span style="color: blue;"> /</span><span style="color: blue;">></span><span style="color: blue;"><br</span><span style="color: blue;"> /</span><span style="color: blue;">></span>Centered Pic<span style="color: blue;"></p></span></blockquote><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDvaZpgRwmu0pOvZ0mFn2ECR_wJ3g61EP68zpj-Jlb-NdpcBgnki7ZuXaYEuR4lnLlr80BCcKMZKcUHyuAW9z8hjCyLzzYEO2HmjaOHwIMDOrU_cui5cklCklbCs4yv1LhoiuzRsa28eA/s1600/images-css-allkindle.gif" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDvaZpgRwmu0pOvZ0mFn2ECR_wJ3g61EP68zpj-Jlb-NdpcBgnki7ZuXaYEuR4lnLlr80BCcKMZKcUHyuAW9z8hjCyLzzYEO2HmjaOHwIMDOrU_cui5cklCklbCs4yv1LhoiuzRsa28eA/s1600/images-css-allkindle.gif" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Properly Centered Image with Caption Below</td></tr>
</tbody></table><br />
<b>Important Note:</b> Be careful with the <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">text-indent</span> property when centering images. You should set it to 0 to avoid the box that the image is in from being slightly off-center.<br />
<br />
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.<br />
<br />
<h2>Adding Borders to Images (Kindle Fire Only)</h2><br />
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:<br />
<blockquote class="tr_bq" style="font-family: "Courier New",Courier,monospace;"><span style="color: blue; font-weight: bold;">p</span>.<span style="color: red;">imgcentered</span> <span style="color: blue; font-weight: bold;">img</span><br />
{<br />
<span style="color: #2b547e;">border-width</span>: 2px;<br />
<span style="color: #2b547e;">border-style</span>: solid;<br />
<span style="color: #2b547e;">border-color</span>: red;<br />
}</blockquote><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUoCHUWtoWv4hwxt_FYMVzeuAIk393-mhMF2nk2WyoRIkOSlgLD_Vzd7OyzdMTkyWSh_3rcZvqLJ50sfzeGxzh6NEkqCad7B4yAp6Z218i5fnx-KikWZ68HGNlwyy51NpuaFpH_oWh0P4/s1600/images-css-border.gif" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUoCHUWtoWv4hwxt_FYMVzeuAIk393-mhMF2nk2WyoRIkOSlgLD_Vzd7OyzdMTkyWSh_3rcZvqLJ50sfzeGxzh6NEkqCad7B4yAp6Z218i5fnx-KikWZ68HGNlwyy51NpuaFpH_oWh0P4/s1600/images-css-border.gif" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Image with a Border in Kindle Fire</td></tr>
</tbody></table><b>Tip:</b> You can use the shorthand CSS property <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">border</span> to include all <a href="http://reference.sitepoint.com/css/border">three of these styles in one declaration</a>. In this example, the declaration would be <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">border: 2px solid red;</span>.<br />
<br />
<h2>Understanding Floating (Kindle Fire Only)</h2><br />
Floating an image is the process of wrapping text around it, which is typical of a print book. You can either <b>float images</b> to the <b>left</b> or to the <b>right</b>. 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 <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">float: left;</span> and <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">float: right;</span> 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 href="http://www.alistapart.com/articles/css-floats-101/">A List Apart</a> and <a href="http://css-tricks.com/all-about-floats/">CSS Tricks</a> 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.<br />
<br />
Suppose you want to have an image <i>floated to the left</i> with text wrapped around it. Some example CSS would be as follows:<br />
<blockquote class="tr_bq" style="font-family: "Courier New",Courier,monospace;"><span style="color: blue; font-weight: bold;">p</span>.<span style="color: red;">imgleft</span><br />
{<br />
<span style="color: #2b547e;">text-indent</span>: 0;<br />
<span style="color: #2b547e;">margin</span>: 1em 0 0 0;<br />
<span style="color: #2b547e;">padding</span>: 5px;<br />
<span style="color: #2b547e;">text-align</span>: center;<br />
<span style="color: #2b547e;">font-size</span>: 0.8em;<br />
<span style="color: #2b547e;">float</span>: left;<br />
}</blockquote>And the HTML:<br />
<blockquote class="tr_bq" style="font-family: "Courier New",Courier,monospace;"><span style="color: blue;"><p</span><span style="color: red;"> class</span>=<span style="color: purple;">"imgleft"</span><span style="color: blue;">></span><span style="color: blue;"><img</span><span style="color: red;"> src</span>=<span style="color: purple;">"tester.jpg"</span><span style="color: red;"> alt</span>=<span style="color: purple;">"Floated Left Baby Pic"</span><span style="color: red;"> width</span>=<span style="color: purple;">"134"</span><span style="color: red;"> height</span>=<span style="color: purple;">"200"</span><span style="color: blue;"> /</span><span style="color: blue;">></span><span style="color: blue;"><br</span><span style="color: blue;"> /</span><span style="color: blue;">></span>Floated Left Pic<span style="color: blue;"></p></span><br />
<span style="color: blue;"><p></span>…<span style="color: blue;"></p></span></blockquote><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN_zbYRggJ3RqJsp56CGgmKwIWaY5Jitf8SruPXlM5P_Y5Duj5FUKhxTJ_4SltTI4oqBvf8odhaVCZzN2tpD2NVht1ZNmcYEsfVBM5cVI3dE9-unNyRk2lqhun7m7rF8xRLo151keyTwA/s1600/images-floated-left.gif" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN_zbYRggJ3RqJsp56CGgmKwIWaY5Jitf8SruPXlM5P_Y5Duj5FUKhxTJ_4SltTI4oqBvf8odhaVCZzN2tpD2NVht1ZNmcYEsfVBM5cVI3dE9-unNyRk2lqhun7m7rF8xRLo151keyTwA/s1600/images-floated-left.gif" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"> Image Floated to the Left on the Kindle Fire</td></tr>
</tbody></table>You will notice that <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">padding</span> 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 <b>before</b> the content that will wrap around it.<br />
<br />
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:<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEoZekxDl5rJbz7if7l-TgFYfuJwPMPqiBAMrGxkoRrCWS3ibzoH1EQgr4YfvX5I4GZA4BVOf-4M47P0MsstPv0pi0zmd-AqCVwhgIBpEu5AfEgCFCsN2ju1xW_7mhL3F8siJjGRglotU/s1600/images-floated-left-long-caption.gif" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEoZekxDl5rJbz7if7l-TgFYfuJwPMPqiBAMrGxkoRrCWS3ibzoH1EQgr4YfvX5I4GZA4BVOf-4M47P0MsstPv0pi0zmd-AqCVwhgIBpEu5AfEgCFCsN2ju1xW_7mhL3F8siJjGRglotU/s1600/images-floated-left-long-caption.gif" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><br />
Floated Box Expands Based on Caption Length</td></tr>
</tbody></table>If you wish to avoid this problem, you can declare the <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">width</span> property of the floated element. This will ensure that the text wraps to the next line.<br />
<br />
<h2>Clearing the Float (Kindle Fire Only)</h2><br />
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:<br />
<blockquote class="tr_bq" style="font-family: "Courier New",Courier,monospace;"><span style="color: blue; font-weight: bold;">p</span>.<span style="color: red;">imgright</span><br />
{<br />
<span style="color: #2b547e;">text-indent</span>: 0;<br />
<span style="color: #2b547e;">margin</span>: 1em 0 0 0;<br />
<span style="color: #2b547e;">padding</span>: 0 0 0 5px;<br />
<span style="color: #2b547e;">text-align</span>: center;<br />
<span style="color: #2b547e;">font-size</span>: 0.8em;<br />
<span style="color: #2b547e;">float</span>: right;<br />
}</blockquote>And the HTML:<br />
<blockquote class="tr_bq" style="font-family: "Courier New",Courier,monospace;"><span style="color: blue;"><p</span><span style="color: red;"> class</span>=<span style="color: purple;">"imgright"</span><span style="color: blue;">></span><span style="color: blue;"><img</span><span style="color: red;"> src</span>=<span style="color: purple;">"tester.jpg"</span><span style="color: red;"> alt</span>=<span style="color: purple;">"Floated Right Baby Pic"</span><span style="color: red;"> width</span>=<span style="color: purple;">"134"</span><span style="color: red;"> height</span>=<span style="color: purple;">"200"</span><span style="color: blue;"> /</span><span style="color: blue;">></span><span style="color: blue;"><br</span><span style="color: blue;"> /</span><span style="color: blue;">></span>Floated Right Pic<span style="color: blue;"></p></span><br />
<span style="color: blue;"><p></span>A very short first paragraph that is too short to get around the image.<span style="color: blue;"></p></span><br />
<span style="color: blue;"><p></span>The next paragraph - not clearing the float!<span style="color: blue;"></p></span></blockquote><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqevnrF9bx3rnUXk7alvD7-zvIwcQJW5GU5P1CzuVnGIlXYGidwvkczEdPXfvPkfoXzGWvvmqUX0CrX5l5ItoqYk_2WMOH4iFe3Lb82Yqw4HBFDMFew7Kw9gU-r9iTkS672bxDLvVzdwo/s1600/images-floated-right-noclear.gif" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqevnrF9bx3rnUXk7alvD7-zvIwcQJW5GU5P1CzuVnGIlXYGidwvkczEdPXfvPkfoXzGWvvmqUX0CrX5l5ItoqYk_2WMOH4iFe3Lb82Yqw4HBFDMFew7Kw9gU-r9iTkS672bxDLvVzdwo/s1600/images-floated-right-noclear.gif" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Example of Not Clearing the Float</td></tr>
</tbody></table>The fact that both paragraph elements are wrapped around the image is <b>not a bug in the Kindle Fire</b>. All markup and content in the HTML following a floated element will try to wrap around it, unless you <i>clear the float</i>. Clearing is done with the CSS declaration <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">clear: both;</span>, 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:<br />
<blockquote class="tr_bq" style="font-family: "Courier New",Courier,monospace;"><span style="color: blue; font-weight: bold;">p</span>.<span style="color: red;">clearit</span> {<span style="color: #2b547e;">clear</span>: both;}</blockquote>Some example HTML that alters the second paragraph:<br />
<blockquote class="tr_bq" style="font-family: "Courier New",Courier,monospace;"><span style="color: blue;"><p</span><span style="color: red;"> class</span>=<span style="color: purple;">"clearit"</span><span style="color: blue;">></span>The next paragraph - clearing the float and then some more!<span style="color: blue;"></p></span></blockquote><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdQ-EPkha1z90gGNujkehrdCM5pn4Bs5TJ-d4QsnqRgxZs_5VK86izNjPGfxUNG5bHGK7on5kl0gh8vwctxq3-BArcwYQ427ZDHvSLHBtYdZCyMPTpZJNSG6AU1p3aTWldg-aml-nwjrA/s1600/images-floated-right-clear.gif" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdQ-EPkha1z90gGNujkehrdCM5pn4Bs5TJ-d4QsnqRgxZs_5VK86izNjPGfxUNG5bHGK7on5kl0gh8vwctxq3-BArcwYQ427ZDHvSLHBtYdZCyMPTpZJNSG6AU1p3aTWldg-aml-nwjrA/s1600/images-floated-right-clear.gif" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Example of Clearing the Float</td></tr>
</tbody></table>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.<br />
<br />
<a href="http://www.paulsalvette.com/2012/06/borders-rounded-corners-and-box-shadows.html">Next Post: Advanced CSS - Borders, Rounded Corners, and Box Shadows</a>Paul Salvettehttp://www.blogger.com/profile/11818202201018195312noreply@blogger.com3tag:blogger.com,1999:blog-8917601577161181396.post-58324166645951706282012-04-24T13:24:00.000+07:002012-09-26T22:12:06.790+07:00Adding Page Breaks for Your Kindle eBook<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmyqUBZhF7BO4l5WQ2Sb9HQ9nwjVLVdybiJfAf5qH9EHMSmOQd-P1uB824bQUSPDwxmsBcQxJ1OkJywmwhKfs7uew49Sbmydqvb3VTiZz3mu0DqHFeYLbAgXgTkGXmUtN6MV-4HC7ysJs/s1600/BBeBooksLogo_Small.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="53" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmyqUBZhF7BO4l5WQ2Sb9HQ9nwjVLVdybiJfAf5qH9EHMSmOQd-P1uB824bQUSPDwxmsBcQxJ1OkJywmwhKfs7uew49Sbmydqvb3VTiZz3mu0DqHFeYLbAgXgTkGXmUtN6MV-4HC7ysJs/s320/BBeBooksLogo_Small.png" width="320" /></a></div><br />
Thank you for visiting this eBook design tutorial. We now have an eBook design startup—<a href="http://bbebooksthailand.com">BB eBooks</a>—dedicated to helping <em>independent authors</em> and <em>small presses</em> get their eBooks formatted, converted, and ready for sale at all the major online retailers (e.g. <a href="http://kdp.amazon.com">Amazon's Kindle Store</a>, <a href="http://pubit.barnesandnoble.com/">Barnes & Noble's Nook</a>, <a href="http://www.apple.com/ipad/built-in-apps/">iBookstore</a>, <a href="http://www.smashwords.com/">Smashwords</a>, etc.) Please <a href="http://bbebooksthailand.com/quote.html">contact us</a> 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 <em>free online tutorials</em> and <em>apps</em> to help you professionally <b>design your eBook</b>. Please visit our <a href="http://bbebooksthailand.com/developers.html">Developers page</a> and let’s work together to improve the overall standards of eBooks. Also, please <a href="http://bbebooksthailand.com">sign up</a> for the mailing list for promotions, design & marketing tips, plus eBook industry news.<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi04obE0JJcHpIMbmWixKtanBSvH-4-ocngNLU0OvcIlZkMTyTEgQyABGjU5OJqGUeSydf0RqDOmA4rqpBEUbcJIEw6jgU4T_h7kZICiXjGe7dXJb2b5u6PKRIGYgAAoksMxKvaooxHPvs/s1600/eBook-Design-Development-Paul-Salvette.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi04obE0JJcHpIMbmWixKtanBSvH-4-ocngNLU0OvcIlZkMTyTEgQyABGjU5OJqGUeSydf0RqDOmA4rqpBEUbcJIEw6jgU4T_h7kZICiXjGe7dXJb2b5u6PKRIGYgAAoksMxKvaooxHPvs/s1600/eBook-Design-Development-Paul-Salvette.jpg" /></a></div><br />
Looking for a <b>complete guide</b> on eBook design and development? Please consider <i>The eBook Design and Development Guide</i>, 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 <a href="http://www.amazon.com/gp/product/B009G2JMRK/ref=as_li_qf_sp_asin_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=B009G2JMRK&linkCode=as2&tag=paulsal-20">Amazon for $6.99 today</a>.<br />
<br />
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 <a href="http://www.thefreedictionary.com/pagination">pagination</a> 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 <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">.doc/.docx</span> or, even worse, from a <span style="background-color: #eee7e7; font-family: MONOSPACE; font-weight: bold;">PDF</span>, are bound to have pagination issues and a sloppy eBook. <br />
<br />
<h2>Forcing Page Breaks in the Kindle</h2>With CSS, forcing page breaks is very easy. There are two basic ways to do this: the <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">page-break-before: always;</span> declaration and the <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">page-break-after: always;</span> 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:<br />
<blockquote class="tr_bq"><div style="font-family: "Courier New",Courier,monospace;"><span style="color: blue; font-weight: bold;">h2</span>.<span style="color: red;">pagebreak_beforeme</span> </div><div style="font-family: "Courier New",Courier,monospace;">{</div><div style="font-family: "Courier New",Courier,monospace;"><span style="color: #2b547e;">margin</span>: 2em 0 0 0;</div><div style="font-family: "Courier New",Courier,monospace;"><span style="color: #2b547e;">page-break-before</span>: always;</div><div style="font-family: "Courier New",Courier,monospace;"><span style="color: #2b547e;">text-align</span>: center;</div><div style="font-family: "Courier New",Courier,monospace;">}</div><div style="font-family: "Courier New",Courier,monospace;"><br />
</div><div style="font-family: "Courier New",Courier,monospace;"><span style="color: blue; font-weight: bold;">h2</span>.<span style="color: red;">pagebreak_afterme</span> </div><div style="font-family: "Courier New",Courier,monospace;">{</div><div style="font-family: "Courier New",Courier,monospace;"><span style="color: #2b547e;">margin</span>: 2em 0 0 0;</div><div style="font-family: "Courier New",Courier,monospace;"><span style="color: #2b547e;">page-break-after</span>: always;</div><div style="font-family: "Courier New",Courier,monospace;"><span style="color: #2b547e;">text-align</span>: center;<span style="font-family: "Courier New",Courier,monospace;"><br />
}</span></div></blockquote><br />
<div class="separator" style="clear: both; text-align: center;"></div><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLeltzb6Tf-p0okx_Xcp58fPc8XfkHlKKbKfAybVuh4yvIybt-cEA6eDuulstERQdP1z9hCqRZIynRnhpmiozAJUZAUoDTu3szskUdm0Le47ynIl0TbRveW9NjK5xmGgjSVFls5JGSB9o/s1600/pagebreak-example.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="91" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLeltzb6Tf-p0okx_Xcp58fPc8XfkHlKKbKfAybVuh4yvIybt-cEA6eDuulstERQdP1z9hCqRZIynRnhpmiozAJUZAUoDTu3szskUdm0Le47ynIl0TbRveW9NjK5xmGgjSVFls5JGSB9o/s320/pagebreak-example.jpg" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Example of Page Breaks in the Kindle Fire</td></tr>
</tbody></table><br />
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 <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">page-break-before: always;</span> declaration. You will notice that a top margin of <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">2em</span> was declared in the preceding CSS. Observe how this is rendered differently between the Kindle Fire, Kindle for iOS, and e-ink Kindles:<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNP99aDBzTrlffp_lrINpANBUGAJx7lB19hEghY1dLzncrISMrSxMF3XdxzFyus68zWsJhwKMkSXrs5vivC_lVtz7dC4iDAOb6XxXoI9KtHwxpd8YT-v_auFCgEfIj5o2VHcJiJLCj0sA/s1600/page-break-margin-problems-kindle.gif" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNP99aDBzTrlffp_lrINpANBUGAJx7lB19hEghY1dLzncrISMrSxMF3XdxzFyus68zWsJhwKMkSXrs5vivC_lVtz7dC4iDAOb6XxXoI9KtHwxpd8YT-v_auFCgEfIj5o2VHcJiJLCj0sA/s320/page-break-margin-problems-kindle.gif" width="290" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Problems with Margin Rendering on Page Breaks </td></tr>
</tbody></table>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… <br />
<br />
<h2>The Alternative and Better Method for Controlling Page Breaks on the Kindle</h2>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 <b>margin declarations will be recognized</b>.<br />
<br />
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. <br />
<br />
<h2>Avoiding Page Breaks</h2>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 <i>after</i> the image does not make for a good reading experience. To avoid this common scenario, you can use the CSS declaration <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">page-break-inside: avoid;</span>, which will cause the eReading device to try and put all of the selected content on the same page.<br />
<br />
<b>Important Note:</b> The <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">page-break-inside: avoid;</span> CSS declaration is only recognized on the Kindle Fire.<br />
<br />
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:<br />
<blockquote class="tr_bq"><div style="font-family: "Courier New",Courier,monospace;"><span style="color: blue; font-weight: bold;">p</span>.<span style="color: red;">pagebreak_avoid</span></div><div style="font-family: "Courier New",Courier,monospace;">{</div><div style="font-family: "Courier New",Courier,monospace;"><span style="color: #2b547e;">page-break-inside</span>: avoid;</div><div style="font-family: "Courier New",Courier,monospace;"><span style="color: #2b547e;">text-align</span>: center;</div><div style="font-family: "Courier New",Courier,monospace;"><span style="color: #2b547e;">font-size</span>: 0.8em;</div><div style="font-family: "Courier New",Courier,monospace;">}</div></blockquote>And the corresponding HTML:<br />
<blockquote class="tr_bq"><div style="font-family: "Courier New",Courier,monospace;"><span style="color: blue;"><p></span>…<span style="color: blue;"></p></span></div><div style="font-family: "Courier New",Courier,monospace;"><span style="color: blue;"><p</span><span style="color: red;"> class</span>=<span style="color: purple;">"pagebreak_avoid"</span><span style="color: blue;">></span><span style="color: blue;"><img</span><span style="color: red;"> src</span>=<span style="color: purple;">"tester.jpg"</span><span style="color: red;"> width</span>=<span style="color: purple;">"400"</span><span style="color: red;"> height</span>=<span style="color: purple;">"600"</span><span style="color: red;"> alt</span>=<span style="color: purple;">"Picture of a Cute Baby"</span><span style="color: blue;"> /</span><span style="color: blue;">></span><span style="color: blue;"><br</span><span style="color: blue;"> /</span><span style="color: blue;">></span>The Caption would go here. If it's really long, you probably want it to be on the same page as the picture.<span style="color: blue;"></p></span><span style="color: blue;"><br />
<p></span>…<span style="color: blue;"></p></span></div></blockquote><div style="font-family: "Courier New",Courier,monospace;"></div><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvB9pwcTywcEgfZuvzxe3P-09uZiTjIi2XFEaB1oPtq8BazcnhCL29T024_I-8t2VD1jEWJlgfUHwjglc-VD7GXzobWd7GHcBvT5shnXEgtUBA9qMprnF9dhtBON2jA39NnQGiOSyeBcE/s1600/kindle-fire-page-break-avoid.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvB9pwcTywcEgfZuvzxe3P-09uZiTjIi2XFEaB1oPtq8BazcnhCL29T024_I-8t2VD1jEWJlgfUHwjglc-VD7GXzobWd7GHcBvT5shnXEgtUBA9qMprnF9dhtBON2jA39NnQGiOSyeBcE/s1600/kindle-fire-page-break-avoid.jpg" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Avoiding Page Breaks in the Kindle Fire</td></tr>
</tbody></table>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 <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">page-break-inside: avoid;</span> 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.<br />
<br />
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 <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">div</span> to have the <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">page-break-inside: avoid;</span> declaration.<br />
<br />
<b>Tip:</b> 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. <br />
<br />
<h2>Hyphens and the Kindle - Not Just Yet</h2>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 <a href="http://epubsecrets.com/new-kindle-fire-8-format-guidelines-kindlegen-kindlepreviewer-id-plugin.php">alter hyphenation control</a>. 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:<br />
<blockquote class="tr_bq"><span style="color: blue; font-family: "Courier New",Courier,monospace; font-style: italic; font-weight: bold;">Some selector</span><span style="font-family: "Courier New",Courier,monospace;"> {</span><span style="color: #2b547e; font-family: "Courier New",Courier,monospace;">hyphens</span><span style="font-family: "Courier New",Courier,monospace;">: none;}</span></blockquote><br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXYBN3rNr-EbFDuAC1Ds-sJZrFdTThcOIqVJiuTTI5NIuyOPeAlNCoxjT6ag_4Z3YDPfXpgTlG5H7x3h4F-nSUAMbJk-TnTEGTU8m4-LeGHVvYctMs85xIwldYO2p0s9VclhSfnJ1qDjg/s1600/no-hyphen-support-kindle.gif" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXYBN3rNr-EbFDuAC1Ds-sJZrFdTThcOIqVJiuTTI5NIuyOPeAlNCoxjT6ag_4Z3YDPfXpgTlG5H7x3h4F-nSUAMbJk-TnTEGTU8m4-LeGHVvYctMs85xIwldYO2p0s9VclhSfnJ1qDjg/s1600/no-hyphen-support-kindle.gif" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">No Way to Control Hyphens on the Kindle</td></tr>
</tbody></table>Paul Salvettehttp://www.blogger.com/profile/11818202201018195312noreply@blogger.com2tag:blogger.com,1999:blog-8917601577161181396.post-86129094135413917052012-04-18T21:19:00.000+07:002012-09-26T22:12:18.417+07:00Indents, Margins, and Alignment for the Kindle Fire<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmyqUBZhF7BO4l5WQ2Sb9HQ9nwjVLVdybiJfAf5qH9EHMSmOQd-P1uB824bQUSPDwxmsBcQxJ1OkJywmwhKfs7uew49Sbmydqvb3VTiZz3mu0DqHFeYLbAgXgTkGXmUtN6MV-4HC7ysJs/s1600/BBeBooksLogo_Small.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="53" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmyqUBZhF7BO4l5WQ2Sb9HQ9nwjVLVdybiJfAf5qH9EHMSmOQd-P1uB824bQUSPDwxmsBcQxJ1OkJywmwhKfs7uew49Sbmydqvb3VTiZz3mu0DqHFeYLbAgXgTkGXmUtN6MV-4HC7ysJs/s320/BBeBooksLogo_Small.png" width="320" /></a></div><br />
Thank you for visiting this eBook design tutorial. We now have an eBook design startup—<a href="http://bbebooksthailand.com">BB eBooks</a>—dedicated to helping <em>independent authors</em> and <em>small presses</em> get their eBooks formatted, converted, and ready for sale at all the major online retailers (e.g. <a href="http://kdp.amazon.com">Amazon's Kindle Store</a>, <a href="http://pubit.barnesandnoble.com/">Barnes & Noble's Nook</a>, <a href="http://www.apple.com/ipad/built-in-apps/">iBookstore</a>, <a href="http://www.smashwords.com/">Smashwords</a>, etc.) Please <a href="http://bbebooksthailand.com/quote.html">contact us</a> 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 <em>free online tutorials</em> and <em>apps</em> to help you professionally <b>design your eBook</b>. Please visit our <a href="http://bbebooksthailand.com/developers.html">Developers page</a> and let’s work together to improve the overall standards of eBooks. Also, please <a href="http://bbebooksthailand.com">sign up</a> for the mailing list for promotions, design & marketing tips, plus eBook industry news.<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi04obE0JJcHpIMbmWixKtanBSvH-4-ocngNLU0OvcIlZkMTyTEgQyABGjU5OJqGUeSydf0RqDOmA4rqpBEUbcJIEw6jgU4T_h7kZICiXjGe7dXJb2b5u6PKRIGYgAAoksMxKvaooxHPvs/s1600/eBook-Design-Development-Paul-Salvette.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi04obE0JJcHpIMbmWixKtanBSvH-4-ocngNLU0OvcIlZkMTyTEgQyABGjU5OJqGUeSydf0RqDOmA4rqpBEUbcJIEw6jgU4T_h7kZICiXjGe7dXJb2b5u6PKRIGYgAAoksMxKvaooxHPvs/s1600/eBook-Design-Development-Paul-Salvette.jpg" /></a></div><br />
Looking for a <b>complete guide</b> on eBook design and development? Please consider <i>The eBook Design and Development Guide</i>, 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 <a href="http://www.amazon.com/gp/product/B009G2JMRK/ref=as_li_qf_sp_asin_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=B009G2JMRK&linkCode=as2&tag=paulsal-20">Amazon for $6.99 today</a>.<br />
<br />
<a href="http://www.paulsalvette.com/2012/04/understanding-css-box-model-ebook.html">Previous Post: CSS Box Model</a><br />
<br />
The default rendering of HTML content in eBook reading devices is not exactly a pretty sight. Typically, there will be no indents, justified text, and the same spacing in-between each paragraph. This dullness and uniformity create a poor experience for the reader. People who upload .doc files directly into the Kindle Direct Publishing program get results like this, and their lack of knowledge of HTML directly correlates with poor sales. By using some simple CSS styling, you can make your eBook stand out from the rest of the crowd.<br />
<br />
<h2>Block vs. First-Line Indenting</h2><br />
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.<br />
<br />
Below is an example of the different paragraph styles:<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiz1C4u1OaYOaKC_qleylRL61gXrBm7i9froArBh9gt0tYqoVB19TJXx69Dy6RhQPnPNR5I-utJV7aV0pHdaF9sDA_u9Kaqc9FjVICAX2Jb_e6uj98kz1ZEl3KSR1WLRRKO9V4Ococlo_Q/s1600/block-first-line-indents.gif" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiz1C4u1OaYOaKC_qleylRL61gXrBm7i9froArBh9gt0tYqoVB19TJXx69Dy6RhQPnPNR5I-utJV7aV0pHdaF9sDA_u9Kaqc9FjVICAX2Jb_e6uj98kz1ZEl3KSR1WLRRKO9V4Ococlo_Q/s1600/block-first-line-indents.gif" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Block vs. First-Line Indenting Example in Chrome</td></tr>
</tbody></table><br />
Joel Friedlander <a href="http://www.thebookdesigner.com/2012/04/paragraphing-style/">has an excellent post on the subject of paragraph styles</a>, and he strongly advises to choose one or the other, but <b>never both</b>.<br />
<br />
It may be tempting for you hipsters who still use typewriters to consider inserting a <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;"><br /></span> 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 <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">text-indent</span>, which adds an indent to the first line of every paragraph.<br />
<br />
For <b>block paragraphs</b>, you can use the following CSS:<br />
<blockquote class="tr_bq" style="font-family: "Courier New",Courier,monospace;"><span style="color: blue; font-weight: bold;">p</span> {<br />
<span style="color: #2b547e;">text-indent</span>: 0;<br />
<span style="color: #2b547e;">margin</span>: 1em 0 0 0;<br />
<span style="color: #2b547e;">padding</span>: 0;<br />
}</blockquote>For <b>first-line indent paragraphs</b>, you can use the following CSS:<br />
<blockquote class="tr_bq"><div style="font-family: "Courier New",Courier,monospace;"><span style="color: blue; font-weight: bold;">p</span> {</div><div style="font-family: "Courier New",Courier,monospace;"><span style="color: #2b547e;">text-indent</span>: 1.25em;</div><div style="font-family: "Courier New",Courier,monospace;"><span style="color: #2b547e;">margin</span>: 0;</div><div style="font-family: "Courier New",Courier,monospace;"><span style="color: #2b547e;">padding</span>: 0;</div><div style="font-family: "Courier New",Courier,monospace;">}</div></blockquote>Notice how the selector <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">p</span> was used, so that every single <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;"><p></span> 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 <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">1em</span> and <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">2em</span> indent for fiction, and this guide recommends <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">1.25em</span>. 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 <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">margin</span> property (<i>top-right-bottom-left</i>).<br />
<br />
<h2>Aligning Text</h2><br />
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 <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">text-align</span> that allows you to align the text with the self-explanatory values of <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">left</span>, <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">center</span>, <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">right</span>, or <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">justify</span>.<br />
<br />
By default, the Kindle typically sets <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">text-align</span> to <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">justify</span>; however, other eBook reading devices (like iBooks and Adobe Digital Editions) sets <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">text-align</span> to <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">left</span>. 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.<br />
<br />
Here is an example of different CSS styles being applied alter content alignment:<br />
<blockquote class="tr_bq"><div style="font-family: "Courier New",Courier,monospace;"><span style="color: blue; font-weight: bold;">h2</span> {<span style="color: #2b547e;">text-align</span>: center;}</div><div style="font-family: "Courier New",Courier,monospace;"><span style="color: blue; font-weight: bold;">p</span> {<span style="color: #2b547e;">text-align</span>: justify;}</div><div style="font-family: "Courier New",Courier,monospace;"><span style="color: blue; font-weight: bold;">p</span>.<span style="color: red;">leftaligned</span> {<span style="color: #2b547e;">text-align</span>: left;}</div><div style="font-family: "Courier New",Courier,monospace;"><span style="color: blue; font-weight: bold;">p</span>.<span style="color: red;">rightaligned</span> {<span style="color: #2b547e;">text-align</span>: right;}</div></blockquote>And the HTML:<br />
<blockquote class="tr_bq" style="font-family: "Courier New",Courier,monospace;"><span style="color: blue;"><h2></span>Some Chapter Heading in the Middle<span style="color: blue;"></h2></span><br />
<span style="color: blue;"><p></span>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.<span style="color: blue;"></p></span><br />
<span style="color: blue;"><p</span><span style="color: red;"> class</span>=<span style="color: purple;">"leftaligned"</span><span style="color: blue;">></span>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.<span style="color: blue;"></p></span><br />
<span style="color: blue;"><p</span><span style="color: red;"> class</span>=<span style="color: purple;">"rightaligned"</span><span style="color: blue;">></span>This paragraph is aligned to the right. This might only be suitable if you are ending something with a signature. Use with discretion.<span style="color: blue;"></p></span></blockquote><br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTmnb-Tlm0XC2uGj3CCMlKYu8_SJsdgcYTLdX_rVKc6bL12vHlPYg6GgCJz-356IlZPvXBk4oYKw2Mv4SQjFf2LCOLlA3TE4KaN1t_S_d4o9ESIiFP4PPGv-SvSC8LLJ3Rpukix2hbIGM/s1600/alignment-examples.gif" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTmnb-Tlm0XC2uGj3CCMlKYu8_SJsdgcYTLdX_rVKc6bL12vHlPYg6GgCJz-356IlZPvXBk4oYKw2Mv4SQjFf2LCOLlA3TE4KaN1t_S_d4o9ESIiFP4PPGv-SvSC8LLJ3Rpukix2hbIGM/s1600/alignment-examples.gif" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><br />
Alignment Examples in the Kindle Fire</td></tr>
</tbody></table><br />
<b>Important Note:</b> The <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">text-align</span> property is actually aligning the text within the content area of the box, but it is <b>not aligning the box</b>. Even though the text appears to be centered in the above example, the <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">h2</span> box is actually fanned out across the width of the viewport, since the margins are <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">0</span> by default. You need to adjust the <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">margin</span> property to actually align the box within the viewport. If you are confused by this, <a href="http://www.pigsgourdsandwikis.com/2012/03/centering-in-ebooks-across-ereaders.html">please consult Liz Castro's discussion of the subject</a>. <br />
<br />
<h2>Using Margins to Your Advantage</h2><br />
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 <b>should not be confused</b> 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).<br />
<br />
Here is some example CSS for a block quote:<br />
<blockquote class="tr_bq"><div style="font-family: "Courier New",Courier,monospace;"><span style="color: blue; font-weight: bold;">p</span> {</div><div style="font-family: "Courier New",Courier,monospace;"><span style="color: #2b547e;">text-indent</span>: 1.25em;</div><div style="font-family: "Courier New",Courier,monospace;"><span style="color: #2b547e;">margin</span>: 0;</div><div style="font-family: "Courier New",Courier,monospace;"><span style="color: #2b547e;">padding</span>: 0;</div><div style="font-family: "Courier New",Courier,monospace;"><span style="color: #2b547e;">text-align</span>: justify;</div><div style="font-family: "Courier New",Courier,monospace;">}</div><div style="font-family: "Courier New",Courier,monospace;"><span style="color: blue; font-weight: bold;">p</span>.<span style="color: red;">blockquote</span> {</div><div style="font-family: "Courier New",Courier,monospace;"><span style="color: #2b547e;">text-indent</span>: 0;</div><div style="font-family: "Courier New",Courier,monospace;"><span style="color: #2b547e;">margin</span>: 0 2.5em 0 2.5em;</div><div style="font-family: "Courier New",Courier,monospace;"><span style="color: #2b547e;">padding</span>: 0;</div><div style="font-family: "Courier New",Courier,monospace;"><span style="color: #2b547e;">font-style</span>: italic;</div><div style="font-family: "Courier New",Courier,monospace;">}</div></blockquote>And here is the corresponding HTML:<br />
<blockquote class="tr_bq"><div style="font-family: "Courier New",Courier,monospace;"><span style="color: blue;"><p></span>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.<span style="color: blue;"></p></span></div><div style="font-family: "Courier New",Courier,monospace;"><span style="color: blue;"><p</span><span style="color: red;"> class</span>=<span style="color: purple;">"blockquote"</span><span style="color: blue;">></span>Notice the margins here on this notable quotable. It's shorter on both the left and right.<span style="color: blue;"></p></span></div></blockquote><br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu0P5e0S1XDx8VVooiRSlji25cc_hILxIq7vweCyWoXMVViLd7AXczdshHX8qQOz2I5sZLv0xSLX_D7MjnzOsxfFW__Og1yBZ94_uR6esGH_Xr-aF3GRbKrQsns5LK8Flat2kDsrM9gJg/s1600/margin-example-chrome.gif" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu0P5e0S1XDx8VVooiRSlji25cc_hILxIq7vweCyWoXMVViLd7AXczdshHX8qQOz2I5sZLv0xSLX_D7MjnzOsxfFW__Og1yBZ94_uR6esGH_Xr-aF3GRbKrQsns5LK8Flat2kDsrM9gJg/s1600/margin-example-chrome.gif" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Working with Margins</td></tr>
</tbody></table><br />
<br />
<b>Tip:</b> When creating your stylesheet, be careful when you use selectors that grab all elements (in the above example<span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">p</span>). If we had not made the declaration for the <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">blockquote</span> class o<span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;"> text-indent: 0;</span>, then the indent for the quote would have been <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">1.25em</span> creating an ugly offset.<br />
<br />
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 <i>always have the bottom margin be zero</i>.<br />
<br />
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.<br />
<br />
Some example CSS would be as follows:<br />
<blockquote class="tr_bq"><div style="font-family: "Courier New",Courier,monospace;"><span style="color: blue; font-weight: bold;">h2</span> {<span style="color: #2b547e;">margin</span>: 0; <span style="color: #2b547e;">padding</span>: 0; <span style="color: #2b547e;">text-align</span>: center;}</div><div style="font-family: "Courier New",Courier,monospace;"><span style="color: blue; font-weight: bold;">p</span> {<span style="color: #2b547e;">margin</span>: 1em 0 0 0; <span style="color: #2b547e;">padding</span>: 0; <span style="color: #2b547e;">text-align</span>: justify; <span style="color: #2b547e;">text-indent</span>: 0;}</div><div style="font-family: "Courier New",Courier,monospace;"><span style="color: blue; font-weight: bold;">p</span>.<span style="color: red;">firstpara</span> {<span style="color: #2b547e;">margin</span>: 2em 0 0 0;}</div></blockquote>And the HTML:<br />
<blockquote class="tr_bq"><div style="font-family: "Courier New",Courier,monospace;"><span style="color: blue;"><h2></span>Chapter Heading<span style="color: blue;"></h2></span></div><div style="font-family: "Courier New",Courier,monospace;"><span style="color: blue;"><p</span><span style="color: red;"> class</span>=<span style="color: purple;">"firstpara"</span><span style="color: blue;">></span>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.<span style="color: blue;"></p></span></div><div style="font-family: "Courier New",Courier,monospace;"><span style="color: blue;"><p></span>This is just a regular old &lt;p&gt; tag. It keeps a margin of 1em from the paragraph above it, so that the reader thinks that it is a blank line.<span style="color: blue;"></p></span></div></blockquote><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxOHH_bkKTonOH-E4cWCZCEh0CwUwa5GQ0kufemesKRkTajferoXJiRTLGdVa0omH3bV5zR1fxqHiYpTH3qDGTg-iNpvBcT9BRHwZtcrHLLTPlXV1ve-fCluw7v5Gg_S6_CcdsQmtR8ow/s1600/margin-tricks-kindle.gif" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="87" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxOHH_bkKTonOH-E4cWCZCEh0CwUwa5GQ0kufemesKRkTajferoXJiRTLGdVa0omH3bV5zR1fxqHiYpTH3qDGTg-iNpvBcT9BRHwZtcrHLLTPlXV1ve-fCluw7v5Gg_S6_CcdsQmtR8ow/s320/margin-tricks-kindle.gif" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Tricking Out Kindle's Margins</td></tr>
</tbody></table><h2>Putting Everything Together</h2><br />
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 <i>Top Gun</i> 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:<br />
<ul><li>a centered chapter heading</li>
<li>the first paragraph of the chapter must be spaced from the chapter heading by 2em</li>
<li>first-line indent paragraph style with a fully-justified alignment</li>
<li>a quote that has a block paragraph style with left-justified alignment</li>
</ul>Some suitable CSS to accomplish this:<span style="color: blue; font-weight: bold;"><br />
</span><br />
<blockquote class="tr_bq"><span style="color: blue; font-weight: bold;"> <span style="font-family: "Courier New",Courier,monospace;">h2</span></span><span style="font-family: "Courier New",Courier,monospace;"> {</span></blockquote><blockquote style="font-family: "Courier New",Courier,monospace;"><span style="color: #2b547e;">margin</span>: 0;<br />
<span style="color: #2b547e;">padding</span>: 0;<br />
<span style="color: #2b547e;">text-align</span>: center;<br />
<span style="color: #2b547e;">font-size</span>: 1.5em;<br />
<span style="color: #2b547e;">font-weight</span>: bold;<br />
}<br />
<br />
<span style="color: blue; font-weight: bold;">p</span> {<br />
<span style="color: #2b547e;">text-indent</span>: 1.25em;<br />
<span style="color: #2b547e;">margin</span>: 0;<br />
<span style="color: #2b547e;">padding</span>: 0;<br />
<span style="color: #2b547e;">text-align</span>: justify;<br />
<span style="color: #2b547e;">font-size</span>: 1.0em;<br />
}<br />
<br />
<span style="color: blue; font-weight: bold;">p</span>.<span style="color: red;">firstpara</span> {<br />
<span style="color: #2b547e;">margin</span>: 2em 0 0 0;<br />
}<br />
<br />
<span style="color: blue; font-weight: bold;">p</span>.<span style="color: red;">blockquote</span> {<br />
<span style="color: #2b547e;">text-indent</span>: 0em;<br />
<span style="color: #2b547e;">margin</span>: 1em 2.5em 0 2.5em;<br />
<span style="color: #2b547e;">font-style</span>: italic;<br />
}<br />
<br />
<span style="color: blue; font-weight: bold;">p</span>.<span style="color: red;">firstpara_after_blockquote</span> {<br />
<span style="color: #2b547e;">margin</span>: 1em 0 0 0;<br />
}<br />
<br />
<span style="color: blue; font-weight: bold;">span</span>.<span style="color: red;">i</span> {<span style="color: #2b547e;">font-style</span>: italic;}</blockquote>And the HTML containing this wretched story:<br />
<blockquote class="tr_bq"><div style="font-family: "Courier New",Courier,monospace;"><span style="color: blue;"><h2></span>Top Gun Romance<span style="color: blue;"></h2></span></div><div style="font-family: "Courier New",Courier,monospace;"><span style="color: blue;"><p</span><span style="color: red;"> class</span>=<span style="color: purple;">"firstpara"</span><span style="color: blue;">></span>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.<span style="color: blue;"></p></span></div><div style="font-family: "Courier New",Courier,monospace;"><span style="color: blue;"><p></span>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.<span style="color: blue;"></p></span></div><div style="font-family: "Courier New",Courier,monospace;"><span style="color: blue;"><p</span><span style="color: red;"> class</span>=<span style="color: purple;">"blockquote"</span><span style="color: blue;">></span>Eh, lieutenant, what were you doing there?<span style="color: blue;"></p></span></div><div style="font-family: "Courier New",Courier,monospace;"><span style="color: blue;"><p</span><span style="color: red;"> class</span>=<span style="color: purple;">"blockquote"</span><span style="color: blue;">></span>Communicating. Keeping up foreign relations. You know… giving him the bird.<span style="color: blue;"></p></span></div><div style="font-family: "Courier New",Courier,monospace;"><span style="color: blue;"><p</span><span style="color: red;"> class</span>=<span style="color: purple;">"firstpara_after_blockquote"</span><span style="color: blue;">></span>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.<span style="color: blue;"></p></span></div><div style="font-family: "Courier New",Courier,monospace;"><span style="color: blue;"><p></span>The movie, <span style="color: blue;"><span</span><span style="color: red;"> class</span>=<span style="color: purple;">"i"</span><span style="color: blue;">></span>Top Gun<span style="color: blue;"></span></span>, and it's excellent soundtrack were so ahead of its time.<span style="color: blue;"></p></span></div></blockquote><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1HwA2SuHODcij1CSx4idCigBdiNqGZn4G8301u6wNNsQ6A5Ra_YdiMH9aC4udZUB5WkYJUIw1KZMxWtrP88L3o3Dqckxfxdf4Cn1V5rIS-2B5OwArHtUWE9RENo6ZTcdAQUP5COIv_Dg/s1600/topgun-romance.gif" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1HwA2SuHODcij1CSx4idCigBdiNqGZn4G8301u6wNNsQ6A5Ra_YdiMH9aC4udZUB5WkYJUIw1KZMxWtrP88L3o3Dqckxfxdf4Cn1V5rIS-2B5OwArHtUWE9RENo6ZTcdAQUP5COIv_Dg/s320/topgun-romance.gif" width="285" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Sample eBook Content with Various CSS Applied in Kindle Fire</td></tr>
</tbody></table><br />
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 <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">text-indent: 0;</span> for the <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">blockquote</span> class, because we had already set <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">text-indent: 1.25em;</span> for all paragraphs. Recall the CSS specificity hierarchy ensures that anything with a class will override the declarations made for general elements.<br />
<br />
As you become more proficient and advanced with CSS, be sure to keep a <i>big-picture view</i> in mind of how one simple declaration can affect the styling of your entire eBook.<br />
<br />
<u><b>Next Post: Page Breaks and Hyphenation</b></u>Paul Salvettehttp://www.blogger.com/profile/11818202201018195312noreply@blogger.com1tag:blogger.com,1999:blog-8917601577161181396.post-71541889947039060542012-04-15T21:37:00.001+07:002012-09-26T22:12:29.625+07:00Understanding the CSS Box Model - eBook Design Tutorial<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmyqUBZhF7BO4l5WQ2Sb9HQ9nwjVLVdybiJfAf5qH9EHMSmOQd-P1uB824bQUSPDwxmsBcQxJ1OkJywmwhKfs7uew49Sbmydqvb3VTiZz3mu0DqHFeYLbAgXgTkGXmUtN6MV-4HC7ysJs/s1600/BBeBooksLogo_Small.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="53" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmyqUBZhF7BO4l5WQ2Sb9HQ9nwjVLVdybiJfAf5qH9EHMSmOQd-P1uB824bQUSPDwxmsBcQxJ1OkJywmwhKfs7uew49Sbmydqvb3VTiZz3mu0DqHFeYLbAgXgTkGXmUtN6MV-4HC7ysJs/s320/BBeBooksLogo_Small.png" width="320" /></a></div><br />
Thank you for visiting this eBook design tutorial. We now have an eBook design startup—<a href="http://bbebooksthailand.com">BB eBooks</a>—dedicated to helping <em>independent authors</em> and <em>small presses</em> get their eBooks formatted, converted, and ready for sale at all the major online retailers (e.g. <a href="http://kdp.amazon.com">Amazon's Kindle Store</a>, <a href="http://pubit.barnesandnoble.com/">Barnes & Noble's Nook</a>, <a href="http://www.apple.com/ipad/built-in-apps/">iBookstore</a>, <a href="http://www.smashwords.com/">Smashwords</a>, etc.) Please <a href="http://bbebooksthailand.com/quote.html">contact us</a> 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 <em>free online tutorials</em> and <em>apps</em> to help you professionally <b>design your eBook</b>. Please visit our <a href="http://bbebooksthailand.com/developers.html">Developers page</a> and let’s work together to improve the overall standards of eBooks. Also, please <a href="http://bbebooksthailand.com">sign up</a> for the mailing list for promotions, design & marketing tips, plus eBook industry news.<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi04obE0JJcHpIMbmWixKtanBSvH-4-ocngNLU0OvcIlZkMTyTEgQyABGjU5OJqGUeSydf0RqDOmA4rqpBEUbcJIEw6jgU4T_h7kZICiXjGe7dXJb2b5u6PKRIGYgAAoksMxKvaooxHPvs/s1600/eBook-Design-Development-Paul-Salvette.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi04obE0JJcHpIMbmWixKtanBSvH-4-ocngNLU0OvcIlZkMTyTEgQyABGjU5OJqGUeSydf0RqDOmA4rqpBEUbcJIEw6jgU4T_h7kZICiXjGe7dXJb2b5u6PKRIGYgAAoksMxKvaooxHPvs/s1600/eBook-Design-Development-Paul-Salvette.jpg" /></a></div><br />
Looking for a <b>complete guide</b> on eBook design and development? Please consider <i>The eBook Design and Development Guide</i>, 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 <a href="http://www.amazon.com/gp/product/B009G2JMRK/ref=as_li_qf_sp_asin_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=B009G2JMRK&linkCode=as2&tag=paulsal-20">Amazon for $6.99 today</a>.<br />
<br />
<a href="http://www.paulsalvette.com/2012/04/using-css-to-style-text-for-ebooks.html">Previous Section: Text Styling</a><br />
<br />
Do you remember that episode of <i>The Simpsons</i> 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 <i>boxes</i>--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 <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;"><p>…</p></span>, <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;"><div>…</div></span>, 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 <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;"><h2></span> 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.<br />
<br />
The CSS box model contains four regions:<br />
<ol><li>Margin - area of empty space outside of the border that surrounds the entire box</li>
<li>Border - rectangle around the box that surrounds the padding and content</li>
<li>Padding - area of empty space between the content and border</li>
<li>Content - the inner area that contains the text or image from the HTML</li>
</ol><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi14Gc-mWmaGldy2OXhoUTKLPTSVOPsYQV5O60Prtayd2gQQrlWPDm923FhQlRgx3rle7KEuNq6Ee80DPBd7BvsLM0FaGSs-jYxLvu1pFUvnlQgxD21Px95s3kWMl6EeVOG-XD8DTt-CbA/s1600/box+model.gif" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="155" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi14Gc-mWmaGldy2OXhoUTKLPTSVOPsYQV5O60Prtayd2gQQrlWPDm923FhQlRgx3rle7KEuNq6Ee80DPBd7BvsLM0FaGSs-jYxLvu1pFUvnlQgxD21Px95s3kWMl6EeVOG-XD8DTt-CbA/s320/box+model.gif" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">CSS Box Model Visualized</td></tr>
</tbody></table><br />
<h2>Margin and Padding Syntax</h2>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 <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">margin</span> and <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">padding</span> properties in your CSS. Like the font properties, it is a good practice to assign margin and padding values in <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">em</span> units of relative measurement; however using absolute measurements in <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">px</span> may be suitable. Here is an example of assigning <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">margin</span> and <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">padding</span> values in CSS:<br />
<blockquote class="tr_bq"><div style="font-family: "Courier New",Courier,monospace;"><span style="color: blue; font-weight: bold;">p</span>.<span style="color: red;">someclass</span> {</div><div style="font-family: "Courier New",Courier,monospace;"><span style="color: #2b547e;">margin-top</span>: 1.5em;</div><div style="font-family: "Courier New",Courier,monospace;"><span style="color: #2b547e;">margin-right</span>: 0;</div><div style="font-family: "Courier New",Courier,monospace;"><span style="color: #2b547e;">margin-bottom</span>: 0;</div><div style="font-family: "Courier New",Courier,monospace;"><span style="color: #2b547e;">margin-left</span>: 1.5em;</div><div style="font-family: "Courier New",Courier,monospace;"><span style="color: #2b547e;">padding-top</span>: 0;</div><div style="font-family: "Courier New",Courier,monospace;"><span style="color: #2b547e;">padding-right</span>: 0.1em;</div><div style="font-family: "Courier New",Courier,monospace;"><span style="color: #2b547e;">padding-bottom</span>: 0;</div><div style="font-family: "Courier New",Courier,monospace;"><span style="color: #2b547e;">margin-left</span>: 0.1em;</div><div style="font-family: "Courier New",Courier,monospace;">}</div></blockquote>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 <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">margin: 1.5em 0 0 1.5em;</span>, and for the padding values the equivalent statement would be <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">padding: 0 0.1em;</span>. When using four values after the <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">margin</span> or <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">padding</span> property, you just need to remember <b>TRBL</b> (i.e. "Top-Right-Bottom-Left"). If you only have two values, such as the padding example above, the first number will be the <i>top</i> and <i>bottom</i> value, while the second number will be <i>left</i> and <i>right </i>value. It is also possible to just use one number such as <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">margin: 1em;</span>, which would assign the 1em margins all around the box.<br />
<br />
<h2>Border and Background</h2><br />
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:<br />
<blockquote class="tr_bq"><div style="font-family: "Courier New",Courier,monospace;"><span style="color: blue; font-weight: bold;">p</span>.<span style="color: red;">someclass</span> {</div><div style="font-family: "Courier New",Courier,monospace;"><span style="color: #2b547e;">border-width</span>: 2px;</div><div style="font-family: "Courier New",Courier,monospace;"><span style="color: #2b547e;">border-style</span>: solid;</div><div style="font-family: "Courier New",Courier,monospace;"><span style="color: #2b547e;">border-color</span>: black;</div><div style="font-family: "Courier New",Courier,monospace;">}</div></blockquote>The shorthand declaration for this would be <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">border: 2px solid black;</span>. We will also explore more on backgrounds in the future, but for now be aware that you can set the background color with the <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">background-color: <i>color value</i>;</span> declaration, where <i>color value</i> 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, <b>but not</b> the margin area.<br />
<br />
<h2>CSS Box Model in Action</h2><br />
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:<br />
<blockquote class="tr_bq"><div style="font-family: "Courier New",Courier,monospace;"><span style="color: blue;"><p</span><span style="color: red;"> class</span>=<span style="color: purple;">"para1"</span><span style="color: blue;">></span>This is paragraph #1 of the box example. It comes before paragraph #2 and has some margin and padding properties assigned to it.<span style="color: blue;"></p></span></div><div style="font-family: "Courier New",Courier,monospace;"><span style="color: blue;"><p</span><span style="color: red;"> class</span>=<span style="color: purple;">"para2"</span><span style="color: blue;">></span>This is paragraph #2 of the box example. It has margins but no padding.<span style="color: blue;"></p></span></div><div style="font-family: "Courier New",Courier,monospace;"><span style="color: blue;"><p</span><span style="color: red;"> class</span>=<span style="color: purple;">"para3"</span><span style="color: blue;">></span>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.<span style="color: blue;"></p></span></div></blockquote>Some example CSS to alter the margins would be as follows:<br />
<blockquote class="tr_bq" style="font-family: "Courier New",Courier,monospace;"><span style="color: blue; font-weight: bold;">p</span>.<span style="color: red;">para1</span> {<br />
<span style="color: #2b547e;">margin</span>: 3em 0 0 3em;<br />
<span style="color: #2b547e;">padding</span>: 0.75em;<br />
<span style="color: #2b547e;">background-color</span>: pink;<br />
<span style="color: #2b547e;">border</span>: 2px solid black;<br />
}<br />
<span style="color: blue; font-weight: bold;">p</span>.<span style="color: red;">para2</span> {<br />
<span style="color: #2b547e;">margin</span>: 1.5em 0;<br />
<span style="color: #2b547e;">padding</span>: 0;<br />
<span style="color: #2b547e;">background-color</span>: cyan;<br />
<span style="color: #2b547e;">border</span>: 2px solid black;<br />
}<br />
<span style="color: blue; font-weight: bold;">p</span>.<span style="color: red;">para3</span> {<br />
<span style="color: #2b547e;">margin</span>: 0;<br />
<span style="color: #2b547e;">padding</span>: 12px 12px 0 6px;<br />
<span style="color: #2b547e;">background-color</span>: orange;<br />
<span style="color: #2b547e;">border</span>: 2px solid black;<br />
}</blockquote><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBYozlY-kcW4hAiJCGCqsZxDsjYkjX-SEl9LIGWbWRZ4RrKvVVkMeCfN7zybrrYeGsI51_m76xGmseMTrmj3-OtGbXdBkg4gnYlA9o2BBSoVBjGPioYmdo2gZxz-aIR5wQD-FyjSDorOw/s1600/boxmodelchrome.gif" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBYozlY-kcW4hAiJCGCqsZxDsjYkjX-SEl9LIGWbWRZ4RrKvVVkMeCfN7zybrrYeGsI51_m76xGmseMTrmj3-OtGbXdBkg4gnYlA9o2BBSoVBjGPioYmdo2gZxz-aIR5wQD-FyjSDorOw/s1600/boxmodelchrome.gif" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Example of Paragraphs with Different Margin/Padding in Chrome</td></tr>
</tbody></table><br />
Can you spot the differences in each of the paragraphs? The first box has a <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">margin-top</span> of <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">3em</span> and a <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">margin-left</span> of <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">3em</span> with some even padding around the content area. The second box has <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">1.5em</span> 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 <a href="http://ebooktest.blogspot.com/2009/04/is-adobe-hindering-ebooks.html">Adobe Digital Editions</a>).<br />
<br />
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:<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgViI5Ar6rcNieVvVuTqc1tQihkL8FsLyM4FyzY-soK4-8zxtY1eRxPesued8X1Kl8EAZyqPPD-AKT4ThNgP_9PKvOa8s0lafYiwuFaBTB5V3DuGgwRW_gVJ8Yz3bv5E0bbwmh1Qr0smj4/s1600/margin+ems+chrome.gif" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="127" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgViI5Ar6rcNieVvVuTqc1tQihkL8FsLyM4FyzY-soK4-8zxtY1eRxPesued8X1Kl8EAZyqPPD-AKT4ThNgP_9PKvOa8s0lafYiwuFaBTB5V3DuGgwRW_gVJ8Yz3bv5E0bbwmh1Qr0smj4/s320/margin+ems+chrome.gif" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Example of Paragraphs in Chrome with Specifics on Sizing</td></tr>
</tbody></table><b>Tip:</b> To <i>center</i> your box, you can make the declaration <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">margin: 0 auto;</span>.<br />
<br />
<h2>CSS Box Model as It Applies to eBooks on the Kindle</h2><br />
You may ask what happens if you get in a situation where the <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">margin-bottom</span> is <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">2em</span> for the first box, and the <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">margin-top</span> is <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">1em</span> 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 <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">3em</span>, will it be the bigger of the two (in this case <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">2em</span>), 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 <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">margin-bottom: 2em;</span> for the first box). This is the case for <b>the Kindle Fire</b>. <br />
<br />
However, for <b>e-ink Kindles and the Kindle for iOS apps</b>, 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 <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">margin-bottom: 2em;</span> on box#1 and a <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">margin-top: 2em;</span> on box #2. Note the discrepancies in rendering:<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMtQMplnRMqlkOr_MMKeZzUyr1935j6F7iCYoqjYGQX-4Pz7UTLC6fZ8snCY40DtXogyikluQDwoDaF8rsmOn_OCIr3vmLGb1XkERzFlVi_g0lqf8Ngd92JsnFXYFG4GbcgvXqf6ATXvk/s1600/kindle+margin+issues.gif" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMtQMplnRMqlkOr_MMKeZzUyr1935j6F7iCYoqjYGQX-4Pz7UTLC6fZ8snCY40DtXogyikluQDwoDaF8rsmOn_OCIr3vmLGb1XkERzFlVi_g0lqf8Ngd92JsnFXYFG4GbcgvXqf6ATXvk/s1600/kindle+margin+issues.gif" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Margins Rendered Differently on the Various Kindles</td></tr>
</tbody></table><br />
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.<br />
<br />
<a href="http://www.paulsalvette.com/2012/04/indents-margins-and-alignment-for.html">Next Section: Adjusting Indents, Alignment, and Margins</a>Paul Salvettehttp://www.blogger.com/profile/11818202201018195312noreply@blogger.com2tag:blogger.com,1999:blog-8917601577161181396.post-6964921354433758352012-04-06T10:08:00.001+07:002012-09-26T22:12:40.379+07:00Using CSS to Style Text for eBooks<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmyqUBZhF7BO4l5WQ2Sb9HQ9nwjVLVdybiJfAf5qH9EHMSmOQd-P1uB824bQUSPDwxmsBcQxJ1OkJywmwhKfs7uew49Sbmydqvb3VTiZz3mu0DqHFeYLbAgXgTkGXmUtN6MV-4HC7ysJs/s1600/BBeBooksLogo_Small.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="53" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmyqUBZhF7BO4l5WQ2Sb9HQ9nwjVLVdybiJfAf5qH9EHMSmOQd-P1uB824bQUSPDwxmsBcQxJ1OkJywmwhKfs7uew49Sbmydqvb3VTiZz3mu0DqHFeYLbAgXgTkGXmUtN6MV-4HC7ysJs/s320/BBeBooksLogo_Small.png" width="320" /></a></div><br />
Thank you for visiting this eBook design tutorial. We now have an eBook design startup—<a href="http://bbebooksthailand.com">BB eBooks</a>—dedicated to helping <em>independent authors</em> and <em>small presses</em> get their eBooks formatted, converted, and ready for sale at all the major online retailers (e.g. <a href="http://kdp.amazon.com">Amazon's Kindle Store</a>, <a href="http://pubit.barnesandnoble.com/">Barnes & Noble's Nook</a>, <a href="http://www.apple.com/ipad/built-in-apps/">iBookstore</a>, <a href="http://www.smashwords.com/">Smashwords</a>, etc.) Please <a href="http://bbebooksthailand.com/quote.html">contact us</a> 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 <em>free online tutorials</em> and <em>apps</em> to help you professionally <b>design your eBook</b>. Please visit our <a href="http://bbebooksthailand.com/developers.html">Developers page</a> and let’s work together to improve the overall standards of eBooks. Also, please <a href="http://bbebooksthailand.com">sign up</a> for the mailing list for promotions, design & marketing tips, plus eBook industry news.<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi04obE0JJcHpIMbmWixKtanBSvH-4-ocngNLU0OvcIlZkMTyTEgQyABGjU5OJqGUeSydf0RqDOmA4rqpBEUbcJIEw6jgU4T_h7kZICiXjGe7dXJb2b5u6PKRIGYgAAoksMxKvaooxHPvs/s1600/eBook-Design-Development-Paul-Salvette.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi04obE0JJcHpIMbmWixKtanBSvH-4-ocngNLU0OvcIlZkMTyTEgQyABGjU5OJqGUeSydf0RqDOmA4rqpBEUbcJIEw6jgU4T_h7kZICiXjGe7dXJb2b5u6PKRIGYgAAoksMxKvaooxHPvs/s1600/eBook-Design-Development-Paul-Salvette.jpg" /></a></div><br />
Looking for a <b>complete guide</b> on eBook design and development? Please consider <i>The eBook Design and Development Guide</i>, 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 <a href="http://www.amazon.com/gp/product/B009G2JMRK/ref=as_li_qf_sp_asin_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=B009G2JMRK&linkCode=as2&tag=paulsal-20">Amazon for $6.99 today</a>.<br />
<br />
<a href="http://www.paulsalvette.com/2012/03/css-selector-tutorial-for-ebooks.html">Previous Post: CSS Selectors</a><br />
<br />
Now that you have knowledge of how to use CSS selectors to apply presentation to specific HTML markup and content, you can make some basic typographical adjustments to your eBook to make it visually pleasing for your readers. Typography dates back to the Classical period when specialists would use punches and chisels to make distinctive inscriptions. Luckily, the digital age offers the ability to utilize typography without a lot of training and hard work.<br />
<br />
<h2>Altering Text into Bold, Italics, Underlined, Strikethrough, and Small Caps</h2><br />
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 <i>Chicago Manual of Style</i>. 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:<br />
<ul><li>Bold: <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">font-weight: bold;</span></li>
<li>Italics: <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">font-style: italic;</span></li>
<li>Underline: <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">text-decoration: underline;</span></li>
<li>Strikethrough: <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">text-decoration: line-through;</span></li>
<li>Small caps: <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">font-variant: small-caps;</span></li>
</ul>All that is required is applying these declarations using CSS selectors. Some example HTML of a passage in our book could be as follows:<br />
<blockquote class="tr_bq"><div style="font-family: "Courier New",Courier,monospace;"><span style="color: blue;"><h2</span><span style="color: red;"> class</span>=<span style="color: purple;">"mysmcaps"</span><span style="color: blue;">></span>Chapter X<span style="color: blue;"></h2></span></div><div style="font-family: "Courier New",Courier,monospace;"><span style="color: blue;"><p></span>This paragraph needs some <span style="color: blue;"><span</span><span style="color: red;"> class</span>=<span style="color: purple;">"i"</span><span style="color: blue;">></span>emphasis<span style="color: blue;"></span></span>, as well as some <span style="color: blue;"><span</span><span style="color: red;"> class</span>=<span style="color: purple;">"b"</span><span style="color: blue;">></span>strong emphasis<span style="color: blue;"></span></span>. Being modest is <span style="color: blue;"><span</span><span style="color: red;"> class</span>=<span style="color: purple;">"strk"</span><span style="color: blue;">></span>best<span style="color: blue;"></span></span> the worst, because I can't <span style="color: blue;"><span</span><span style="color: red;"> class</span>=<span style="color: purple;">"u"</span><span style="color: blue;">></span>underline<span style="color: blue;"></span></span> things.<span style="color: blue;"></p></span></div></blockquote>The corresponding CSS to select the HTML would be as follows<br />
<blockquote class="tr_bq"><div style="font-family: "Courier New",Courier,monospace;"><span style="color: blue; font-weight: bold;">h2</span>.<span style="color: red;">mysmcaps</span> {<span style="color: #2b547e;">font-variant</span>: small-caps;}</div><div style="font-family: "Courier New",Courier,monospace;"><span style="color: blue; font-weight: bold;">span</span>.<span style="color: red;">b</span> {<span style="color: #2b547e;">font-weight</span>: bold;}</div><div style="font-family: "Courier New",Courier,monospace;"><span style="color: blue; font-weight: bold;">span</span>.<span style="color: red;">i</span> {<span style="color: #2b547e;">font-style</span>: italic;}</div><div style="font-family: "Courier New",Courier,monospace;"><span style="color: blue; font-weight: bold;">span</span>.<span style="color: red;">u</span> {<span style="color: #2b547e;">text-decoration</span>: underline;}</div><div style="font-family: "Courier New",Courier,monospace;"><span style="color: blue; font-weight: bold;">span</span>.<span style="color: red;">strk</span> {<span style="color: #2b547e;">text-decoration</span>: line-through;}</div></blockquote><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEju6Sus2neTufKamTA7i4-e3Agv_nAn9OWct5061ysHIDTbmUsBQF6Cr0fV87_-NB7IPyW_OeAVYJzTJtyfGvQ1VgxMnx8v4yhSjeMumgu-HlEw93epVZmAP7vcHDt6DRKdNRAbYTOFdI0/s1600/text+styling+variety.gif" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEju6Sus2neTufKamTA7i4-e3Agv_nAn9OWct5061ysHIDTbmUsBQF6Cr0fV87_-NB7IPyW_OeAVYJzTJtyfGvQ1VgxMnx8v4yhSjeMumgu-HlEw93epVZmAP7vcHDt6DRKdNRAbYTOFdI0/s1600/text+styling+variety.gif" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Styling Some In-Line Text</td></tr>
</tbody></table><br />
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 style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">span</span> element within your HTML markup to hook the CSS with a <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">class</span> attribute. However, you could easily style entire paragraphs or even the entire <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;"><body></span> element as bold, italics, underline, or strikethrough.<br />
<br />
<b>Tip:</b> 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.<br />
<br />
<h2>Leading</h2><br />
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.<br />
<br />
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 <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">line-height:</span><i> value</i><span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">;</span>, where the <i>value</i> 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 <b>default of 120% leading</b>. 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.<br />
<br />
Some sample HTML and CSS where leading of varying amounts is applied is as follows:<br />
<blockquote class="tr_bq"><div style="font-family: "Courier New",Courier,monospace;"><span style="color: blue;"><p</span><span style="color: red;"> class</span>=<span style="color: purple;">"shortleading"</span><span style="color: blue;">></span>This is a paragraph that has too little leading. It is terrible on the eyes and not recommended unless you hate your readers.<span style="color: blue;"></p></span></div><div style="font-family: "Courier New",Courier,monospace;"><span style="color: blue;"><p</span><span style="color: red;"> class</span>=<span style="color: purple;">"goodleading"</span><span style="color: blue;">></span>This is a paragraph that has a nice amount of leading. Notice how it is easy to read.<span style="color: blue;"></p></span></div><div style="font-family: "Courier New",Courier,monospace;"><span style="color: blue;"><p</span><span style="color: red;"> class</span>=<span style="color: purple;">"bigleading"</span><span style="color: blue;">></span>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.<span style="color: blue;"></p></span></div></blockquote>The CSS:<br />
<blockquote class="tr_bq"><div style="font-family: "Courier New",Courier,monospace;"><span style="color: blue; font-weight: bold;">p</span>.<span style="color: red;">shortleading</span> {<span style="color: #2b547e;">line-height</span>: 70%;}</div><div style="font-family: "Courier New",Courier,monospace;"><span style="color: blue; font-weight: bold;">p</span>.<span style="color: red;">goodleading</span> {<span style="color: #2b547e;">line-height</span>: 120%;}</div><div style="font-family: "Courier New",Courier,monospace;"><span style="color: blue; font-weight: bold;">p</span>.<span style="color: red;">bigleading</span> {<span style="color: #2b547e;">line-height</span>: 200%;}</div></blockquote><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXl9hYLObpDZO73BkuKqUCZCGI0UUNt5jyYOYNOXEVD-1q7-Kf8foQAD3XUYhTlJLRwkt5OOIWoIXGm7ir1_PHYqa39K1zHlxJFsyB3tEqW74bx23JE0-S6xmcthM9ra4CCoboh2CqOrc/s1600/leading.gif" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXl9hYLObpDZO73BkuKqUCZCGI0UUNt5jyYOYNOXEVD-1q7-Kf8foQAD3XUYhTlJLRwkt5OOIWoIXGm7ir1_PHYqa39K1zHlxJFsyB3tEqW74bx23JE0-S6xmcthM9ra4CCoboh2CqOrc/s1600/leading.gif" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Examples of Paragraphs with Various Leading in Chrome</td></tr>
</tbody></table><br />
Leading adjustment with the <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">line-height</span> property <b>does not affect</b> 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%.<br />
<br />
<h2>Introducing em</h2><br />
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 <i>Magna Carta</i>. Why should you care? Frequently, web developers and eBook developers use measurements (e.g. <b>pixels or "px"</b>) to define font sizes, indents, and the spacing of margins. In the digital age, the <b>"em"</b> unit has evolved into what is called a <i>relative measurement</i>, 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.<br />
<br />
The Kindle and Kindle Fire default font size is <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">16px</span>. Therefore, using a font-size of <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">2em</span> is equivalent to <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">32px</span> (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 <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">1.0em</span>. 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.<br />
<br />
<h2>Adjusting Font-Size</h2>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).<br />
<br />
To change the size of the text, you simply use the CSS property <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">font-size: <i>value</i>;</span>, where <i>value</i> is in a unit of ems. An example of the HTML would be as follows:<br />
<blockquote class="tr_bq"><div style="font-family: "Courier New",Courier,monospace;"><span style="color: blue;"><h2</span><span style="color: red;"> class</span>=<span style="color: purple;">"chapheading"</span><span style="color: blue;">></span>Chapter 355<span style="color: blue;"></h2></span></div><div style="font-family: "Courier New",Courier,monospace;"><span style="color: blue;"><p</span><span style="color: red;"> class</span>=<span style="color: purple;">"content"</span><span style="color: blue;">></span>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.<span style="color: blue;"></p></span></div><div style="font-family: "Courier New",Courier,monospace;"><span style="color: blue;"><h3</span><span style="color: red;"> class</span>=<span style="color: purple;">"appendixheading"</span><span style="color: blue;">></span>Footnotes<span style="color: blue;"></h3></span></div><div style="font-family: "Courier New",Courier,monospace;"><span style="color: blue;"><p</span><span style="color: red;"> class</span>=<span style="color: purple;">"footnote"</span><span style="color: blue;">></span>1May be adjusted by reader<span style="color: blue;"></p></span></div></blockquote>And the CSS:<br />
<blockquote class="tr_bq"><div style="font-family: "Courier New",Courier,monospace;"><span style="color: blue; font-weight: bold;">h2</span>.<span style="color: red;">chapheading</span> {<span style="color: #2b547e;">font-size</span>: 1.5em;}</div><div style="font-family: "Courier New",Courier,monospace;"><span style="color: blue; font-weight: bold;">h3</span>.<span style="color: red;">appendixheading</span> {<span style="color: #2b547e;">font-size</span>: 1.25em;}</div><div style="font-family: "Courier New",Courier,monospace;"><span style="color: blue; font-weight: bold;">p</span>.<span style="color: red;">content</span> {<span style="color: #2b547e;">font-size</span>: 1.0em;}</div><div style="font-family: "Courier New",Courier,monospace;"><span style="color: blue; font-weight: bold;">p</span>.<span style="color: red;">footnote</span> {<span style="color: #2b547e;">font-size</span>: 0.8em;}</div></blockquote><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcyhsJXBrVFJFJR_6yS7oOWWl6IxR9qAQxJ4uj-jWUMt0WlSbg8hr-iVz6rqI_ifdIPwu8Ek8duR6XKRba8mIRo0Zo5jDEHLWm37QfkgM9R4-DlC79dDBszElIU_uZDqGmOB5HaM1BnNc/s1600/font+sizing.gif" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcyhsJXBrVFJFJR_6yS7oOWWl6IxR9qAQxJ4uj-jWUMt0WlSbg8hr-iVz6rqI_ifdIPwu8Ek8duR6XKRba8mIRo0Zo5jDEHLWm37QfkgM9R4-DlC79dDBszElIU_uZDqGmOB5HaM1BnNc/s1600/font+sizing.gif" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">eBook of Varying Font Sizes</td></tr>
</tbody></table><br />
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 <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">vertical-align: super;</span>. You can also use this property to declare any other text that should be superscripted.<br />
<br />
Some example HTML and CSS would be as follows:<br />
<blockquote class="tr_bq"><div style="font-family: "Courier New",Courier,monospace;"><span style="color: blue;"><p</span><span style="color: red;"> class</span>=<span style="color: purple;">"content"</span><span style="color: blue;">></span>This is normal content typically seen on the Kindle. It has a 16px font at default settings <span style="color: blue;"><span</span><span style="color: red;"> class</span>=<span style="color: purple;">"footnoteindex"</span><span style="color: blue;">></span>1<span style="color: blue;"></span></span>. That is my 1<span style="color: blue;"><span</span><span style="color: red;"> class</span>=<span style="color: purple;">"footnoteindex"</span><span style="color: blue;">></span>st<span style="color: blue;"></span></span> footnote.<span style="color: blue;"></p></span></div></blockquote>The CSS:<br />
<blockquote class="tr_bq" style="font-family: "Courier New",Courier,monospace;"><span style="color: blue; font-weight: bold;">p</span>.<span style="color: red;">content</span> {<span style="color: #2b547e;">font-size</span>: 1.0em;}<br />
<span style="color: blue; font-weight: bold;">span</span>.<span style="color: red;">footnoteindex</span> {<span style="color: #2b547e;">font-size</span>: 0.6em; <span style="color: #2b547e;">vertical-align</span>: super;}</blockquote><br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpPNlsddPBz6jIWUrLsHh0WgbNulup88HhmprBKgskCQA6fLvcwlkL84PFJkCdrhguWEtx9ka7FCkwNB8NfFfN4Dv9QNY-AlIorDaBkaaWhhgaU9EHoq3MOpZpuMc-1kum9nTR8J-GGSs/s1600/superscript.gif" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpPNlsddPBz6jIWUrLsHh0WgbNulup88HhmprBKgskCQA6fLvcwlkL84PFJkCdrhguWEtx9ka7FCkwNB8NfFfN4Dv9QNY-AlIorDaBkaaWhhgaU9EHoq3MOpZpuMc-1kum9nTR8J-GGSs/s1600/superscript.gif" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Font Sizes with Superscript Support</td></tr>
</tbody></table><br />
<b>Important Note:</b> 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.<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7fCfW0o00dkTF_ImSDCg7iekhSzEqc72ugNAUSXmHnbcIXk4m8tJnGYui7c3haYUcWOJvwGbCP0tbJ9pzNkpvs_UbZIJPLBfz2Sk0OcVNrNE22eGfuVSgr9Tztxem9cNNT4PHDYflvmg/s1600/kindle+bug+size.gif" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="116" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7fCfW0o00dkTF_ImSDCg7iekhSzEqc72ugNAUSXmHnbcIXk4m8tJnGYui7c3haYUcWOJvwGbCP0tbJ9pzNkpvs_UbZIJPLBfz2Sk0OcVNrNE22eGfuVSgr9Tztxem9cNNT4PHDYflvmg/s320/kindle+bug+size.gif" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Bug on e-ink Kindles with Font Sizing</td></tr>
</tbody></table><h2>Tracking</h2><br />
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 <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">letter-spacing:</span><i> value</i><span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">;</span>, 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.<br />
<br />
Some sample HTML and CSS where tracking of varying amounts is applied is as follows:<br />
<blockquote class="tr_bq"><div style="font-family: "Courier New",Courier,monospace;"><span style="color: blue;"><p</span><span style="color: red;"> class</span>=<span style="color: purple;">"smalltracking"</span><span style="color: blue;">></span>This is a paragraph with some squished tracking.<span style="color: blue;"></p></span></div><div style="font-family: "Courier New",Courier,monospace;"><span style="color: blue;"><p</span><span style="color: red;"> class</span>=<span style="color: purple;">"widetracking"</span><span style="color: blue;">></span>This is a paragraph with some wide tracking you could drive a truck through.<span style="color: blue;"></p></span></div><div style="font-family: "Courier New",Courier,monospace;"><span style="color: blue;"><p></span>This is a paragraph with default tracking, which is generally fine.<span style="color: blue;"></p></span></div></blockquote>The CSS:<br />
<blockquote class="tr_bq" style="font-family: "Courier New",Courier,monospace;"><span style="color: blue; font-weight: bold;">p</span>.<span style="color: red;">smalltracking</span> {<span style="color: #2b547e;">letter-spacing</span>: -0.1em;}<br />
<span style="color: blue; font-weight: bold;">p</span>.<span style="color: red;">widetracking</span> {<span style="color: #2b547e;">letter-spacing</span>: 0.1em;}<br />
<span style="color: blue; font-weight: bold;">p</span> {<span style="color: #2b547e;">letter-spacing</span>: 0em;}</blockquote><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuIGsncm6uyv-ZL_gnQ6RUckZ3qlp0xT16sXY6rTtAdKoEZBRE9MedICz5uTSGBZMH-uaekpwtJspm0nZjC73JIIMldto2aBajvSgMQgyVnGmA5zgcFwPPvAkDjze4fHRTLQAdi9cftMI/s1600/tracking.gif" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuIGsncm6uyv-ZL_gnQ6RUckZ3qlp0xT16sXY6rTtAdKoEZBRE9MedICz5uTSGBZMH-uaekpwtJspm0nZjC73JIIMldto2aBajvSgMQgyVnGmA5zgcFwPPvAkDjze4fHRTLQAdi9cftMI/s1600/tracking.gif" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Varying Levels of Tracking</td></tr>
</tbody></table><br />
<br />
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.<br />
<br />
<h2>Changing Colors</h2><br />
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.<br />
<br />
To add color to your CSS, you use the <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">color: <i>value</i>;</span> declaration. The value can either be one of the <a href="http://www.w3schools.com/cssref/css_colornames.asp">143 predefined color names</a> (e.g. navy, pink, black) or a <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">#</span> sign preceding a six-character hexadecimal code, which allows for over 16 million different colors (e.g. <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">#000000</span> for white). These values can be easily generated on a <a href="http://www.2createawebsite.com/build/hex-colors.html">number of sites online</a> or using open source software.<br />
<br />
Some sample HTML and CSS with different colors is as follows:<br />
<blockquote class="tr_bq"><div style="font-family: "Courier New",Courier,monospace;"><span style="color: blue;"><p</span><span style="color: red;"> class</span>=<span style="color: purple;">"content"</span><span style="color: blue;">></span>This is the final sentence in your textbook.<span style="color: blue;"></p></span></div><div style="font-family: "Courier New",Courier,monospace;"><span style="color: blue;"><h2</span><span style="color: red;"> class</span>=<span style="color: purple;">"redheading"</span><span style="color: blue;">></span>Exercises for Your Teams<span style="color: blue;"></h2></span></div><div style="font-family: "Courier New",Courier,monospace;"><span style="color: blue;"><ol></span></div><div style="font-family: "Courier New",Courier,monospace;"><span style="color: blue;"><li></span>The <span style="color: blue;"><span</span><span style="color: red;"> id</span>=<span style="color: purple;">"blueteam"</span><span style="color: blue;">></span>Blue team<span style="color: blue;"></span></span> should focus on…<span style="color: blue;"></li></span></div><div style="font-family: "Courier New",Courier,monospace;"><span style="color: blue;"><li></span>The <span style="color: blue;"><span</span><span style="color: red;"> id</span>=<span style="color: purple;">"purpleteam"</span><span style="color: blue;">></span>Purple team<span style="color: blue;"></span></span> should focus on…<span style="color: blue;"></li></span></div><div style="font-family: "Courier New",Courier,monospace;"><span style="color: blue;"></ol></span></div></blockquote>The CSS:<br />
<blockquote class="tr_bq" style="font-family: "Courier New",Courier,monospace;"><span style="color: blue; font-weight: bold;">p</span>.<span style="color: red;">content</span> {<span style="color: #2b547e;">color</span>: black;}<br />
<span style="color: blue; font-weight: bold;">h2</span>.<span style="color: red;">redheading</span> {<span style="color: #2b547e;">color</span>: red;}<br />
<span style="color: blue; font-weight: bold;">span</span>#<span style="color: #5c5858;">blueteam</span> {<span style="color: #2b547e;">color</span>: #237DE4;}<br />
<span style="color: blue; font-weight: bold;">span</span>#<span style="color: #5c5858;">purpleteam</span> {<span style="color: #2b547e;">color</span>: #9123E4;}</blockquote><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhp76o-czwtgcetOjoSbRMmM_mk0ml1rawQzf0cVGwFCShmHmODQ-CmineGLM5acRYVVjQGvt39f_JA9Sa82jxZKqU67sYSjbtC-7YLPirRa_m4ynRtdJW5Dn9TKn9JC1NvvgW5Hdayxx4/s1600/colors.gif" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhp76o-czwtgcetOjoSbRMmM_mk0ml1rawQzf0cVGwFCShmHmODQ-CmineGLM5acRYVVjQGvt39f_JA9Sa82jxZKqU67sYSjbtC-7YLPirRa_m4ynRtdJW5Dn9TKn9JC1NvvgW5Hdayxx4/s1600/colors.gif" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Experimenting with Text of Different Colors</td></tr>
</tbody></table><a href="http://www.paulsalvette.com/2012/04/understanding-css-box-model-ebook.html">Next Post: Understanding the CSS Box Model</a>Paul Salvettehttp://www.blogger.com/profile/11818202201018195312noreply@blogger.com7tag:blogger.com,1999:blog-8917601577161181396.post-55791817896213813622012-03-26T22:40:00.001+07:002012-09-26T22:12:50.181+07:00CSS Selector Tutorial for eBooks<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmyqUBZhF7BO4l5WQ2Sb9HQ9nwjVLVdybiJfAf5qH9EHMSmOQd-P1uB824bQUSPDwxmsBcQxJ1OkJywmwhKfs7uew49Sbmydqvb3VTiZz3mu0DqHFeYLbAgXgTkGXmUtN6MV-4HC7ysJs/s1600/BBeBooksLogo_Small.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="53" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmyqUBZhF7BO4l5WQ2Sb9HQ9nwjVLVdybiJfAf5qH9EHMSmOQd-P1uB824bQUSPDwxmsBcQxJ1OkJywmwhKfs7uew49Sbmydqvb3VTiZz3mu0DqHFeYLbAgXgTkGXmUtN6MV-4HC7ysJs/s320/BBeBooksLogo_Small.png" width="320" /></a></div><br />
Thank you for visiting this eBook design tutorial. We now have an eBook design startup—<a href="http://bbebooksthailand.com">BB eBooks</a>—dedicated to helping <em>independent authors</em> and <em>small presses</em> get their eBooks formatted, converted, and ready for sale at all the major online retailers (e.g. <a href="http://kdp.amazon.com">Amazon's Kindle Store</a>, <a href="http://pubit.barnesandnoble.com/">Barnes & Noble's Nook</a>, <a href="http://www.apple.com/ipad/built-in-apps/">iBookstore</a>, <a href="http://www.smashwords.com/">Smashwords</a>, etc.) Please <a href="http://bbebooksthailand.com/quote.html">contact us</a> 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 <em>free online tutorials</em> and <em>apps</em> to help you professionally <b>design your eBook</b>. Please visit our <a href="http://bbebooksthailand.com/developers.html">Developers page</a> and let’s work together to improve the overall standards of eBooks. Also, please <a href="http://bbebooksthailand.com">sign up</a> for the mailing list for promotions, design & marketing tips, plus eBook industry news.<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi04obE0JJcHpIMbmWixKtanBSvH-4-ocngNLU0OvcIlZkMTyTEgQyABGjU5OJqGUeSydf0RqDOmA4rqpBEUbcJIEw6jgU4T_h7kZICiXjGe7dXJb2b5u6PKRIGYgAAoksMxKvaooxHPvs/s1600/eBook-Design-Development-Paul-Salvette.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi04obE0JJcHpIMbmWixKtanBSvH-4-ocngNLU0OvcIlZkMTyTEgQyABGjU5OJqGUeSydf0RqDOmA4rqpBEUbcJIEw6jgU4T_h7kZICiXjGe7dXJb2b5u6PKRIGYgAAoksMxKvaooxHPvs/s1600/eBook-Design-Development-Paul-Salvette.jpg" /></a></div><br />
Looking for a <b>complete guide</b> on eBook design and development? Please consider <i>The eBook Design and Development Guide</i>, 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 <a href="http://www.amazon.com/gp/product/B009G2JMRK/ref=as_li_qf_sp_asin_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=B009G2JMRK&linkCode=as2&tag=paulsal-20">Amazon for $6.99 today</a>.<br />
<br />
<a href="http://www.paulsalvette.com/2012/03/introduction-to-css-for-kindle-fire-and.html">Previous Post: Introduction to CSS</a><br />
<br />
Cascading Style Sheets allow the eBook designer to assign presentational rules to content within an HTML file. It is possible to assign rules that make the entire text of the eBook bold, italicized, or a different color, but this isn't very useful. You are probably interested in defining presentation that affects only certain paragraphs or words within your eBook. CSS assigns specific declarations based on a system of <b>selectors</b> that explicitly limits the presentation to certain elements within your HTML.<br />
<br />
CSS Selectors come in three basic flavors:<br />
<ol><li>Selection of types of HTML elements </li>
<li>Selection of HTML that has been assigned a class with the <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">class</span> attribute</li>
<li>Selection of HTML that has been assigned a unique identifier with the <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">id</span> attribute</li>
</ol>The CSS syntax can be broken down into two parts: the selector(s) and the declaration(s). Furthermore, each declaration is divided into a property, which defines what type of presentation the CSS will be altering, and a value, which defines how that type of presentation will behave. As an example, say we wanted to change any content within <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;"><p class="myclass"></p></span> to be bold and blue. The CSS would appear as follows:<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIJpAXa4bWYmHZTPE185k_EELlZlU0LyfAuwQGDzak8MZdlp4p_10iVZSVqRFIMgvSdUZG546Mol1F4u5ZZN92ut0il_4XYBLyd2lUw2B6QHBDLnFdY0YokKGHgM9SaGolYoHf5TcVl_U/s1600/css+syntax.gif" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIJpAXa4bWYmHZTPE185k_EELlZlU0LyfAuwQGDzak8MZdlp4p_10iVZSVqRFIMgvSdUZG546Mol1F4u5ZZN92ut0il_4XYBLyd2lUw2B6QHBDLnFdY0YokKGHgM9SaGolYoHf5TcVl_U/s1600/css+syntax.gif" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Basic CSS Syntax</td></tr>
</tbody></table><br />
<b>Important Note:</b> Declarations always have a semi-colon (<span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">;</span>) at the end of them. The curly braces (<span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">{</span> and <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">}</span>) enclose one or more declarations immediately following a selector. You can have all of your CSS declarations on one line, but placing them on multiple lines makes the CSS more human-readable.<br />
<br />
The dot (<span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">.</span>) separates the <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">p</span> and the <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">myclass</span> to form a selector statement looking for any paragraph element in your HTML with the <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">myclass</span> attribute. The HTML markup and content that the CSS would apply presentation to is as follows:<br />
<blockquote class="tr_bq" style="font-family: "Courier New",Courier,monospace;"><span style="color: blue;"><p</span><span style="color: red;"> class</span>=<span style="color: purple;">"myclass"</span><span style="color: blue;">></span>I'm a blue and bold paragraph<span style="color: blue;"></p></span><br />
<span style="color: blue;"><p</span><span style="color: red;"> class</span>=<span style="color: purple;">"myclass"</span><span style="color: blue;">></span>I'm another blue and bold paragraph<span style="color: blue;"></p></span><br />
<span style="color: blue;"><p></span>I'm just a regular paragraph<span style="color: blue;"></p></span></blockquote><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrDGEed_axF4ML3-JR0_Qhr4vqeFdeQDQKZGw2ocKndG9pJafb-DVwhfxCeabWWPL8MH-eaZydgmkhz_AqG3bKEZ356C8VaILsJWYZPSRehCkebhpiXZTxOMDTzvztBqha8XGCCSPMe14/s1600/example+of+css+selectors.gif" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrDGEed_axF4ML3-JR0_Qhr4vqeFdeQDQKZGw2ocKndG9pJafb-DVwhfxCeabWWPL8MH-eaZydgmkhz_AqG3bKEZ356C8VaILsJWYZPSRehCkebhpiXZTxOMDTzvztBqha8XGCCSPMe14/s1600/example+of+css+selectors.gif" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Example of CSS Selectors Being Rendered in the Kindle Fire</td></tr>
</tbody></table><br />
Using classes as your method of selecting HTML is useful, because these classes can be repeated more than once throughout multiple HTML files. Making changes to the presentation of all of the elements with a class attribute requires you to only alter the CSS in one place (i.e. the stylesheet).<br />
<br />
In some circumstances, you may want to alter the presentation of just one element. In this case you would use a unique identifier with an <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">id</span> attribute. Please recall that every identifier must have a unique value within any given HTML file to avoid errors. The CSS selector syntax for unique identifiers uses a <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">#</span> symbol. An example of the CSS to make a unique paragraph italicized is as follows:<br />
<blockquote class="tr_bq"><div style="font-family: "Courier New",Courier,monospace;"><span style="color: blue; font-weight: bold;">p</span>.<span style="color: red;">myclass</span></div><div style="font-family: "Courier New",Courier,monospace;">{</div><div style="font-family: "Courier New",Courier,monospace;"><span style="color: #2b547e;">font-weight</span>: bold;</div><div style="font-family: "Courier New",Courier,monospace;"><span style="color: #2b547e;">color</span>: blue;</div><div style="font-family: "Courier New",Courier,monospace;">}</div><div style="font-family: "Courier New",Courier,monospace;"><span style="color: blue; font-weight: bold;">p</span>#<span style="color: #5c5858;">unique</span></div><div style="font-family: "Courier New",Courier,monospace;">{</div><div style="font-family: "Courier New",Courier,monospace;"><span style="color: #2b547e;">font-style</span>: italic;</div><div style="font-family: "Courier New",Courier,monospace;">}</div></blockquote>The corresponding HTML is as follows:<br />
<blockquote class="tr_bq"><div style="font-family: "Courier New",Courier,monospace;"><span style="color: blue;"><p</span><span style="color: red;"> class</span>=<span style="color: purple;">"myclass"</span><span style="color: blue;">></span>I'm a blue and bold paragraph<span style="color: blue;"></p></span></div><div style="font-family: "Courier New",Courier,monospace;"><span style="color: blue;"><p</span><span style="color: red;"> class</span>=<span style="color: purple;">"myclass"</span><span style="color: blue;">></span>I'm another blue and bold paragraph<span style="color: blue;"></p></span></div><div style="font-family: "Courier New",Courier,monospace;"><span style="color: blue;"><p></span>I'm just a regular paragraph<span style="color: blue;"></p></span></div><div style="font-family: "Courier New",Courier,monospace;"><span style="color: blue;"><p</span><span style="color: red;"> id</span>=<span style="color: purple;">"unique"</span><span style="color: blue;">></span>I'm a very special paragraph. There's only one of me.<span style="color: blue;"></p></span></div></blockquote><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpBsILUf8d3IKGsLmdV62mggtOwyWwu2QRMtKguFjX5ceWbUvaY95FtQ7d2eqySgFk5oe94x7AkXq1iZcURXf9REPygrWGQMLsWCDjtPZJryqNSARha-GY5TRgvuOc21Dr5RHXv7Si5aM/s1600/css+selector+id+class.gif" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpBsILUf8d3IKGsLmdV62mggtOwyWwu2QRMtKguFjX5ceWbUvaY95FtQ7d2eqySgFk5oe94x7AkXq1iZcURXf9REPygrWGQMLsWCDjtPZJryqNSARha-GY5TRgvuOc21Dr5RHXv7Si5aM/s1600/css+selector+id+class.gif" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Example of CSS Selectors Being Rendered in the Kindle Fire</td></tr>
</tbody></table><b>Important Note:</b> For the CSS selector syntax for classes (<span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">.</span>) and for unique identifiers (#), make sure there are <i>no spaces</i> between the element selector and the name of the class or identifier.<br />
<br />
Until now CSS selectors have only been applied to paragraph elements. However, CSS can be applied to any valid HTML markup. It is also possible to select the elements that are nested within another element. For example, you have the following HTML markup and content:<br />
<blockquote class="tr_bq" style="font-family: "Courier New",Courier,monospace;"><span style="color: blue;"><div</span><span style="color: red;"> class</span>=<span style="color: purple;">"someboldstuff"</span><span style="color: blue;">></span><br />
<span style="color: blue;"><p></span>I'm a child of the "someboldstuff" div<span style="color: blue;"></p></span><br />
<span style="color: blue;"><p></span>I'm the second child, but I'm not ignored by my div parent<span style="color: blue;"></p></span><br />
<span style="color: blue;"><p></span>I'm the last and cutest child<span style="color: blue;"></p></span><br />
<span style="color: blue;"></div></span><br />
<span style="color: blue;"><p></span>I have no parent so to speak<span style="color: blue;"></p></span></blockquote>There are three paragraph elements nested with the div element. The paragraph elements are known as the <i>children</i> and the div element is the <i>parent</i>. To select the paragraph elements that are children of the div element with the class attribute of <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">someboldstuff</span>, the CSS would be as follows:<br />
<blockquote class="tr_bq"><div style="font-family: "Courier New",Courier,monospace;"><span style="color: blue; font-weight: bold;">div</span>.<span style="color: red;">someboldstuff</span> <span style="color: blue; font-weight: bold;">p</span></div><div style="font-family: "Courier New",Courier,monospace;">{<span style="color: #2b547e;">font-weight</span>: bold;}</div></blockquote><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBcYrMq91YiU5fADxn7myG5iSMEQKFy5HIEPLjeGPkAIlp337ywrzMhpf-NiVQz2phcRLXZueReGbBEwbHK2lO7uSBPuwJvwkJNyH6A7aUahSDirG8HC3ekhLckg9NteH-xdp8RHpWHBQ/s1600/parents+css.gif" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBcYrMq91YiU5fADxn7myG5iSMEQKFy5HIEPLjeGPkAIlp337ywrzMhpf-NiVQz2phcRLXZueReGbBEwbHK2lO7uSBPuwJvwkJNyH6A7aUahSDirG8HC3ekhLckg9NteH-xdp8RHpWHBQ/s1600/parents+css.gif" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">CSS Selecting Descendants</td></tr>
</tbody></table><b><br />
</b><br />
<b>Important Note:</b> Ensure there is a space between the div and p selectors to instruct the CSS that it should select the children.<br />
<br />
CSS and HTML are useful for eBooks when you have sections that include multiple paragraphs of passages that need to be indented differently, lengthy citations from another source, and other blocks of text that need to be styled differently from the regular eBook content.<br />
<br />
If you wanted to apply a CSS declaration to more than one selector, that is possible by using a comma (<span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">,</span>) between two or more selectors. An example of the HTML is as follows:<br />
<blockquote class="tr_bq" style="font-family: "Courier New",Courier,monospace;"><span style="color: blue;"><div</span><span style="color: red;"> class</span>=<span style="color: purple;">"someboldstuff"</span><span style="color: blue;">></span><br />
<span style="color: blue;"><p></span>I'm a child of the "someboldstuff" div<span style="color: blue;"></p></span><br />
<span style="color: blue;"><p></span>I'm the second child, but I'm not ignored by my div parent<span style="color: blue;"></p></span><br />
<span style="color: blue;"><p></span>I'm the last and cutest child<span style="color: blue;"></p></span><br />
<span style="color: blue;"></div></span><br />
<span style="color: blue;"><p></span>I have one bold <span style="color: blue;"><span</span><span style="color: red;"> class</span>=<span style="color: purple;">"someboldstuff"</span><span style="color: blue;">></span>word<span style="color: blue;"></span></span> in my paragraph.<span style="color: blue;"></p></span></blockquote>The CSS:<br />
<blockquote class="tr_bq"><div style="font-family: "Courier New",Courier,monospace;"><span style="color: blue; font-weight: bold;">div</span>.<span style="color: red;">someboldstuff</span> <span style="color: blue; font-weight: bold;">p</span>, <span style="color: blue; font-weight: bold;">span</span>.<span style="color: red;">someboldstuff</span></div><div style="font-family: "Courier New",Courier,monospace;">{<span style="color: #2b547e;">font-weight</span>: bold;}</div></blockquote><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv0KMyyiKUAJHcIG-heH4TE5hYOD1dFRTk8tWOwIxvX3Bpab6u7ApGETawEkn4r2aBBn8aWbZnIOQsNk3p6PrXv7pFeqjX9Wq-nKCzIgjjPiVTP2UIUY_399b7qmHh6jjdlrEkCmUSFPo/s1600/parents+css.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv0KMyyiKUAJHcIG-heH4TE5hYOD1dFRTk8tWOwIxvX3Bpab6u7ApGETawEkn4r2aBBn8aWbZnIOQsNk3p6PrXv7pFeqjX9Wq-nKCzIgjjPiVTP2UIUY_399b7qmHh6jjdlrEkCmUSFPo/s1600/parents+css.gif" /></a></div><br />
You need to exercise some caution when utilizing the CSS selector system. Occasionally you will run into problems when declarations are in conflict with one another for elements that are selected in multiple parts of the CSS file. As an example, say you had the following HTML:<br />
<blockquote class="tr_bq"><div style="font-family: "Courier New",Courier,monospace;"><span style="color: blue;"><p></span>I'm just a regular paragraph. The CSS made us bold<span style="color: blue;"></p></span></div><div style="font-family: "Courier New",Courier,monospace;"><span style="color: blue;"><div</span><span style="color: red;"> class</span>=<span style="color: purple;">"different"</span><span style="color: blue;">></span></div><div style="font-family: "Courier New",Courier,monospace;"><span style="color: blue;"><p></span>I'm a different paragraph where the CSS made us normal.<span style="color: blue;"></p></span></div><div style="font-family: "Courier New",Courier,monospace;"><span style="color: blue;"><p</span><span style="color: red;"> class</span>=<span style="color: purple;">"verydifferent"</span><span style="color: blue;">></span>I'm blue.<span style="color: blue;"></p></span></div><div style="font-family: "Courier New",Courier,monospace;"><span style="color: blue;"><p</span><span style="color: red;"> class</span>=<span style="color: purple;">"verydifferent"</span><span style="color: red;"> id</span>=<span style="color: purple;">"unique"</span><span style="color: blue;">></span>I'm a very unique case, even though a bunch of other selectors are grabbing me.<span style="color: blue;"></p></span></div><div style="font-family: "Courier New",Courier,monospace;"><span style="color: blue;"></div></span></div></blockquote>And the CSS:<br />
<blockquote class="tr_bq"><div style="font-family: "Courier New",Courier,monospace;"><span style="color: blue; font-weight: bold;">p</span></div><div style="font-family: "Courier New",Courier,monospace;">{<span style="color: #2b547e;">font-weight</span>: bold; <span style="color: #2b547e;">color</span>: black;}</div><div style="font-family: "Courier New",Courier,monospace;"><span style="color: blue; font-weight: bold;">div</span>.<span style="color: red;">different</span> <span style="color: blue; font-weight: bold;">p</span></div><div style="font-family: "Courier New",Courier,monospace;">{<span style="color: #2b547e;">font-weight</span>: normal;}</div><div style="font-family: "Courier New",Courier,monospace;"><span style="color: blue; font-weight: bold;">p</span>.<span style="color: red;">verydifferent</span></div><div style="font-family: "Courier New",Courier,monospace;">{<span style="color: #2b547e;">color</span>: blue;}</div><div style="font-family: "Courier New",Courier,monospace;">#<span style="color: #5c5858;">unique</span></div><div style="font-family: "Courier New",Courier,monospace;">{<span style="color: #2b547e;">font-weight</span>: normal; <span style="color: #2b547e;">color</span>: red;}</div></blockquote><br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgM1BQFtNa8VLdHSnX0GYK-z-TkSmyrvRBl2qOwNthHIzji8pIubx_YvQ-_ReGdHsUyLL1UO0_D4Cvu8ZRDnx5_QeIgUUOqb0nhpEPIbQTjn229Tdho3vszh3lrQsCInquVKYsK475MypM/s1600/specificity.gif" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgM1BQFtNa8VLdHSnX0GYK-z-TkSmyrvRBl2qOwNthHIzji8pIubx_YvQ-_ReGdHsUyLL1UO0_D4Cvu8ZRDnx5_QeIgUUOqb0nhpEPIbQTjn229Tdho3vszh3lrQsCInquVKYsK475MypM/s1600/specificity.gif" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">CSS Specificity in Action</td></tr>
</tbody></table>This is rather complex, so let's try to get our arms around it. You may think that all paragraphs should be bold because of the first line in the CSS. However, when CSS encounters declarations that are in conflict with each other, there is a specificity hierarchy whereby the CSS presentation will be applied from the selector most specific. This can be confusing, but the specificity hierarchy is basically as follows:<br />
<ol><li>Selectors that select with the <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">id</span> attribute (most specific)</li>
<li>Selectors that select with the <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">class</span> attribute</li>
<li>Selectors that select by general elements (least specific)</li>
</ol>Therefore the <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">font-weight: normal;</span> declaration in the id selector takes precedence over the <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">font-weight: bold;</span> declaration for all paragraph elements. As in all areas of eBook development, trial and error with careful attention to detail is the best method to isolate and correct any anomalies in your CSS presentation.<br />
<br />
<a href="http://www.paulsalvette.com/2012/04/using-css-to-style-text-for-ebooks.html">Next Post: Using CSS to Style Text in eBooks</a>Paul Salvettehttp://www.blogger.com/profile/11818202201018195312noreply@blogger.com1tag:blogger.com,1999:blog-8917601577161181396.post-84464207661113574812012-03-16T16:07:00.001+07:002012-09-26T22:13:00.108+07:00Introduction to CSS for the Kindle Fire and Applying a Stylesheet<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmyqUBZhF7BO4l5WQ2Sb9HQ9nwjVLVdybiJfAf5qH9EHMSmOQd-P1uB824bQUSPDwxmsBcQxJ1OkJywmwhKfs7uew49Sbmydqvb3VTiZz3mu0DqHFeYLbAgXgTkGXmUtN6MV-4HC7ysJs/s1600/BBeBooksLogo_Small.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="53" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmyqUBZhF7BO4l5WQ2Sb9HQ9nwjVLVdybiJfAf5qH9EHMSmOQd-P1uB824bQUSPDwxmsBcQxJ1OkJywmwhKfs7uew49Sbmydqvb3VTiZz3mu0DqHFeYLbAgXgTkGXmUtN6MV-4HC7ysJs/s320/BBeBooksLogo_Small.png" width="320" /></a></div><br />
Thank you for visiting this eBook design tutorial. We now have an eBook design startup—<a href="http://bbebooksthailand.com">BB eBooks</a>—dedicated to helping <em>independent authors</em> and <em>small presses</em> get their eBooks formatted, converted, and ready for sale at all the major online retailers (e.g. <a href="http://kdp.amazon.com">Amazon's Kindle Store</a>, <a href="http://pubit.barnesandnoble.com/">Barnes & Noble's Nook</a>, <a href="http://www.apple.com/ipad/built-in-apps/">iBookstore</a>, <a href="http://www.smashwords.com/">Smashwords</a>, etc.) Please <a href="http://bbebooksthailand.com/quote.html">contact us</a> 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 <em>free online tutorials</em> and <em>apps</em> to help you professionally <b>design your eBook</b>. Please visit our <a href="http://bbebooksthailand.com/developers.html">Developers page</a> and let’s work together to improve the overall standards of eBooks. Also, please <a href="http://bbebooksthailand.com">sign up</a> for the mailing list for promotions, design & marketing tips, plus eBook industry news.<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi04obE0JJcHpIMbmWixKtanBSvH-4-ocngNLU0OvcIlZkMTyTEgQyABGjU5OJqGUeSydf0RqDOmA4rqpBEUbcJIEw6jgU4T_h7kZICiXjGe7dXJb2b5u6PKRIGYgAAoksMxKvaooxHPvs/s1600/eBook-Design-Development-Paul-Salvette.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi04obE0JJcHpIMbmWixKtanBSvH-4-ocngNLU0OvcIlZkMTyTEgQyABGjU5OJqGUeSydf0RqDOmA4rqpBEUbcJIEw6jgU4T_h7kZICiXjGe7dXJb2b5u6PKRIGYgAAoksMxKvaooxHPvs/s1600/eBook-Design-Development-Paul-Salvette.jpg" /></a></div><br />
Looking for a <b>complete guide</b> on eBook design and development? Please consider <i>The eBook Design and Development Guide</i>, 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 <a href="http://www.amazon.com/gp/product/B009G2JMRK/ref=as_li_qf_sp_asin_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=B009G2JMRK&linkCode=as2&tag=paulsal-20">Amazon for $6.99 today</a>.<br />
<br />
<br />
<a href="http://www.paulsalvette.com/2012/02/adding-hyperlinks-to-your-kindle-fire.html">Previous Post: Hyperlinks</a><br />
<br />
<h2>Introduction to CSS for the Kindle Fire</h2>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 <i>presentation</i> 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.<br />
<br />
As an example, here is an image of three different paragraphs that each has its own presentation or style:<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJYNqSgEV3YZO-TRMlQyty5vZmEnvoZBj2CTsEF0xYWz8dUNkjG8J-49oMZZx57qtNc3GZWuAvyKzL2WQwm_SmEp7AVuLA9wn7JPIqAHHxBD_XeRnYb38oFoCFCo8q4aUia_Jk7plR9R0/s1600/three+styles+css.gif" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJYNqSgEV3YZO-TRMlQyty5vZmEnvoZBj2CTsEF0xYWz8dUNkjG8J-49oMZZx57qtNc3GZWuAvyKzL2WQwm_SmEp7AVuLA9wn7JPIqAHHxBD_XeRnYb38oFoCFCo8q4aUia_Jk7plR9R0/s1600/three+styles+css.gif" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Three Paragraphs Styled Differently</td></tr>
</tbody></table><br />
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.<br />
<br />
During the early years of web development, it became <a href="http://www.alistapart.com/articles/separationdilemma/">a fundamental axiom to separate content (HTML) and presentation (CSS) from each other</a>. 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.<br />
<br />
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.<br />
<br />
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.<br />
<br />
<h2>Applying a Stylesheet</h2><br />
There are three basic ways to apply CSS presentation to your HTML, and only one is recommended--using an external stylesheet with a <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">.css</span> file extension. However, you should be aware of the other two methods.<br />
As an example, we would like to apply the following CSS, which makes any content in a <p> element be left-justified:<br />
<blockquote class="tr_bq"><div style="font-family: "Courier New",Courier,monospace;">p {text-align: left;}</div></blockquote>The first approach is to include it within the head portion of the HTML. The CSS will be enclosed within the <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;"><style></span> element as follows:<br />
<blockquote class="tr_bq"><div style="font-family: "Courier New",Courier,monospace;"><?xml version="1.0" encoding="UTF-8" ?></div><div style="font-family: "Courier New",Courier,monospace;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"></div><div style="font-family: "Courier New",Courier,monospace;"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"></div><div style="font-family: "Courier New",Courier,monospace;"><head></div><div style="font-family: "Courier New",Courier,monospace;"><meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" /></div><div style="font-family: "Courier New",Courier,monospace;"><title>Your Title Here</title></div><div style="font-family: "Courier New",Courier,monospace;"><b><style type="text/css"></b></div><div style="font-family: "Courier New",Courier,monospace;"><b>p {text-align: left;}</b></div><div style="font-family: "Courier New",Courier,monospace;"><b></style></b></div><div style="font-family: "Courier New",Courier,monospace;"></head></div><div style="font-family: "Courier New",Courier,monospace;"><body></div><div style="font-family: "Courier New",Courier,monospace;"><p>My first paragraph that is aligned to the left. Hopefully my CSS will work.</p></div><div style="font-family: "Courier New",Courier,monospace;"><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></div><div style="font-family: "Courier New",Courier,monospace;"></body></div><div style="font-family: "Courier New",Courier,monospace;"></html></div></blockquote>The second approach, and the one that is <b>not recommended at all</b>, is to add the CSS style directly into the HTML as an attribute. This is accomplished by using <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">style="</span><i>some css</i><span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">" </span>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:<br />
<blockquote class="tr_bq"><div style="font-family: "Courier New",Courier,monospace;"><p style="text-align: left;">My first paragraph that is aligned to the left. Hopefully my CSS will work.</p></div><div style="font-family: "Courier New",Courier,monospace;"><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></div></blockquote>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 <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">style</span> attribute requires you to make changes within every HTML element you want to change.<br />
<br />
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 <i>anyname</i><span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">.css</span>. The content of the CSS file would simply be one line of text in this case:<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiLZLwA9ItzDNlfhOblkAxDxfVMQib3H6rzzd58uPWoHMQlg0yiD5eLioWy8fLor4YkeoUXuIESdwAnaAsqsqRJxZlG4h0d3KRhpWXWk5PUX30UMxP9nfJD_r6bPUz_QP8PIzWCDwn0Xs/s1600/simple+one+line+css.gif" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiLZLwA9ItzDNlfhOblkAxDxfVMQib3H6rzzd58uPWoHMQlg0yiD5eLioWy8fLor4YkeoUXuIESdwAnaAsqsqRJxZlG4h0d3KRhpWXWk5PUX30UMxP9nfJD_r6bPUz_QP8PIzWCDwn0Xs/s1600/simple+one+line+css.gif" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">CSS File Example with Color-Coded Syntax</td></tr>
</tbody></table><br />
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.<br />
<br />
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:<br />
<blockquote class="tr_bq" style="font-family: "Courier New",Courier,monospace;"><?xml version="1.0" encoding="UTF-8" ?><br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><br />
<head><br />
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" /><br />
<title>Your Title Here</title><br />
<b><link type="text/css" rel="stylesheet" href="mystylesheet.css" /></b><br />
</head><br />
<body><br />
<p>My first paragraph that is aligned to the left. Hopefully my CSS will work.</p><br />
<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><br />
</body><br />
</html></blockquote>This method of using an external stylesheet is <b>recommended</b>, because you can use the same stylesheet for numerous HTML files and the syntax is color-coded differently for advanced text editors.<br />
<br />
<b>Tip:</b> You can keep the CSS file in a different directory and reference it in the <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">link</span> element using a relative path to the HTML file. This is considered a good practice. For example linking to a directory called <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">cssfiles</span> that is in the same directory as the HTML file would have the <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">href="cssfiles/mystylesheet.css"</span> attribute. Linking to the CSS file in the parent directory of the HTML file would have the <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">href="../mystylesheet.css"</span> attribute.<br />
<br />
<a href="http://www.paulsalvette.com/2012/03/css-selector-tutorial-for-ebooks.html">Next Post: Selectors and Declarations</a>Paul Salvettehttp://www.blogger.com/profile/11818202201018195312noreply@blogger.com1tag:blogger.com,1999:blog-8917601577161181396.post-82147596502027298462012-02-23T21:48:00.001+07:002012-09-26T22:13:09.539+07:00Adding Hyperlinks to Your Kindle Fire eBook<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmyqUBZhF7BO4l5WQ2Sb9HQ9nwjVLVdybiJfAf5qH9EHMSmOQd-P1uB824bQUSPDwxmsBcQxJ1OkJywmwhKfs7uew49Sbmydqvb3VTiZz3mu0DqHFeYLbAgXgTkGXmUtN6MV-4HC7ysJs/s1600/BBeBooksLogo_Small.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="53" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmyqUBZhF7BO4l5WQ2Sb9HQ9nwjVLVdybiJfAf5qH9EHMSmOQd-P1uB824bQUSPDwxmsBcQxJ1OkJywmwhKfs7uew49Sbmydqvb3VTiZz3mu0DqHFeYLbAgXgTkGXmUtN6MV-4HC7ysJs/s320/BBeBooksLogo_Small.png" width="320" /></a></div><br />
Thank you for visiting this eBook design tutorial. We now have an eBook design startup—<a href="http://bbebooksthailand.com">BB eBooks</a>—dedicated to helping <em>independent authors</em> and <em>small presses</em> get their eBooks formatted, converted, and ready for sale at all the major online retailers (e.g. <a href="http://kdp.amazon.com">Amazon's Kindle Store</a>, <a href="http://pubit.barnesandnoble.com/">Barnes & Noble's Nook</a>, <a href="http://www.apple.com/ipad/built-in-apps/">iBookstore</a>, <a href="http://www.smashwords.com/">Smashwords</a>, etc.) Please <a href="http://bbebooksthailand.com/quote.html">contact us</a> 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 <em>free online tutorials</em> and <em>apps</em> to help you professionally <b>design your eBook</b>. Please visit our <a href="http://bbebooksthailand.com/developers.html">Developers page</a> and let’s work together to improve the overall standards of eBooks. Also, please <a href="http://bbebooksthailand.com">sign up</a> for the mailing list for promotions, design & marketing tips, plus eBook industry news.<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi04obE0JJcHpIMbmWixKtanBSvH-4-ocngNLU0OvcIlZkMTyTEgQyABGjU5OJqGUeSydf0RqDOmA4rqpBEUbcJIEw6jgU4T_h7kZICiXjGe7dXJb2b5u6PKRIGYgAAoksMxKvaooxHPvs/s1600/eBook-Design-Development-Paul-Salvette.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi04obE0JJcHpIMbmWixKtanBSvH-4-ocngNLU0OvcIlZkMTyTEgQyABGjU5OJqGUeSydf0RqDOmA4rqpBEUbcJIEw6jgU4T_h7kZICiXjGe7dXJb2b5u6PKRIGYgAAoksMxKvaooxHPvs/s1600/eBook-Design-Development-Paul-Salvette.jpg" /></a></div><br />
Looking for a <b>complete guide</b> on eBook design and development? Please consider <i>The eBook Design and Development Guide</i>, 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 <a href="http://www.amazon.com/gp/product/B009G2JMRK/ref=as_li_qf_sp_asin_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=B009G2JMRK&linkCode=as2&tag=paulsal-20">Amazon for $6.99 today</a>.<br />
<br />
<a href="http://www.paulsalvette.com/2012/02/adding-ordered-and-unordered-lists-to.html">Previous Post: Lists</a><br />
<br />
Everyone likes functionality in their eBooks and being able to visit other sites on the web with the tap of a finger. By adding an element of interactivity, hyperlinks give eBooks a serious edge over their dead tree cousins. A hyperlink consists of two parts: the hyperlinked content that is clicked to access the hyperlink and the target. For example, by clicking this <a href="http://paulsalvette.com/">hyperlinked content</a>, you will go to the author's blog at http://paulsalvette.com. Hyperlinks can also redirect the reader to sections inside the actual eBook—a necessity for building a proper Table of Contents.<br />
<br />
<h2>External Hyperlinks</h2><br />
For hyperlinks outside of the eBook, you can designate targets as either websites (http://<i>website.com</i>) or email addresses (mailto:<i>name</i>@<i>domain.com</i>). Be sure to add the <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">http://</span> or <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">mailto:</span> 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: <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;"><a href="</span><i>http://website.com</i><span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">"></span><i>hyperlinked text</i><span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;"></a></span>.<br />
<br />
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:<br />
<blockquote class="tr_bq" style="font-family: "Courier New",Courier,monospace;"><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></blockquote><br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOwEDbDObWeGCcQEuVU57xDxxyiRGesLiYwnQ72hryey3JmhFSghL_zK5dHcHpgWR0UGlxo8zlUDVhLmI4IBXKbPmrtZZ_y25ZuXh0fSyKD2BRaED0NzbO-5u7_fCB_4jTTduJaSxKTG8/s1600/hyperlink+example.gif" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOwEDbDObWeGCcQEuVU57xDxxyiRGesLiYwnQ72hryey3JmhFSghL_zK5dHcHpgWR0UGlxo8zlUDVhLmI4IBXKbPmrtZZ_y25ZuXh0fSyKD2BRaED0NzbO-5u7_fCB_4jTTduJaSxKTG8/s1600/hyperlink+example.gif" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Adding Hyperlinks with HTML</td></tr>
</tbody></table><br />
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 <span style="background-color: #eee7e7; font-family: MONOSPACE; font-weight: bold;">TO:</span> block.<br />
<br />
<b>Tip:</b> 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.<br />
<br />
<b>Important Note:</b> 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. <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">&amp;</span>) or use <a href="http://mrcoles.com/blog/how-use-amersands-html-encode/">percent encoding</a> (i.e. <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">&</span> should be changed to <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">%26</span>).<br />
<br />
<h2>Internal Hyperlinks</h2><br />
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 <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">id="</span><i>anchorname</i><span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">"</span> attribute, which can be placed inside almost any HTML tag (e.g. <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;"><p></span>, <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;"><div></span>, <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;"><span></span>, <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;"><a></span>, etc.). The <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">id</span> attribute is also important in styling your content with CSS.<br />
<br />
Establishing the hyperlink to target the anchor is done in a similar fashion as hyperlinking to external content. The <i>anchorname</i> defined in the <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">id</span> attribute gets targeted by using the <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">#</span> key. For example, <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;"><a href="myebook.html#anchorname">hyperlinked text</a></span> would target the content with the <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">id="anchorname"</span> attribute inside the <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">myebook.html</span> file. You should use a relative path for the <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">.html</span> file.<br />
<br />
Here is an example of adding anchors and internal hyperlinks to your HTML markup in a file called <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">myebook.html</span>:<br />
<blockquote class="tr_bq" style="font-family: "Courier New",Courier,monospace;"><p id="section1">This is the 1st paragraph.</p><br />
<p>By clicking on this <a href="myebook.html#section1">link</a>, you'll go back to the 1st paragraph.</p></blockquote><br />
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 <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">id</span> attribute is completely transparent to the reader.<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdA9J7XMoIbYY7tg-GHmV0HuQgQ2IqmJJUvwnv3KDyGkiV6dDkWLAAy9TW9HbbzVBsQxsdMDAX9qgxxegb0X1O89y9H_ADYSrRP9rCLaqQOUVyBVslap79aOSJ-Avpf_jSdQ-JpyIbUEs/s1600/internal+hyperlink+example.gif" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdA9J7XMoIbYY7tg-GHmV0HuQgQ2IqmJJUvwnv3KDyGkiV6dDkWLAAy9TW9HbbzVBsQxsdMDAX9qgxxegb0X1O89y9H_ADYSrRP9rCLaqQOUVyBVslap79aOSJ-Avpf_jSdQ-JpyIbUEs/s1600/internal+hyperlink+example.gif" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Internal Hyperlink Example in Google Chrome</td></tr>
</tbody></table><br />
<b>Important Note:</b> The value of the <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">id</span> attribute must be labeled uniquely throughout the HTML document. Also, it must not start with a number or special character (e.g. 1<i>anchorname</i>, $<i>anchorname</i>, etc.)<br />
<br />
<h2>Internal Hyperlink Bug in Kindle</h2><br />
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 <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;"><a id="anchor1" /></span> or <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;"><span id="anchor1"></span><i>some text</i><span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;"></span></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.<br />
<br />
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:<br />
<blockquote class="tr_bq" style="font-family: "Courier New",Courier,monospace;"><p class="chapheading"><a id="chap3" />Chapter 3<br />Las Vegas</p></blockquote>If a hyperlink to <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">#chap3</span> is clicked on within any Kindle device, except the Kindle Fire, the following bug occurs where the formatting is completely blown out:<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXQERhDIMCzWYmWFAZRYjVIXTdVjZQf8c5MAV9Vd17rSUWV_JLKJYnSp3QCyFgwLzmil3aO3Rtyje00a0f-jIwjSLELA8oAkHsxENXae_kdfxeFlGaoBeOOvhyphenhyphenU9u1WjbfsWX5UBb1x2s/s1600/kindle+bug+links.gif" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="128" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXQERhDIMCzWYmWFAZRYjVIXTdVjZQf8c5MAV9Vd17rSUWV_JLKJYnSp3QCyFgwLzmil3aO3Rtyje00a0f-jIwjSLELA8oAkHsxENXae_kdfxeFlGaoBeOOvhyphenhyphenU9u1WjbfsWX5UBb1x2s/s320/kindle+bug+links.gif" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Bug with Internal Hyperlinks Example on the Kindle for iPhone</td></tr>
</tbody></table><br />
<br />
To avoid this only use the <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">id</span> attribute within block elements. To be safe you can wrap <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;"><div></span>…<span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;"></div></span> tags around the entire heading and insert the <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">id</span> attribute to define the anchor. The HTML markup for this particular case would look as follows:<br />
<blockquote class="tr_bq" style="font-family: "Courier New",Courier,monospace;"><div id="chap3"><p class="chapheading">Chapter 3<br />Las Vegas</p></div></blockquote>This method of including the <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">id</span> attribute in a separate <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;"><div></span> element will avoid the Kindle bug.<br />
<br />
<b>Tip:</b> In addition to defining anchors within the <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;"><div></span> element, be sure to label your anchors in a logical fashion to help yourself in the design process and workflow.<br />
<br />
<a href="http://www.paulsalvette.com/2012/03/introduction-to-css-for-kindle-fire-and.html">Next Post: Basic CSS</a>Paul Salvettehttp://www.blogger.com/profile/11818202201018195312noreply@blogger.com8tag:blogger.com,1999:blog-8917601577161181396.post-72293543157132236502012-02-16T20:00:00.001+07:002012-09-26T22:13:18.809+07:00Adding Ordered and Unordered Lists to Your Kindle eBook<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmyqUBZhF7BO4l5WQ2Sb9HQ9nwjVLVdybiJfAf5qH9EHMSmOQd-P1uB824bQUSPDwxmsBcQxJ1OkJywmwhKfs7uew49Sbmydqvb3VTiZz3mu0DqHFeYLbAgXgTkGXmUtN6MV-4HC7ysJs/s1600/BBeBooksLogo_Small.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="53" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmyqUBZhF7BO4l5WQ2Sb9HQ9nwjVLVdybiJfAf5qH9EHMSmOQd-P1uB824bQUSPDwxmsBcQxJ1OkJywmwhKfs7uew49Sbmydqvb3VTiZz3mu0DqHFeYLbAgXgTkGXmUtN6MV-4HC7ysJs/s320/BBeBooksLogo_Small.png" width="320" /></a></div><br />
Thank you for visiting this eBook design tutorial. We now have an eBook design startup—<a href="http://bbebooksthailand.com">BB eBooks</a>—dedicated to helping <em>independent authors</em> and <em>small presses</em> get their eBooks formatted, converted, and ready for sale at all the major online retailers (e.g. <a href="http://kdp.amazon.com">Amazon's Kindle Store</a>, <a href="http://pubit.barnesandnoble.com/">Barnes & Noble's Nook</a>, <a href="http://www.apple.com/ipad/built-in-apps/">iBookstore</a>, <a href="http://www.smashwords.com/">Smashwords</a>, etc.) Please <a href="http://bbebooksthailand.com/quote.html">contact us</a> 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 <em>free online tutorials</em> and <em>apps</em> to help you professionally <b>design your eBook</b>. Please visit our <a href="http://bbebooksthailand.com/developers.html">Developers page</a> and let’s work together to improve the overall standards of eBooks. Also, please <a href="http://bbebooksthailand.com">sign up</a> for the mailing list for promotions, design & marketing tips, plus eBook industry news.<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi04obE0JJcHpIMbmWixKtanBSvH-4-ocngNLU0OvcIlZkMTyTEgQyABGjU5OJqGUeSydf0RqDOmA4rqpBEUbcJIEw6jgU4T_h7kZICiXjGe7dXJb2b5u6PKRIGYgAAoksMxKvaooxHPvs/s1600/eBook-Design-Development-Paul-Salvette.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi04obE0JJcHpIMbmWixKtanBSvH-4-ocngNLU0OvcIlZkMTyTEgQyABGjU5OJqGUeSydf0RqDOmA4rqpBEUbcJIEw6jgU4T_h7kZICiXjGe7dXJb2b5u6PKRIGYgAAoksMxKvaooxHPvs/s1600/eBook-Design-Development-Paul-Salvette.jpg" /></a></div><br />
Looking for a <b>complete guide</b> on eBook design and development? Please consider <i>The eBook Design and Development Guide</i>, 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 <a href="http://www.amazon.com/gp/product/B009G2JMRK/ref=as_li_qf_sp_asin_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=B009G2JMRK&linkCode=as2&tag=paulsal-20">Amazon for $6.99 today</a>.<br />
<br />
<a href="http://www.paulsalvette.com/2012/02/html-tables-on-kindle-fire.html">Previous Post: Working with Tables</a> <br />
<br />
Lists are a way to represent related pieces of information in bulleted format. Ordered lists utilize a sequential numbering format, while unordered lists use bullets. In terms of presentation, lists are typically indented from the normal content, with the bullets or numbers appearing in a vertical line. Using this type of markup is particularly useful for non-fiction.<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2HqVAE3Ugu5psi32K5sJgRgAUUfdCZ1hvCCtrgFb4Dhjrph6_e7zmzWFXKhp-05kWsM6JAJcIjffbzF_O7sxKcCTUWZ4dZTwtUnQU7N80P2EAWpGUU2c45Cb0bGwfeI1wzJulICkIjDE/s1600/ordered+unordered+list.gif" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2HqVAE3Ugu5psi32K5sJgRgAUUfdCZ1hvCCtrgFb4Dhjrph6_e7zmzWFXKhp-05kWsM6JAJcIjffbzF_O7sxKcCTUWZ4dZTwtUnQU7N80P2EAWpGUU2c45Cb0bGwfeI1wzJulICkIjDE/s1600/ordered+unordered+list.gif" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Examples of Ordered and Unordered Lists</td></tr>
</tbody></table><br />
<br />
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.<br />
<br />
<h2>HTML Markup for Lists</h2><br />
The entire contents of an ordered or unordered list are wrapped in the tags <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;"><ol></span>…<span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;"></ol></span> or <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;"><ul></span>…<span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;"></ul></span> respectively. Within these elements, text is added in between <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;"><li></span>…<span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;"></li></span> tags to denote the content for one bullet. The HTML markup for the above screenshot would look as follows:<br />
<blockquote class="tr_bq" style="font-family: "Courier New",Courier,monospace;"><p>Things to do today (in order)</p><br />
<ol><br />
<li>Fire agent</li><br />
<li>Learn how to design an eBook</li><br />
<li>Upload my eBook to the Kindle store</li><br />
</ol><br />
<p>Things to do today (in no particular order)</p><br />
<ul><br />
<li>Walk the dog</li><br />
<li>Write 1,000 words</li><br />
<li>Make alimony payments</li><br />
</ul></blockquote><b>Important Note:</b> Do not wrap the contents of an entire ordered or unordered list within <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;"><p></span> tags (i.e. <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;"><p><ol><li></span> Item1 <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;"></li></ol></p></span>). 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. <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;"><ol><li></span>…<span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;"></li></ol></span> is correct, but <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;"><ol><li></span>…<span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;"></ol></li></span> is incorrect.<br />
<br />
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.<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy1vT7TdW8yI53ofo_B216RyXwb2BF2AayWIlPbhfrmrO_v3DHtUn-JyBYcdrjN4qe_beeigDuxRxE3zSZpoWn-_pPV7Aboz5O-UPzWQSbBG_wwhHeDL7kRH0mdg7e499PaBc37Q3vmm4/s1600/flush+list.gif" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy1vT7TdW8yI53ofo_B216RyXwb2BF2AayWIlPbhfrmrO_v3DHtUn-JyBYcdrjN4qe_beeigDuxRxE3zSZpoWn-_pPV7Aboz5O-UPzWQSbBG_wwhHeDL7kRH0mdg7e499PaBc37Q3vmm4/s1600/flush+list.gif" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Lists Appear Flush from One Line to the Next</td></tr>
</tbody></table><br />
<h2>Nested Lists</h2><br />
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 <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;"><li></span> and closing <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;"></li></span> tags of the root-level element. Some sample HTML is as follows (indented for convenience):<br />
<blockquote class="tr_bq" style="font-family: "Courier New",Courier,monospace;"><p>Things to do today (in order)</p><br />
<ol><br />
<li>Fire agent</li><br />
<li>Learn how to design an eBook utilizing my awesome new HTML and CSS skills<br />
<ul><br />
<li>Brush up on KindleGen compiling</li><br />
<li>Debug my EPUB</li><br />
</ul><br />
</li><br />
<li>Upload my eBook to the Kindle store</li><br />
</ol></blockquote><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLICiP_vqk0uM9L0DceDQdHknTHVngA_EPHer7ndO-us6U_GyAbPlW1qr_kNBHN8S1bvBEbu30oc9gy90lY90wMXdu94bT2azJctaqEiumScMQWiQM0axJwHHbTfc4EipSapLqLhUJBoY/s1600/nested+list+example.gif" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLICiP_vqk0uM9L0DceDQdHknTHVngA_EPHer7ndO-us6U_GyAbPlW1qr_kNBHN8S1bvBEbu30oc9gy90lY90wMXdu94bT2azJctaqEiumScMQWiQM0axJwHHbTfc4EipSapLqLhUJBoY/s1600/nested+list+example.gif" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Nested List Example in Google Chrome</td></tr>
</tbody></table><br />
<br />
Notice how the closing <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;"></li></span> for #2 on the ordered list comes after the <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;"></ul></span> for the sub-level list.<br />
<br />
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. <br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjByTkbXlA2wTBrFKkFOEZgQsGUvTjX-sQe6aySG-T-XXcJQpKvA2awFjMflfwY7HW5BvC_k7og7Dz-_h4AqEt0uXE18IPhUEsgWhaeRSTA5P7DIjV67j-71CLAWnuqSsCrUCuUdzxy_wc/s1600/nested+list+kindles.gif" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="191" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjByTkbXlA2wTBrFKkFOEZgQsGUvTjX-sQe6aySG-T-XXcJQpKvA2awFjMflfwY7HW5BvC_k7og7Dz-_h4AqEt0uXE18IPhUEsgWhaeRSTA5P7DIjV67j-71CLAWnuqSsCrUCuUdzxy_wc/s320/nested+list+kindles.gif" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Acceptable Rendering of Nested Lists on the Kindle</td></tr>
</tbody></table><a href="http://www.paulsalvette.com/2012/02/adding-hyperlinks-to-your-kindle-fire.html">Next Post: Working with Hyperlinks</a>Paul Salvettehttp://www.blogger.com/profile/11818202201018195312noreply@blogger.com17tag:blogger.com,1999:blog-8917601577161181396.post-85018293130829112262012-02-15T21:47:00.000+07:002012-06-22T11:15:17.142+07:00HTML Tables on the Kindle Fire<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmyqUBZhF7BO4l5WQ2Sb9HQ9nwjVLVdybiJfAf5qH9EHMSmOQd-P1uB824bQUSPDwxmsBcQxJ1OkJywmwhKfs7uew49Sbmydqvb3VTiZz3mu0DqHFeYLbAgXgTkGXmUtN6MV-4HC7ysJs/s1600/BBeBooksLogo_Small.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="53" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmyqUBZhF7BO4l5WQ2Sb9HQ9nwjVLVdybiJfAf5qH9EHMSmOQd-P1uB824bQUSPDwxmsBcQxJ1OkJywmwhKfs7uew49Sbmydqvb3VTiZz3mu0DqHFeYLbAgXgTkGXmUtN6MV-4HC7ysJs/s320/BBeBooksLogo_Small.png" width="320" /></a></div><br />
Thank you for visiting this eBook design tutorial. We now have an eBook design startup—<a href="http://bbebooksthailand.com">BB eBooks</a>—dedicated to helping <em>independent authors</em> and <em>small presses</em> get their eBooks formatted, converted, and ready for sale at all the major online retailers (e.g. <a href="http://kdp.amazon.com">Amazon's Kindle Store</a>, <a href="http://pubit.barnesandnoble.com/">Barnes & Noble's Nook</a>, <a href="http://www.apple.com/ipad/built-in-apps/">iBookstore</a>, <a href="http://www.smashwords.com/">Smashwords</a>, etc.) Please <a href="http://bbebooksthailand.com/quote.html">contact us</a> 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 <em>free online tutorials</em> and <em>apps</em> to help you professionally <b>design your eBook</b>. Please visit our <a href="http://bbebooksthailand.com/developers.html">Developers page</a> and let’s work together to improve the overall standards of eBooks. Also, please <a href="http://bbebooksthailand.com">sign up</a> for the mailing list for promotions, design & marketing tips, plus eBook industry news.<br />
<br />
<a href="http://www.paulsalvette.com/2012/02/embedding-audio-and-video-in-ebooks-on.html">Previous Post: Embedding Audio and Video</a><br />
<br />
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 <b>never</b> use this approach when designing your eBook for the Kindle Fire. Limit your use of tables to tabular information only.<br />
<br />
<a href="http://kindleformatting.com/faq.php#faq10">The original Kindle does not support HTML tables</a> 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.<br />
<br />
<h2>The HTML Table Model</h2><br />
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.<br />
<br />
The basic HTML tags for tables are as follows:<br />
<ul><li><span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;"><table></span>…<span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;"></table></span>: wraps around the entire table to indicate that the HTML nested inside is for tabular information</li>
<li><span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;"><tr></span>…<span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;"></tr></span>: markup that indicates a table row, which wraps around the individual cells</li>
<li><span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;"><td></span>…<span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;"></td></span>: markup that wraps around the content of an individual cell</li>
<li><span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;"><th></span>…<span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;"></th></span>: similar to <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;"><td></span>, except used for table header cells</li>
</ul>Additionally, there are two attributes for the <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;"><td></span> 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):<br />
<ul><li><span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">colspan="x"</span>: indicates that the cell should merge across <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">x</span> columns in the row</li>
<li><span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">rowspan="x"</span>: indicates that the cell should merge across <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">x</span> rows in the column</li>
</ul>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:<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJIOSGUILZanQ3ZTF42t_av_HbRMwOeK4DfWiTvfqT2cU_CsttK_7H5LH7ozbY_E00mlHzH3DhOB8Zn7AoDNcYa9Fhfp-JJfNsnABNG1QA-QpcUn3sN9_lt0G7_65HptJtSfCfKmfbutk/s1600/table+model.gif" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="145" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJIOSGUILZanQ3ZTF42t_av_HbRMwOeK4DfWiTvfqT2cU_CsttK_7H5LH7ozbY_E00mlHzH3DhOB8Zn7AoDNcYa9Fhfp-JJfNsnABNG1QA-QpcUn3sN9_lt0G7_65HptJtSfCfKmfbutk/s320/table+model.gif" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">HTML Table Model Visualized</td></tr>
</tbody></table><br />
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.<br />
<br />
<h2>HTML Example for a Table</h2><br />
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:<br />
<blockquote class="tr_bq"><div style="font-family: "Courier New",Courier,monospace;"><h2>Awesome 80s Movies Table</h2></div><div style="font-family: "Courier New",Courier,monospace;"><table></div><div style="font-family: "Courier New",Courier,monospace;"> <tr></div><div style="font-family: "Courier New",Courier,monospace;"> <th>Movie Name</th></div><div style="font-family: "Courier New",Courier,monospace;"> <th>Year Released</th></div><div style="font-family: "Courier New",Courier,monospace;"> <th>Rating</th></div><div style="font-family: "Courier New",Courier,monospace;"> </tr></div><div style="font-family: "Courier New",Courier,monospace;"> <tr></div><div style="font-family: "Courier New",Courier,monospace;"> <td>Hard Rock Zombies</td></div><div style="font-family: "Courier New",Courier,monospace;"> <td>1985</td></div><div style="font-family: "Courier New",Courier,monospace;"> <td>7</td></div><div style="font-family: "Courier New",Courier,monospace;"> </tr></div><div style="font-family: "Courier New",Courier,monospace;"> <tr></div><div style="font-family: "Courier New",Courier,monospace;"> <td>The Wizard</td></div><div style="font-family: "Courier New",Courier,monospace;"> <td>1988</td></div><div style="font-family: "Courier New",Courier,monospace;"> <td>9</td></div><div style="font-family: "Courier New",Courier,monospace;"> </tr></div><div style="font-family: "Courier New",Courier,monospace;"> <tr></div><div style="font-family: "Courier New",Courier,monospace;"> <td>Spinal Tap</td></div><div style="font-family: "Courier New",Courier,monospace;"> <td>1984</td></div><div style="font-family: "Courier New",Courier,monospace;"> <td>11!</td></div><div style="font-family: "Courier New",Courier,monospace;"> </tr></div><div style="font-family: "Courier New",Courier,monospace;"> <tr></div><div style="font-family: "Courier New",Courier,monospace;"> <td colspan="2" rowspan="2">Placeholder for More Movies</td></div><div style="font-family: "Courier New",Courier,monospace;"> <td>1</td></div><div style="font-family: "Courier New",Courier,monospace;"> </tr></div><div style="font-family: "Courier New",Courier,monospace;"> <tr></div><div style="font-family: "Courier New",Courier,monospace;"> <td>3</td></div><div style="font-family: "Courier New",Courier,monospace;"> </tr></div><div style="font-family: "Courier New",Courier,monospace;"></table></div></blockquote>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 <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;"><td></span> elements within a row, and the number of rows is the number of <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;"><th></span> and <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;"><tr></span> elements within the <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;"><table></span>…<span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;"></table></span> tags. Therefore, you could always add more table rows at a later time.<br />
<br />
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:<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik_UO-xkfiJ7SfjxaV9p0Np44ukD385yFG64MmzZHrq7oHKfpBY04LUHIqyg9KBZylRW-fJdUbaRpWHR7sG-bSgRGMMYr751h79Ht4QC1DrVlRz61WJJILvxp_YEgiY0wfTTgw2Q3Ad7w/s1600/kindle+tables.gif" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik_UO-xkfiJ7SfjxaV9p0Np44ukD385yFG64MmzZHrq7oHKfpBY04LUHIqyg9KBZylRW-fJdUbaRpWHR7sG-bSgRGMMYr751h79Ht4QC1DrVlRz61WJJILvxp_YEgiY0wfTTgw2Q3Ad7w/s320/kindle+tables.gif" width="284" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">An Example of a Table Rendered in the Kindle Fire and Older e-ink Kindles</td></tr>
</tbody></table><br />
<br />
<b>Tip:</b> 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.<br />
<h2>Alternative Method of Displaying Tables as Images</h2>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.<br />
<br />
To save a table as an image, perform the following steps:<br />
<ol><li>Open the document with the tabular information</li>
<li>Copy the contents of the document to your clipboard (<span style="font-family: monospace; font-variant: small-caps; font-weight: bold;">alt+printscreen</span> for <a href="http://www.hongkiat.com/blog/making-fast-screen-captures-in-windows-and-mac/">Windows</a> and <span style="font-family: monospace; font-variant: small-caps; font-weight: bold;">command+control+shift+3</span> for <a href="http://osxdaily.com/2010/05/13/print-screen-mac/">Mac users</a>)</li>
<li>Paste the contents of the clipboard into your favorite photo-editing software</li>
<li>Crop and resize as needed</li>
<li>Save as a GIF image</li>
</ol><br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioKQcZJX2nyZSpn9etR2PEm0hOQNxly_sBMzPM_v-01J7TbLh0K-uKOz0-XF5Kg7hmU09n7kMcNdRz0Un3kDOFqoHkbffpA4CpwJLVlQ7WP-yvkL5tXgmobHmrhLwyiYwjOVtix7-UeBM/s1600/print+screen+crop.gif" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioKQcZJX2nyZSpn9etR2PEm0hOQNxly_sBMzPM_v-01J7TbLh0K-uKOz0-XF5Kg7hmU09n7kMcNdRz0Un3kDOFqoHkbffpA4CpwJLVlQ7WP-yvkL5tXgmobHmrhLwyiYwjOVtix7-UeBM/s320/print+screen+crop.gif" width="296" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Example of Saving a Table in a PDF to an Image</td></tr>
</tbody></table>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.<br />
<br />
<u><b>Next Post: Working with Lists on the Kindle Fire</b></u>Paul Salvettehttp://www.blogger.com/profile/11818202201018195312noreply@blogger.com3tag:blogger.com,1999:blog-8917601577161181396.post-37675292018481162282012-02-09T21:54:00.001+07:002012-09-26T22:13:35.763+07:00Embedding Audio and Video in eBooks on the Kindle Fire<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi04obE0JJcHpIMbmWixKtanBSvH-4-ocngNLU0OvcIlZkMTyTEgQyABGjU5OJqGUeSydf0RqDOmA4rqpBEUbcJIEw6jgU4T_h7kZICiXjGe7dXJb2b5u6PKRIGYgAAoksMxKvaooxHPvs/s1600/eBook-Design-Development-Paul-Salvette.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi04obE0JJcHpIMbmWixKtanBSvH-4-ocngNLU0OvcIlZkMTyTEgQyABGjU5OJqGUeSydf0RqDOmA4rqpBEUbcJIEw6jgU4T_h7kZICiXjGe7dXJb2b5u6PKRIGYgAAoksMxKvaooxHPvs/s1600/eBook-Design-Development-Paul-Salvette.jpg" /></a></div><br />
Looking for a <b>complete guide</b> on eBook design and development? Please consider <i>The eBook Design and Development Guide</i>, 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 <a href="http://www.amazon.com/gp/product/B009G2JMRK/ref=as_li_qf_sp_asin_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=B009G2JMRK&linkCode=as2&tag=paulsal-20">Amazon for $6.99 today</a>.<br />
<br />
<a href="http://www.paulsalvette.com/2012/02/working-with-images-on-kindle-fire.html">Previous Post: Working with Images</a> <br />
<br />
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.<br />
<br />
<h2>The Rise of HTML5 for Audio and Video</h2><br />
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.<a href="http://www.apple.com/hotnews/thoughts-on-flash/"> Following Steve Jobs' quip that Flash was lousy for mobile devices</a>, 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.<br />
<br />
The problem lies with the fact that different browsers recognize only specific formats. This is due to <a href="http://webdesign.about.com/od/video/a/html5-video-formats.htm">codec licensing fiascoes</a> 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 <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">mp4</span> format for videos and <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">mp3</span> 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.<br />
<br />
<h2>Embedding Audio and Video in Your eBook</h2><br />
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 <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">baby.mp4</span>, along with some amusing audio in a file called <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">babyscreaming.mp3</span>. Some sample HTML code would be as follows:<br />
<blockquote class="tr_bq" style="font-family: "Courier New",Courier,monospace;"><p>I'm one of those annoying fathers that is so boring he only talks about his damn kids.</p><br />
<p> <audio src="babyscreaming.mp3" controls title="Audio of a Baby Screaming"></audio></p><br />
<p><video src="baby.mp4" controls poster="images/babyplaceholder.jpg" title="Video of a Thai Baby"></video></p><br />
<p>That's it for right now.</p></blockquote><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw4C1YkqWEMqoMtYbmvUYECXstGqzaF2CnaG6Pk8aQ_doOBwIMQecgpE22dqMi0CvQuuhybxVmIwWdZgXf7eMzZjE-F1x3EZ5kDqt9G1lDCVnSAbTj0iXPO86FHfEX_Z3RTloZ8DVo4SA/s1600/audiovideo1.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw4C1YkqWEMqoMtYbmvUYECXstGqzaF2CnaG6Pk8aQ_doOBwIMQecgpE22dqMi0CvQuuhybxVmIwWdZgXf7eMzZjE-F1x3EZ5kDqt9G1lDCVnSAbTj0iXPO86FHfEX_Z3RTloZ8DVo4SA/s1600/audiovideo1.jpg" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Embedded Audio and Video in the Chrome Browser</td></tr>
</tbody></table><br />
The audio and video files will not play until the user clicks on them. Notice that, like the <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">img</span> element, the <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;"><audio></span> and <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;"><video></span> 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.<br />
<br />
Let's break down each of these attributes within the HTML5 multimedia tags. The <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">src</span> attribute (required) is similar to the <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">img</span> element in that it specifies a relative path to the source file. The <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">controls</span> attribute (required) tells the browser or eReading device to use the automatic controls programmed into the software. The <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">title</span> attribute (optional) provides a description of the content that is generally displayed when the mouse pointer is rolled over the controls. The <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">poster</span> attribute (optional) in the <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">video</span> element provides an image to be shown in the video frame until the reader clicks the video to play.<br />
<br />
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:<br />
<ol><li>Audio and video files must be kept in a separate directory entitled <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">audiovideo</span> (e.g. <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">audiovideo/baby.mp4</span>)</li>
<li>Metadata about the description of the multimedia and its length in minutes and seconds must be provided within the paragraph tags (e.g. <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">A Video about Baby (00:20)</p></span>)</li>
<li>Fallback text must be provided within the audio or video element if the Kindle device cannot render the mp3 or mp4 format (e.g. <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;"><video</span>…<span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">This device does not support the required audio or video format. Please view it at my website.</video></span>)</li>
<li>Multimedia content requires a reference in the Table of Contents</li>
</ol>Utilizing all of these requirements in the HTML markup would result in the following code about this hypothetical baby video in northeastern Thailand:<br />
<blockquote class="tr_bq" style="font-family: "Courier New",Courier,monospace;"><p>I'm one of those annoying fathers that is so boring he only talks about his damn kids.</p><br />
<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><br />
<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><br />
<p>That's it for right now.</p></blockquote><b>Important Note: </b>The fallback text in between the <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;"><audio></audio></span> or <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;"><video></video></span> tags will only render if the multimedia files cannot be read by the eReading device. The content after the <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;"></audio></span> or <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;"></video></span> tag will always render.<br />
<br />
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:<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSVeI3ekH0AgAfOq2WC0GJbAo-ukGquZ9FDARH-uhXGLCaS1L4nFym0_eY5BpvUNoQQlavXsdf9GgUNS0EGD1Hdf8U_zttodizb32vY2p8cbqS2tiy8n0-RiTK5rBzinkfmm41Zs6Kf2M/s1600/audio+video+kindle+example.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="101" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSVeI3ekH0AgAfOq2WC0GJbAo-ukGquZ9FDARH-uhXGLCaS1L4nFym0_eY5BpvUNoQQlavXsdf9GgUNS0EGD1Hdf8U_zttodizb32vY2p8cbqS2tiy8n0-RiTK5rBzinkfmm41Zs6Kf2M/s320/audio+video+kindle+example.jpg" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Example of Fallback Content and Embedded Content</td></tr>
</tbody></table><br />
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.<br />
<br />
<a href="http://www.paulsalvette.com/2012/02/html-tables-on-kindle-fire.html">Next Post: Working with Tables</a>Paul Salvettehttp://www.blogger.com/profile/11818202201018195312noreply@blogger.com11tag:blogger.com,1999:blog-8917601577161181396.post-72401781645273722862012-02-05T19:34:00.001+07:002012-09-26T22:13:45.794+07:00Working with Images on the Kindle Fire<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmyqUBZhF7BO4l5WQ2Sb9HQ9nwjVLVdybiJfAf5qH9EHMSmOQd-P1uB824bQUSPDwxmsBcQxJ1OkJywmwhKfs7uew49Sbmydqvb3VTiZz3mu0DqHFeYLbAgXgTkGXmUtN6MV-4HC7ysJs/s1600/BBeBooksLogo_Small.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="53" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmyqUBZhF7BO4l5WQ2Sb9HQ9nwjVLVdybiJfAf5qH9EHMSmOQd-P1uB824bQUSPDwxmsBcQxJ1OkJywmwhKfs7uew49Sbmydqvb3VTiZz3mu0DqHFeYLbAgXgTkGXmUtN6MV-4HC7ysJs/s320/BBeBooksLogo_Small.png" width="320" /></a></div><br />
Thank you for visiting this eBook design tutorial. We now have an eBook design startup—<a href="http://bbebooksthailand.com">BB eBooks</a>—dedicated to helping <em>independent authors</em> and <em>small presses</em> get their eBooks formatted, converted, and ready for sale at all the major online retailers (e.g. <a href="http://kdp.amazon.com">Amazon's Kindle Store</a>, <a href="http://pubit.barnesandnoble.com/">Barnes & Noble's Nook</a>, <a href="http://www.apple.com/ipad/built-in-apps/">iBookstore</a>, <a href="http://www.smashwords.com/">Smashwords</a>, etc.) Please <a href="http://bbebooksthailand.com/quote.html">contact us</a> 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 <em>free online tutorials</em> and <em>apps</em> to help you professionally <b>design your eBook</b>. Please visit our <a href="http://bbebooksthailand.com/developers.html">Developers page</a> and let’s work together to improve the overall standards of eBooks. Also, please <a href="http://bbebooksthailand.com">sign up</a> for the mailing list for promotions, design & marketing tips, plus eBook industry news.<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi04obE0JJcHpIMbmWixKtanBSvH-4-ocngNLU0OvcIlZkMTyTEgQyABGjU5OJqGUeSydf0RqDOmA4rqpBEUbcJIEw6jgU4T_h7kZICiXjGe7dXJb2b5u6PKRIGYgAAoksMxKvaooxHPvs/s1600/eBook-Design-Development-Paul-Salvette.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi04obE0JJcHpIMbmWixKtanBSvH-4-ocngNLU0OvcIlZkMTyTEgQyABGjU5OJqGUeSydf0RqDOmA4rqpBEUbcJIEw6jgU4T_h7kZICiXjGe7dXJb2b5u6PKRIGYgAAoksMxKvaooxHPvs/s1600/eBook-Design-Development-Paul-Salvette.jpg" /></a></div><br />
Looking for a <b>complete guide</b> on eBook design and development? Please consider <i>The eBook Design and Development Guide</i>, 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 <a href="http://www.amazon.com/gp/product/B009G2JMRK/ref=as_li_qf_sp_asin_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=B009G2JMRK&linkCode=as2&tag=paulsal-20">Amazon for $6.99 today</a>.<br />
<br />
<a href="http://www.paulsalvette.com/2012/01/html-tutorial-for-kindle-fire-part-1.html">Previous Post: Introduction to HTML for the Kindle Fire</a> <br />
<br />
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.<br />
<br />
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 <a href="http://www.photoscape.org/ps/main/index.php">Photoscape</a>, 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 <a href="http://gimp.org/">Gimp</a> (free) or Photoshop (expensive). For those not artistically inclined, public domain images can be acquired for commercial use at <a href="http://en.wikipedia.org/wiki/Wikipedia:Public_domain_image_resources">Wikipedia</a> or at <a href="http://openclipart.org/">Open Clip Art</a>. You can also purchase images for royalty-free usage at sites like <a href="http://www.istockphoto.com/">iStockphoto</a> or <a href="http://www.dreamstime.com/">Dreamstime</a>.<br />
<br />
<b>Important Note:</b> 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).<br />
<br />
<h2>Image Formats Supported by Kindle<br />
</h2><br />
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:<br />
GIF: 256-color format that is suitable for line art, tables, and graphical text.<br />
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<br />
PNG: high-quality, big-file size image format that can be used for logos, small complex images, and anything you want to look sharp.<br />
BMP: Uncompressed image format (recommend never using due to its large file size).<br />
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.<br />
<br />
<h2>Size Does Matter for eBook Images</h2><br />
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.<br />
<br />
Most importantly, size costs money.<a href="https://kdp.amazon.com/self-publishing/help?topicId=A29FL26OKE7R7B"> Amazon has a policy of charging a "delivery fee"</a> 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.<br />
<br />
Here are some tips to keep the file size of your images minimized:<br />
<ol><li>For line-art, tables, and images that are text-heavy, use the GIF format, which doesn't have many colors.</li>
<li>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)/</li>
<li>Only use PNGs or SVGs when you need an image to look sharp (like your personalized logo).</li>
<li>Always cut down the image height and width to the size you want it to appear on the Kindle Fire. <a href="http://www.pigsgourdsandwikis.com/2012/01/i-dont-care-how-big-that-tablet-is.html">Since the Kindle Fire viewport is 1024x600px</a>, you never need an image bigger than those dimensions (not applicable to the SVG format since it can be scaled to any size).</li>
<li>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.</li>
<li>The cover image should be exactly 600x800px. A nice cover image will typically be in between 80-127KB.</li>
<li>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 <a href="http://kindleformatting.com/blog/2009/06/kindle-dx-image-test.php">524x640px viewport</a>.</li>
</ol><br />
<h2>Adding Images to Your eBook</h2><br />
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 <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;"><img /></span>; 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 <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">tree.gif</span> image in the <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">images</span> directory with a description of "A Picture of a Tree".<br />
<blockquote class="tr_bq"><div style="font-family: "Courier New",Courier,monospace;"><img alt="A Picture of a Tree" src="images/tree.gif" /></div></blockquote>The <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">src</span> attribute (pronounced "source") defines the directory and the image filename, while the <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">alt</span> attribute provides an alternative description of the image in case the browser or eReader cannot render it properly. The file directory specified in the <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">src</span> attribute is relative to the directory where the HTML file is located. So, if your html file is in <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">c:/temp/myebook.html</span>, the tree image would be in <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">c:/temp/images/tree.gif</span>. You always need to include the <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">alt</span> attribute for images in order for your eBook to pass EPUB validation.<br />
<br />
<b>Important Note:</b> The filename and directory specified in the <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">src</span> attribute is case sensitive.<br />
<br />
Try adding an image into the elf story to see how it looks in your browser. Some example HTML would be as follows:<br />
<blockquote class="tr_bq"><div style="font-family: "Courier New",Courier,monospace;"><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></div><div style="font-family: "Courier New",Courier,monospace;"><p>By the time the manuscript got around to the second paragraph, everyone but one elf was dead—what a shame!</p></div></blockquote><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyXvlewmBECDuMU2__AKiCi2XB0unzZVMxEGxp2TcrPU2hbniAwaO5KKE-1-C3kHReuE5dEVV_0HLAC7SkBflSdD2yIfY4vX_xTaUeQ0TPOJxEYzfhoeGVV8CdDlPqCQuL6_pGl83Y90E/s1600/imageinline.gif" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyXvlewmBECDuMU2__AKiCi2XB0unzZVMxEGxp2TcrPU2hbniAwaO5KKE-1-C3kHReuE5dEVV_0HLAC7SkBflSdD2yIfY4vX_xTaUeQ0TPOJxEYzfhoeGVV8CdDlPqCQuL6_pGl83Y90E/s1600/imageinline.gif" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Example of an Image In-Line with the Content</td></tr>
</tbody></table>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:<br />
<blockquote class="tr_bq"><div style="font-family: "Courier New",Courier,monospace;"><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></div><div style="font-family: "Courier New",Courier,monospace;"><p><img src="images/tree.gif" alt="A Picture of a Tree" /></p></div><div style="font-family: "Courier New",Courier,monospace;"><p>By the time the manuscript got around to the second paragraph, everyone but one elf was dead—what a shame!</p></div></blockquote><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1Nd5YEwrgBQ4bQB4ScOVisvoMwmgFPNA5vbPGkuLt8bsfPW8j2HHJ0InV6TPUQ2sHKI32h9jJnM_ohlfp6Z8uNpAxKy7tyKNJdjCKC7K_uB6_0FdLFZEglSGAsfDahnOPdlE9ZQZQUEE/s1600/imageblock.gif" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1Nd5YEwrgBQ4bQB4ScOVisvoMwmgFPNA5vbPGkuLt8bsfPW8j2HHJ0InV6TPUQ2sHKI32h9jJnM_ohlfp6Z8uNpAxKy7tyKNJdjCKC7K_uB6_0FdLFZEglSGAsfDahnOPdlE9ZQZQUEE/s1600/imageblock.gif" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Example of an Image Acting Like a Block Element</td></tr>
</tbody></table>In general, you should wrap the self-closing <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;"><img /></span> 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 <a href="http://kindleformatting.com/blog/2009/06/kindle-dx-image-test.php">older e-ink Kindles randomly resizing your images</a>.<br />
<br />
<h2>Avoid Automatic Resizing of Images on Old Kindles</h2><br />
The <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">tree.gif</span> 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.<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieZefRbdS6pstCAhIMRyUonqIaEaU3uktWps9g88OeLTMF0_pzzN2hoMaIZrPnGNBbBf5d0wmPo0NvIulc3czzTGgyZXZHiFB8ZWwCE7RcgCmK3uyi-ybGemRy575Z8GHBflon2FcF_wo/s1600/kindleimageresizing.gif" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="124" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieZefRbdS6pstCAhIMRyUonqIaEaU3uktWps9g88OeLTMF0_pzzN2hoMaIZrPnGNBbBf5d0wmPo0NvIulc3czzTGgyZXZHiFB8ZWwCE7RcgCmK3uyi-ybGemRy575Z8GHBflon2FcF_wo/s320/kindleimageresizing.gif" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Example of Image Mangling in Older Kindles</td></tr>
</tbody></table>To avoid the maddening automatic resizing of images on older e-ink Kindles, you can specify <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">height</span> and <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">width</span> 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:<br />
<blockquote class="tr_bq"><div style="font-family: "Courier New",Courier,monospace;"><p><img alt="A Picture of a Tree" height="145" src="images/tree.gif" width="179" /></p></div></blockquote><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVHzWYEsZQgQVIHPtdT8R1Vq_aUcP-DsRtqsU4k9ajDlxWtKV7uoJCQuWcd1RQoHcWN6ovHJloJgB4uXcCTQYR2hB08ev5bcEXgplht3mkGWlX2H1wDvqhL5OXB-XeBrApaxRUI3OSdBQ/s1600/kindleimageproperresizing.gif" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="106" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVHzWYEsZQgQVIHPtdT8R1Vq_aUcP-DsRtqsU4k9ajDlxWtKV7uoJCQuWcd1RQoHcWN6ovHJloJgB4uXcCTQYR2hB08ev5bcEXgplht3mkGWlX2H1wDvqhL5OXB-XeBrApaxRUI3OSdBQ/s320/kindleimageproperresizing.gif" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Proper Image Resizing for Older Kindles</td></tr>
</tbody></table><br />
<b>Tip:</b> The order of attributes does not matter inside HTML elements. For example, you could have specified the <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">width</span> attribute before the <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">height</span> attribute, and the HTML markup would be perfectly valid.<br />
<br />
<h2>Special Note on Using SVG Images for the Kindle Fire</h2><br />
Since SVG images can be scaled to any size, you should always specify either a <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">height</span> or <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">width</span> attribute within the <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;"><img /></span> tag. By only specifying one of the attributes, the aspect of the SVG will be maintained. Some example HTML markup for an image called <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">fancytree.svg</span> would be as follows:<br />
<blockquote class="tr_bq"><div style="font-family: "Courier New",Courier,monospace;"><p><img src="images/fancytree.svg" height="200" alt="A Picture of a Tree with Awesome SVG" /></p></div></blockquote><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAOLBAz5DTy5G4Kxj5WPT9TGhB9FzGVc7h5pkslzEBu06flsp3F0JtEfjuNShlwYRHJCAQDflmaItwsNNS_F3D8pDIRYgoeoYHE1V7YdC2q0O_SjviCixGzwxaUj1VqpugaxAIkOMmD5I/s1600/svg_image_kindlefire.gif" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAOLBAz5DTy5G4Kxj5WPT9TGhB9FzGVc7h5pkslzEBu06flsp3F0JtEfjuNShlwYRHJCAQDflmaItwsNNS_F3D8pDIRYgoeoYHE1V7YdC2q0O_SjviCixGzwxaUj1VqpugaxAIkOMmD5I/s1600/svg_image_kindlefire.gif" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">An SVG Image in the Kindle Fire</td></tr>
</tbody></table><br />
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 <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">alt</span> 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.<br />
<a href="http://www.blogger.com/goog_78323462"><br />
</a><br />
<a href="http://www.paulsalvette.com/2012/02/embedding-audio-and-video-in-ebooks-on.html">Next Post: Adding Audio and Video Content to Your eBook for the Kindle Fire </a>Paul Salvettehttp://www.blogger.com/profile/11818202201018195312noreply@blogger.com10tag:blogger.com,1999:blog-8917601577161181396.post-84710973194455280662012-01-26T19:00:00.003+07:002012-09-26T22:14:01.237+07:00HTML Tutorial for the Kindle Fire (Part 1)<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmyqUBZhF7BO4l5WQ2Sb9HQ9nwjVLVdybiJfAf5qH9EHMSmOQd-P1uB824bQUSPDwxmsBcQxJ1OkJywmwhKfs7uew49Sbmydqvb3VTiZz3mu0DqHFeYLbAgXgTkGXmUtN6MV-4HC7ysJs/s1600/BBeBooksLogo_Small.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="53" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmyqUBZhF7BO4l5WQ2Sb9HQ9nwjVLVdybiJfAf5qH9EHMSmOQd-P1uB824bQUSPDwxmsBcQxJ1OkJywmwhKfs7uew49Sbmydqvb3VTiZz3mu0DqHFeYLbAgXgTkGXmUtN6MV-4HC7ysJs/s320/BBeBooksLogo_Small.png" width="320" /></a></div><br />
Thank you for visiting this eBook design tutorial. We now have an eBook design startup—<a href="http://bbebooksthailand.com">BB eBooks</a>—dedicated to helping <em>independent authors</em> and <em>small presses</em> get their eBooks formatted, converted, and ready for sale at all the major online retailers (e.g. <a href="http://kdp.amazon.com">Amazon's Kindle Store</a>, <a href="http://pubit.barnesandnoble.com/">Barnes & Noble's Nook</a>, <a href="http://www.apple.com/ipad/built-in-apps/">iBookstore</a>, <a href="http://www.smashwords.com/">Smashwords</a>, etc.) Please <a href="http://bbebooksthailand.com/quote.html">contact us</a> 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 <em>free online tutorials</em> and <em>apps</em> to help you professionally <b>design your eBook</b>. Please visit our <a href="http://bbebooksthailand.com/developers.html">Developers page</a> and let’s work together to improve the overall standards of eBooks. Also, please <a href="http://bbebooksthailand.com">sign up</a> for the mailing list for promotions, design & marketing tips, plus eBook industry news.<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi04obE0JJcHpIMbmWixKtanBSvH-4-ocngNLU0OvcIlZkMTyTEgQyABGjU5OJqGUeSydf0RqDOmA4rqpBEUbcJIEw6jgU4T_h7kZICiXjGe7dXJb2b5u6PKRIGYgAAoksMxKvaooxHPvs/s1600/eBook-Design-Development-Paul-Salvette.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi04obE0JJcHpIMbmWixKtanBSvH-4-ocngNLU0OvcIlZkMTyTEgQyABGjU5OJqGUeSydf0RqDOmA4rqpBEUbcJIEw6jgU4T_h7kZICiXjGe7dXJb2b5u6PKRIGYgAAoksMxKvaooxHPvs/s1600/eBook-Design-Development-Paul-Salvette.jpg" /></a></div><br />
Looking for a <b>complete guide</b> on eBook design and development? Please consider <i>The eBook Design and Development Guide</i>, 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 <a href="http://www.amazon.com/gp/product/B009G2JMRK/ref=as_li_qf_sp_asin_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=B009G2JMRK&linkCode=as2&tag=paulsal-20">Amazon for $6.99 today</a>.<br />
<br />
<a href="http://www.paulsalvette.com/2012/01/how-to-design-ebook-for-kindle-fire.html">Previous Post: Introduction to the Kindle Fire</a><br />
<br />
<h3>Introduction to HTML</h3><br />
HTML is the markup language of the internet and of eBooks. It is the language that determines how web browsers and eReading devices render the content to show to the user. Go to any website in the web browser of your choice and press <span style="font-family: monospace; font-variant: small-caps; font-weight: bold;">CTRL+U</span>, and you will see the HTML source code. It may appear a bit daunting at first, but if you break it down into small little pieces, you will begin to have a basic understanding of how to convert your manuscript into the HTML necessary for a beautifully designed eBook.<br />
<br />
The official syntax for how HTML should be structured is defined by a published, open-source specification. The <a href="http://www.w3.org/">World Wide Web Consortium</a> (or W3C) is a group of internet architects, web developers, tech industry experts, and other smart folks who determine this specification. The smart people working with Apple, Mozilla, and Google who develop web browsers (e.g. Safari, Chrome, Firefox, etc.) use this specification to create their product that gets used by billions of people throughout the world. Also, web designers and developers use this specification to create websites.<br />
<br />
<a href="http://en.wikipedia.org/wiki/XHTML">XHTML was an HTML specification</a> finalized by the W3C in 2001, and it was utilized by many developers throughout the last decade to create websites. However, <a href="http://www.zeldman.com/2011/01/27/html5-vs-html/">XHTML is being phased out in favor of HTML5</a>, which has better support for audio and video, working with files, and a myriad of other new features that users are demanding. The HTML5 specification is still under development, but all browsers support at least some elements of it. eReading devices are also transitioning from XHTML to HTML5. This is a process that doesn't happen overnight, which is why eReaders like Kindle Fire support XHTML with some HTML5 elements thrown in. All of this technology and geek politics can be a bit hand-wringing at times. In order to prevent confusion, this guide will simply refer to everything as HTML.<br />
<br />
In website design and development, it is considered a best practice to separate code for "content" and "presentation"--the same is true for eBook design. From an author's point of view, an example of "content" would be the paragraph of text in a chapter. An example of "presentation" would be the authoring desiring design characteristics for that paragraph of text such as a serif font, an indent on the first line of text, the paragraph becoming fully-justified, etc. For eBook design, content is specified in the HTML and presentation is specified in the CSS, which will be covered later.<br />
<br />
In order that eBooks are reflowable, it is necessary to convert the content of your eBook into HTML. You should most certainly not save your manuscript in your word processor or PDF as an HTML file. Direct conversion from the proprietary formats into HTML is god awful, to say the least. By learning the basics of HTML, you will be able to convert your manuscript into a professional eBook manually, and the end result will look beautiful to your readers. So, let's get started.<br />
<br />
<h3>Tools Recommended</h3><br />
Along with your word processing software that you use, here are some additional tools recommended to begin designing your eBook. Don't worry, they are all free.<br />
<ol><li>Text editor (<a href="http://notepad-plus-plus.org/">Notepad++</a> [free], <a href="http://www.barebones.com/products/textwrangler/">TextWrangler</a> for Mac users [free]</li>
<li><a href="http://www.adobe.com/products/digitaleditions/">Adobe Digital Editions</a> (previews EPUB files [free])</li>
<li><a href="http://www.amazon.com/gp/feature.html/?docId=1000765261">Kindle Previewer</a> (previews KF8/MOBI files [free])</li>
<li><a href="http://www.gimp.org/">Gimp</a> (for image design [free])</li>
<li><a href="http://www.photoscape.org/ps/main/index.php">Photoscape</a> (Windows) or <a href="http://picasa.google.com/">Picasa</a> (Mac) (for resizing and manipulating images [free])</li>
</ol>Some small presses and self-publishers like to use Adobe InDesign. It is a very fancy (and very expensive) software package used by many professional publishing companies. You do not need this program to make a professional eBook. If you would like to learn about using Adobe InDesign to create an eBook, I recommend Liz Castro's publications on the subject; however, we will not discuss Adobe InDesign in this guide. Although, if your source file was created in Adobe InDesign instead of text in a word processor, you can utilize that in the design workflow for your eBook throughout this guide.<br />
<br />
The recommended web browsers are either Google Chrome or Safari. This is because they use <a href="http://www.webkit.org/">the WebKit engine</a>, which is the same software used by the Kindle Fire. A web browser is a good place to start first looking at your eBook before you compile it into the KF8/MOBI format. However, if you are a dedicated Firefox user, that browser should work fine as well. This guide does not recommend using Internet Explorer, ever.<br />
<br />
<h3>HTML Structure</h3><br />
An HTML file is simply a text file with a <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">.html</span> extension. It is divided into two parts: the head section and the body section. The head section contains metadata, instructions to the web browser or eReader on how to read the HTML code, and other information that is not content displayed to the reader. The body section contains that actual marked-up content that will be displayed to the reader. Do not be intimidated by this code, and you can simply copy and paste into your text editor with <span style="font-family: monospace; font-variant: small-caps; font-weight: bold;">CTRL-C</span> and then <span style="font-family: monospace; font-variant: small-caps; font-weight: bold;">CTRL-V</span> from this guide. Here is an example:<br />
<blockquote class="tr_bq"><div style="font-family: "Courier New",Courier,monospace;"><?xml version="1.0" encoding="UTF-8" ?></div><div style="font-family: "Courier New",Courier,monospace;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"></div><div style="font-family: "Courier New",Courier,monospace;"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"></div><div style="font-family: "Courier New",Courier,monospace;"><head></div><div style="font-family: "Courier New",Courier,monospace;"><meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" /></div><div style="font-family: "Courier New",Courier,monospace;"><title>Your Title Here</title></div><div style="font-family: "Courier New",Courier,monospace;"></head></div><div style="font-family: "Courier New",Courier,monospace;"><body></div><div style="font-family: "Courier New",Courier,monospace;">Your Content Here!</div><div style="font-family: "Courier New",Courier,monospace;"></body></div><div style="font-family: "Courier New",Courier,monospace;"></html></div></blockquote>After you copy and paste this code, save it as a .html file, such as <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">myebook.html</span>. If you are using Notepad++ as your text editor, it would look as follows:<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9MvDY1YvUyK2ya3ZOlcwJQE5rgdODRhO46hbLLF8R0p0lsaIe0HP0BVu9P3pKPn7iLyfE73Es3LyCqCACAiF8-22XHhyFr-dbl4qusOh_T6r6l7CZF2Vlp1DaBM2lYjxC-IuXNNlgmqo/s1600/notepadhtmlexample1.gif" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9MvDY1YvUyK2ya3ZOlcwJQE5rgdODRhO46hbLLF8R0p0lsaIe0HP0BVu9P3pKPn7iLyfE73Es3LyCqCACAiF8-22XHhyFr-dbl4qusOh_T6r6l7CZF2Vlp1DaBM2lYjxC-IuXNNlgmqo/s1600/notepadhtmlexample1.gif" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Notepad++ HTML Example</td></tr>
</tbody></table><br />
Say you had a hypothetical story in your word processing program--quite possibly the world's worst, but suitable as an example. You could copy and paste it into the text editor program in between the <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;"><body></span> and <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;"></body></span> tags, which is where the content of your eBook should go. It would look like this in your text editor:<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEippG1XJx2HaYoP95wxQj4rz5mM2AXbjlON-lrlMne4DDnyy4cEPfLubRvM15qi58Cb0RcAXhULNgTuZwHVwua8XsBnhAYKoCAWbY153VHrhw3Btwz-HOj7xZsRlGmVHbNx13H3w6Y-Z9M/s1600/notepadhtmlexample2.gif" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEippG1XJx2HaYoP95wxQj4rz5mM2AXbjlON-lrlMne4DDnyy4cEPfLubRvM15qi58Cb0RcAXhULNgTuZwHVwua8XsBnhAYKoCAWbY153VHrhw3Btwz-HOj7xZsRlGmVHbNx13H3w6Y-Z9M/s320/notepadhtmlexample2.gif" width="264" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">World's Worst eBook in a Text Editor</td></tr>
</tbody></table>Note how every time there is a carriage return (achieved by pressing <span style="font-family: monospace; font-variant: small-caps; font-weight: bold;">ENTER</span> in the word processor), the text gets assigned a new line. Entire paragraphs of text should appear on a single line.<br />
<br />
<b>Tip:</b> This manuscript contains curled quotes or fancy quotes, and they should appear in your text editor. If it is showing up as junk in your text editor, change the encoding to UTF-8 (under the <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">Encoding</span> menu for NotePad++).<br />
<br />
<b>Tip:</b> The word wrap can be toggled on or off under the <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">View</span> menu for NotePad++. The preceding examples have word wrap turned on.<br />
<br />
Since this is an HTML file, you can open it with your web browser. To open an HTML file located on your hard drive, simply press <span style="font-family: monospace; font-variant: small-caps; font-weight: bold;">CTRL+O</span> from within your web browser and locate the file. For this particular example, we have not applied any HTML markup to the content, so it will appear as one long string of text.<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiN-YWgdA3dFoCOkpmrb3tEr6I69-zctmdR-NqEAJFKeCQyCuLSeviBym0R4lTPiatZvT6Zr56tDXBqx1iC2ZFb7Y_Qe8Iw6aEZkLsINFGVlXi4LKntCelO3Xm7-BbY89x9BrwByq0RGk4/s1600/myebooknoformatting.gif" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiN-YWgdA3dFoCOkpmrb3tEr6I69-zctmdR-NqEAJFKeCQyCuLSeviBym0R4lTPiatZvT6Zr56tDXBqx1iC2ZFb7Y_Qe8Iw6aEZkLsINFGVlXi4LKntCelO3Xm7-BbY89x9BrwByq0RGk4/s1600/myebooknoformatting.gif" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">HTML with No Markup Applied</td></tr>
</tbody></table><br />
Obviously, this is not how you want your eBook to look at all. That is why it is necessary to encode all of your content into what is called HTML tags, so that a web browser and eReader knows where each paragraph or heading starts and ends.<br />
<br />
<h3>Paragraph, Heading, and Div Tags</h3><br />
All well-formed HTML in the body section must exist within the opening and closing tags of block elements, which are HTML markups that make a rectangular object that does not break across lines. The most basic and frequently used example of a block element tag is the opening paragraph tag, <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;"><p>,</span> and the closing paragraph tag, <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;"></p></span>, which wraps around a paragraph of text. An example is as follows:<br />
<blockquote class="tr_bq" style="font-family: "Courier New",Courier,monospace;"><p>This is my paragraph of text. Hello, my friends!</p></blockquote>Notice how there should be no whitespace before the opening or after closing paragraph tag in your text editor. HTML syntax for all block elements follows similar rules: there is an opening tag <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;"><tag></span> and a closing tag annotated with a forward slash, <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;"></tag></span>. <br />
<br />
The heading tags are used for block elements that are, you guessed it, headings. Heading tag range from <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;"><h1></span> down to <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;"><h6></span>. Typically, web browsers and eReading devices render <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;"><h1></span> tags the biggest and most important, <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;"><h2></span> the second biggest, <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;"><h3></span> the third biggest, etc. You will learn how to define the shape and size of headings when you learn about CSS. It is important to markup your heading content with these tags rather than simple paragraph tags, because it aids in search engine optimization. While search engine spiders going through eBooks is in the very early and rudimentary stages, it could become more important in the future. An example of properly marked-up content with heading tags would be as follows:<br />
<blockquote class="tr_bq" style="font-family: "Courier New",Courier,monospace;"><h1>Title of my book</h1><br />
<h2>Chapter 1</h2><br />
<p>Content</p><br />
<h2>Chapter 2</h2><br />
<p>More content</p><br />
<h3>Chapter 2 Subheading</h3></blockquote><b>Important Note:</b> The case of the HTML tags is important, and it should <b>always</b> be lowercase. The XHTML standard requires lower case tags, and the validation process for eBooks will require adhering to XHTML standards.<br />
<br />
The <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;"><div></span> tag is a block element that wraps around other block elements. It is utilized to separate logical sections of content where you want to apply different types of presentation. For example, you may have several paragraphs of text in your eBook where you want a specific font. You would wrap the opening <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;"><div></span> and closing <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;"></div></span> tags around the three paragraphs, which are each wrapped in <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;"><p></span> and <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;"></p></span> tags. You will learn how to apply the presentation to the content within the <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;"><div></span> and <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;"></div></span> tags when you learn about CSS.<br />
<br />
Now that you understand the basic concept of block elements, you can try applying them to your hypothetical story. The title should be wrapped in <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;"><h1> </span>and <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;"></h1></span> tags, the chapter headings should be wrapped in <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;"><h2></span> and <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;"></h2></span> tags, and the content should be wrapped in <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;"><p></span> and <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;"></p></span> tags. The full HTML would look as follows in your text editor: <br />
<blockquote class="tr_bq" style="font-family: "Courier New",Courier,monospace;"><?xml version="1.0" encoding="UTF-8" ?><br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><br />
<head><br />
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" /><br />
<title>Your Title Here</title><br />
</head><br />
<body><br />
<h1>The End of Days</h1><br />
<p>By Joe Selfpubber</p><br />
<p>Copyright 2012</p><br />
<h2>Chapter 1</h2><br />
<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><br />
<p>By the time the manuscript got around to the second paragraph, everyone but one elf was dead—what a shame!</p><br />
<h2>Chapter 2</h2><br />
<p>The elf approached the warlock and said, “Why do you poison our fields? Now you shall die.” He drew his scabbard and slashed at the warlock’s waist. The warlock perished.</p><br />
<p>The End</p><br />
<h2>About the Author</h2><br />
<p>Joe Selfpubber is trying to make it big by selling his eBooks on the Kindle Fire so that he can quit his lousy day job. Drop him a line at http://joeselfpubber.com sometime.</p><br />
</body><br />
</html></blockquote>Save your HTML file in your text editor, and try refreshing your web browser with <span style="font-family: monospace; font-variant: small-caps; font-weight: bold;">F5</span>. The HTML that is rendered in your web browser should look as follows:<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVcC718vRHNntD4koCYZqwKxhs2FZ0nDlM3XI1b0KB9W_kUAc5EQ0QLwQlNTRFvtZePlaAIMyNhEEFUU5hml4dts_1CBPXY_J7HQURHdoonaWKAZBFoCWP7MCVJNAiycmbNfV6I5oFP8w/s1600/myebookwithmarkup.gif" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVcC718vRHNntD4koCYZqwKxhs2FZ0nDlM3XI1b0KB9W_kUAc5EQ0QLwQlNTRFvtZePlaAIMyNhEEFUU5hml4dts_1CBPXY_J7HQURHdoonaWKAZBFoCWP7MCVJNAiycmbNfV6I5oFP8w/s1600/myebookwithmarkup.gif" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">World's Worst eBook with Proper Markup</td></tr>
</tbody></table><br />
While this may not be the prettiest eBook in the world, it is functional and encoded properly in HTML. Try using the <a href="http://validator.w3.org/">HTML validator on the W3C website</a>, and it should say that the document was successfully checked. If it fails validation, re-examine your code to see where you made a mistake. Writing HTML can be a very unforgiving process that leaves little room for error, so remain patient and keep trying to find where the bugs are located in your text editor. The validator will usually tell you what line of code is problematic and needs debugging.<br />
<br />
<h3>Line Breaks and Horizontal Rules</h3><br />
The way HTML is rendered in web browsers and eReading devices is in a reflowable format. You can see this if you adjust the viewing window width of your web browser. The number of lines per paragraph will increase as the width of your browser window decreases. Occasionally, it may be advantageous to force a line break within a paragraph to ensure that a sentence begins on the next line (e.g. poetry).<br />
<br />
The HTML for a line break is simply the standalone <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;"><br /></span> tag, which is analogous to pressing <span style="font-family: monospace; font-variant: small-caps; font-weight: bold;">SHIFT+ENTER</span> in a word processing program. Some sample code would be as follows:<br />
<br />
<blockquote class="tr_bq" style="font-family: "Courier New",Courier,monospace;"><p>This is a paragraph of text residing in between some paragraph tags. If you want, you can make sure that some text starts on a new line with a<br />line break.</p></blockquote><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBzp7Q3voDKAG7NXKqLRKp1jduwIYW8JPdy3B1udlMXzBtu9glc3rhwKrwG89UTa9U7ZsEiNtvTIlSUUA9tlvP_1Qx3LsE2138lKeoe217xwm9YghiX-ddy94UgQV23yGOZNfC5CiLSEc/s1600/linebreak_example.gif" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBzp7Q3voDKAG7NXKqLRKp1jduwIYW8JPdy3B1udlMXzBtu9glc3rhwKrwG89UTa9U7ZsEiNtvTIlSUUA9tlvP_1Qx3LsE2138lKeoe217xwm9YghiX-ddy94UgQV23yGOZNfC5CiLSEc/s1600/linebreak_example.gif" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Example of How a Line Break Tag is Rendered</td></tr>
</tbody></table><br />
While the <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;"><br /></span> tag is useful in some situations, you should not use it to manually force whitespace between your paragraphs or force a page break in an eReading device. Utilizing CSS is much more appropriate at that task.<br />
<br />
<b>Important Note:</b> Don't forget the forward slash at the end of the line break tag. All self-closing tags require a forward slash at the end to maintain XHTML validity.<br />
<br />
Another example of a self-closing tag is the horizontal rule. This adds a horizontal bar across the width of the viewing window. These can be useful in the eBook design process when separating out blocks of text or for <a href="http://www.smileycat.com/design_elements/pull_quotes/">pull quotes</a>. Like other HTML elements, these can be styled with CSS to give them different colors, different widths, shadows, and other features. For right now, let's learn about how to add them into the HTML markup of your content. You simply add the self-closing tag <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;"><hr /></span>.<br />
<br />
Perhaps you want to add a bar below the About the Author heading of your elf story. The HTML markup would look as follows:<br />
<blockquote class="tr_bq" style="font-family: "Courier New",Courier,monospace;"><h2>About the Author</h2><br />
<hr /><br />
<p>Joe Selfpubber is trying to make it big by selling his eBooks on the Kindle Fire so that he can quit his lousy day job. Drop him a line at http://joeselfpubber.com sometime.</p></blockquote><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLZTxGn0ehqczadGhysnKiC8NGQsk4hogxTUND5kf5d0gsj7g4a0YeVQpSb3ZlFHZSkhSTJtpCv7Qvu9tRK0SxO9Qz1g9I0Gx8zSotHu6KMybp3JcPjWscp2t_nG3FBxxDYmGpdNCTzyI/s1600/horizontalrule_example.gif" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLZTxGn0ehqczadGhysnKiC8NGQsk4hogxTUND5kf5d0gsj7g4a0YeVQpSb3ZlFHZSkhSTJtpCv7Qvu9tRK0SxO9Qz1g9I0Gx8zSotHu6KMybp3JcPjWscp2t_nG3FBxxDYmGpdNCTzyI/s1600/horizontalrule_example.gif" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Example of a Horizontal Rule</td></tr>
</tbody></table><br />
This HTML code may seem trivial, but it is an important part of learning how your content needs to be marked up.<br />
<br />
<h3>HTML Entity Names and Comments</h3><br />
Within your content, you may want to display the greater-than or less-than signs to the reader (i.e. ">" or "<"). However, if you try to write them in your text editor to appear as content, it will create serious problems for you and is improper HTML coding. This is because the greater-than and less-than signs function as reserved characters in HTML. When using them, the browser thinks your HTML is trying to form a tag, but in reality you are trying to display content. The same is true for the ampersand (i.e. "&").<br />
<br />
As a workaround you can encode in your HTML code what is called an HTML entity name. The HTML entity name for the greater-than symbol is <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">&gt;</span>, the less-than symbol is <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">&lt;</span>, and the ampersand is <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">&amp;</span>.If you wanted a paragraph of your content to say, "4 > 1 & five is also < eight", the correct HTML would look as follows:<br />
<br />
<blockquote class="tr_bq" style="font-family: "Courier New",Courier,monospace;"><p>4 &gt; 1 &amp; five " ' is also &lt; eight</p></blockquote>HTML entity names always start with "<span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">&</span>" and end with "<span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">;</span>", and a <a href="http://www.w3schools.com/tags/ref_entities.asp">full list can be viewed here</a>. Once upon a time, some eBook readers required that certain "fancy" characters (e.g. “curled quotes” , em dashes —, etc.) be converted into HTML entity names. Basically, any character <a href="http://asciiset.com/">outside of the ASCII set</a> required conversion. This is not the case with any of the Kindle devices. Therefore, you can leave fancy characters that appear outside of the normal ones appearing on an English keyboard in your content.<br />
<br />
<b>Tip:</b> If you are interested in converting your <a href="http://www.paulsalvette.com/2011/08/turning-manuscript-into-clean-xhtml.html#c10">fancy characters into HTML entity names</a> for older eReading devices, please have a look at the author's post on the subject from 2011.<br />
<br />
It should be noted that for most HTML block elements if more than one consecutive space or a line break is utilized within the paragraph tag, the web browser or eReading device will render it with just one space. Therefore, if you had code that was as follows:<br />
<blockquote class="tr_bq" style="font-family: "Courier New",Courier,monospace;"><p>This is a paragraph with a lot of whitespace</p></blockquote>It would simply read "This is a paragraph with a lot of whitespace" within your browser. You can actually write the HTML across numerous lines within your text editor, and the browser and eReading device will render it the same. For some situations (e.g. poetry), you may want to add more than one space in between two letters. To accomplish this, you can the HTML non-breaking space entity name, which is <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">&nbsp;</span>. Try this HTML code in your text editor to see the difference:<br />
<blockquote class="tr_bq" style="font-family: "Courier New",Courier,monospace;"><p>This is a paragraph with a lot of whitespace</p><br />
<p>This is a paragraph with a&nbsp;&nbsp; lot&nbsp;&nbsp; of&nbsp;&nbsp; whitespace</p></blockquote><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXcowU2Itq5aKRyeBotz87imHlFH2AKRv7H4P5yA-avgshR_Gzv_CeCg_SO0DWp9ckeGAtg-3xca66GMB1vK3wLIvSV497BGK-Bupg1G02yRwyQbWsU_zcyQwzes7VR5kr4ECtJxvnPC8/s1600/nonbreakingspace+example.gif" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXcowU2Itq5aKRyeBotz87imHlFH2AKRv7H4P5yA-avgshR_Gzv_CeCg_SO0DWp9ckeGAtg-3xca66GMB1vK3wLIvSV497BGK-Bupg1G02yRwyQbWsU_zcyQwzes7VR5kr4ECtJxvnPC8/s1600/nonbreakingspace+example.gif" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Example of Using the Non-Breaking Space</td></tr>
</tbody></table><br />
HTML entity names may look nasty in your text editor, but the reader is oblivious to them if they are encoded properly.<br />
<br />
You as the eBook designer may want to leave a few notes for yourself inside your HTML code. However, you do want this to render in the browser. To add a comment you simply use the opening tag <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;"><!--</span> and the closing tag <span style="background-color: #eee7e7; font-family: monospace; font-weight: bold;">--></span>. An example from the elf story would be as follows:<br />
<blockquote class="tr_bq"><div style="font-family: "Courier New",Courier,monospace;"><p>By the time the manuscript got around to the second paragraph, everyone but one elf was dead—what a shame!</p></div><div style="font-family: "Courier New",Courier,monospace;"><!-- I gotta come back and fix these headings with some CSS --></div><div style="font-family: "Courier New",Courier,monospace;"><h2>Chapter 2</h2></div></blockquote><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmC3V1JA2VBC4aLYXU9JNKCi9X6kyH5MZT-8qjeqXm-TndSo56-8gqDpS6gjCfqNndkezHraIhkJFmHt_9aDhGCC59b0-S74TfqcBC39m-vfU-2SrUy3sIUJHEscEPU6qg934uiY1l6nw/s1600/htmlcomment_example.gif" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmC3V1JA2VBC4aLYXU9JNKCi9X6kyH5MZT-8qjeqXm-TndSo56-8gqDpS6gjCfqNndkezHraIhkJFmHt_9aDhGCC59b0-S74TfqcBC39m-vfU-2SrUy3sIUJHEscEPU6qg934uiY1l6nw/s1600/htmlcomment_example.gif" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Example of a Comment Being Ignored by the Web Browser</td></tr>
</tbody></table><br />
The content within the comment tags will be completely invisible to the user, because the browser or eReading device does not process anything within the comment tags.<br />
<br />
<a href="http://www.paulsalvette.com/2012/02/working-with-images-on-kindle-fire.html">Next Post: Working with Images</a>Paul Salvettehttp://www.blogger.com/profile/11818202201018195312noreply@blogger.com8