October 25, 2012

With New Kindles Come New Responsibilities

So, Amazon released a new build of KindleGen today. 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.

Anyway, here's some of my fiction that's up there now:

Paperwhite on the Left and Kindle Fire on the Right (America Goes On)
Drop Caps and Glyphs - W00T! (America Goes On)
Little Saddam Heads as Section Breaks - Why Not (The Bunker Below Believers' Palace)
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 eBook conversion shop, I'd be a really schnook if it wasn't. Check it out on Amazon by visiting my author page.
Share/Bookmark

October 7, 2012

My Dumb Life

Cruisin!
Just in case you're hearing all the boring details of my life, you can find them here at Belinda Nicoll's blog. 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.
Share/Bookmark

September 26, 2012

The eBook Design and Development Guide - My Latest

After eight-months of toil, the eBook Design and Development Guide 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:


You can pick it up at Amazon for $6.99. Thanks so much.

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.

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.

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:

  • Converting your manuscript into HTML
  • Adding hyperlinks, bullets, and tables to your eBook
  • Embedding correctly-sized images in your eBook
  • Creating a clickable Table of Contents for your eBook
  • Adding basic presentation and styling to your eBook with CSS such as font sizing, margins, and indentation
  • Embedding fonts in your eBook
  • Adding advanced styling to your eBook such as gradients, drop caps, and backgrounds
  • Creating a valid EPUB eBook
  • Creating a valid MOBI/KF8 eBook with KindleGen
  • Adding metadata into your eBook
  • Working with regular expressions for quickly converting an eBook

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.

This book is a follow-up to How to Format Your eBook for Kindle, NOOK, Smashwords, and Everything Else 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.

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.
Share/Bookmark

September 4, 2012

The Sentinel in Sector 5 - a Sci-Fi Novella

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.

I have always been a huge fan of post-apocalypse science fiction. From Canticle for Leibowitz to Lucifer's Hammer, 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 Brave New World as well as newcomers like the Hunger Games Trilogy 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.

======
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.

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. The Sentinel in Sector 5 is a 30,000-word sci-fi novella about the burning questions lingering in a young man's heart amid a restricted society.

Like a cross between The Hunger Games and Brave New World, Sentinel in Sector 5 is sure to keep you entertained while making you think about where our civilization is headed.
======

This novella is only $2.99 at Amazon, and please let me know what you think.
Share/Bookmark

August 13, 2012

8 Things to Learn from Jake Needham about eBooks and Publishing

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 Stephen Leather over a year ago. Author Jake Needham gave a great talk yesterday morning at the Pattaya City Expats Club. 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 World of Trouble. 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 Land of Smiles can also enjoy this great crime novel.

Jake Needham sells around 5,000 eBooks a month and has been writing for years, 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 publishing, eBooks, and the future of reading.



1) Print Books are Hard to Discover


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 pain distributing to bookstores 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.

2) Retailers of Print Books are a Commodity Business


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 Borders.

3) The Publisher's Main Reason for Existence was Product Placement, but That No Longer Applies with eBooks


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 Amazon algorithm is about as mysterious as the Bermuda Triangle, 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.

4) With eBooks, Readers are the Gatekeepers, Not Publishers

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 hobknob with the blue-hairs on the wine and cheese circuit of Manhattan, 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.

5) The Accessibility of eBooks Can't Be Beat


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 (same as Jeff Bezos). 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.

6) As an Author, Don't Be Afraid to Outsource


Giving some hope to our new startup, BB eBooks, 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 technical requirements of eBooks. 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 $500. This is in the same ballpark as we advise our clients; however, it really depends on what you want to do and not do.

7) Marketing is Somewhat Mysterious, but Get to Know Your Readers


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 word of mouth 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 great tips on how not to be a schmuck when you market your eBook.

8) eBook Piracy is not a Big Concern

Perusin' the Thai Rath
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 holding back the entire eBook industry. Jake said he had never heard about one of his eBooks being pirated. I checked some of the torrent sites 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 other authors who equate eBook piracy with the Four Horseman of the Apocalypse.

A big thank-you is in order to Jake Needham 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 World of Trouble.
Share/Bookmark

July 31, 2012

Being Old Makes You a Better Writer


So, we recently celebrated our little girl's 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.

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 starting a small business. 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.

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.

The Taleist self-publishing survey estimates 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.
Share/Bookmark

July 13, 2012

A New and Improved EPUB and KindleGen Tutorial

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

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

July 8, 2012

Everything You Want to Know about Publishing


We have been receiving a lot of inquiries at our BB eBooks site about how and where to self-publish. It can be a bit daunting at first, since all the different eBook stores have differing standards. That is why we compiled a comprehensive list that can hopefully act as a resource for independent writers and self-publishers.

Some highlights include the following:
Please let us know if you have any questions about the material, because we would like to continuously improve upon it.
Share/Bookmark

June 22, 2012

Our New eBook Startup - BB eBooks


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

BB eBooks also has an online eBook reader, and we have a small library of some of the classics in the public domain. This service is absolutely free for you to enjoy a casual read. The BB eBooks reader works on any device—PCs, tablets, and mobile—right in your favorite web browser. For those writers, editors, and publishers looking to go the DIY route for eBook production (you probably are if you visited this page), we offer free online tutorials and apps to help you professionally design your eBook. Please visit our Developers page and let’s work together to improve the overall standards of eBooks.

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

Sincerely,


Bee and Paul




FOR IMMEDIATE RELEASE
===========
BB eBooks Provides Affordable Services for Self-Publishing Authors and Small Presses

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

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

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

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

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

June 15, 2012

Adding Background Images and Gradients to Your eBooks


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


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

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 background-color: color code; 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 (on the Kindle Fire users have a choice between white, sepia, and black). Full background alterations can also looks tacky--like a MySpace page circa 2005.

Background Images


Hypothetically, you have a public domain image from a site like Open Clip Art that you would like to be the background for some boxes of content in your eBook. This 50x50px image has the filename seashell.jpg and it is in the same directory as your CSS file. The CSS syntax to declare the seashell as a background image is as follows:
p.myseashells
{
background-image: url("seashell.jpg");
}
Tip: If your image file was in a different directory than your CSS, you simply specify a relative path for the URL such as "./myimages/seashell.jpg". In this example, the CSS file is in the parent directory to myimages.

Now that you have declared a background image for paragraph elements with the myseashells class, you can implement the CSS with the following HTML markup:
<p>Normal paragraph content</p>
<p class="myseashells">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.</p>
Background Image on Kindle Fire

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 the border section of the box. This means that if any padding is applied on the box, the background image will be rendered behind the padding section as well as the content section.

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 PNG. You may also want the background-image to repeat in specific directions or not at all. Here is the CSS to perform this task:
background-repeat: repeat-x; /* Repeat Image Horizontally Only */
background-repeat: repeat-y; /* Repeat Image Vertically Only */
background-repeat: no-repeat; /* Image Only Appears in the Top Left */
Different Repeating Background Directions

Gradients


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 syntax for generating a gradient background can get a bit complicated. It also doesn't help that the CSS3 standard for gradients is still evolving and changing, 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 -webkit- prefix and the fact that there are no spaces before or after the parentheses:
background-image: -webkit-gradient(linear, staring point, ending point, from(color), to(color));
If you wanted a gradient to start on top of the box with a white color and end with a gray color, some sample CSS would look as follows:
p#graygradient
{
background-image: -webkit-gradient(linear, left top, left bottom, from(white), to(gray));
border-radius: 15px;
border: 1px solid black;
padding: 5px;
}
Gradients on Kindle Fire

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 here.

Important Note: The -webkit- prefix is required for the CSS3 to be recognized on Chrome and Kindle Fire. The newer gradient specification that uses a different syntax does not yet render on the Kindle Fire.
Share/Bookmark

June 11, 2012

Embedding Fonts in Kindle eBooks


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



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

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 “jailbreaking” the Kindle). Everyone is different. For this reason, this guide discourages defining fonts on eBooks for content text. There is also the matter of contentious and confusing legalities regarding embedding fonts in eBooks. However, if you are determined to define a font for your content, it is possible to do so with the Kindle Fire.

The Core Kindle Fonts

The older e-ink Kindles and Kindle for iOS support two types of fonts: Palantino and Courier New (a mono-spaced font). Font embedding is not allowed; therefore, there is not much selection.
The two fonts of the e-ink Kindle/Kindle for iOS
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:
  • Georgia (the default)
  • Caecilia
  • Trebuchet
  • Verdana
  • Arial
  • Times New Roman
  • Courier
  • Lucida
Fonts Supported Natively by Kindle Fire

To change fonts using CSS, here is the basic syntax for the property/value combination:
font-family: "Font Name", "Fallback Font", "Another Fallback Font";
Note that the quotes are required on the font name if it has a space within its name, (e.g. "Times New Roman"). Also, ensure that you correctly capitalize the font name per the list above. It is standard practice to include "fallback fonts" in font-family 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. "serif", "sans-serif", or "monospace").
As an example, suppose we wanted a paragraph to have the Courier typeface with some Verdana inside. Some example CSS would be as follows:
p.courier
{
font-family: "Courier", monospace;
}

span.verdana
{
font-family: "Verdana", sans-serif;
}
Different Font Examples on the Kindle Fire

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.

Important Note: Due to anomalies in the Kindle Fire Previewer device, some typical fonts such as "Comic Sans" and "Helvetica" 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.

Embedding Fonts

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. Beware. 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 Font Squirrel website. 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.

Say you want to change the headings of your eBook to a font from an excellent open-source foundry, such as The League of Moveable Type. Let's try the Orbitron font to make our chapter headings more fancy. You need to declare the new font with an @font-face 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.

For this example, the Orbitron otf font has a filename of orbitron-medium.otf and is located in the same directory as the CSS file. To be able to use this font, the CSS is as follows:
@font-face
{
font-family: "My Awesome Font";
src: url("orbitron-medium.otf");
}
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 h2 headings would simply look as follows:
h2
{
font-family: "My Awesome Font", "Helvetica", sans-serif;
font-size: 1.5em;
text-align: center;
}
Embedded Font in Kindle Fire

Important Note: You also have to include the font file in the eBook package. This will be discussed later in the guide.
Share/Bookmark

June 1, 2012

Borders, Rounded Corners, and Box Shadows for eBook Design


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



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

Previous Post: Adding Images

Now that you have a solid understanding of HTML and CSS, it is time to get into some of the bells and whistles. The CSS3 specification 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.

Borders


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, but not the margin area.

There are three main CSS properties when working with borders to define the thickness, style, and color of the border. The CSS properties are border-width, border-style, and border-color. 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 border-left-width, border-top-style, border-bottom-color, etc.

The values of the border properties are fairly straightforward. border-width is defined in pixels, border-style can be solid, dashed, dotted, and a few others, and border-color is simply one of the hexadecimal color codes or predefined names.

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:
img#redborder
{
border-width: 2px;
border-style: solid;
border-color: red;
}

p#dashedborder
{
border-width: 1px;
border-style: dashed;
border-color: black;
padding: 5px;
margin: 1em;
}
Borders on the Kindle Fire
When working with borders that enclose text, make sure that you add a bit of padding in your CSS. Otherwise, the inner edge of the border will butt up right against the text, creating less-than-pleasing results.

Tip: There is a shorthand way to define borders in your CSS. You can simply write three values in one declaration with the following syntax: border: width style color;. As an example for the image above, the CSS would become border: 2px solid red;. You can also use this short-hand if you only want to style one leg of your border (e.g. border-right: width style color;).

Rounded Corners


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, rounded corners require just one line of CSS for eReading devices and web browsers that support CSS3. To make the CSS box have rounded corners, you simply use the following declaration: border-radius: #px;, where the # value is the radius of the rounded portion of each corner. Additionally, you can specify different values for each corner with the properties border-top-left, border-top-right, border-bottom-right, and border-bottom-left.

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:
p#dashedborder
{
border-width: 1px;
border-style: dashed;
border-color: black;
padding: 5px;
margin: 1em;
border-radius: 10px;
}
Rounded Corners on Kindle Fire
The 10px value may not be rounded enough for your liking, so please feel free to experiment by adjusting the radius value of the corner.

You can use the border-radius 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:
p#graycallout
{
background-color: #999999;
padding: 5px;
margin: 1em;
border-radius: 15px;
}

Paragraph with Rounded Corners on the Background

On many CSS3 properties that are discussed online, you may see what are known as "vendor prefixes." Instead of the property border-radius, the property is written as -webkit-border-radius (for Webkit-based browsers like Safari and Chrome) or -moz-border-radius (for Gecko-based like Firefox). These prefixes permit designers to specify different values for different web browsers while all the titans of the tech industry agree on a unified standard. 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:
border-radius: 10px;
-webkit-border-radius: 10px;
Although, the Kindle Fire supports the border-radius property without the -webkit- prefix at the time of this writing.

Box Shadows


Another design nicety that used to be a difficult task is box shadows—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:
-webkit-box-shadow: [horizontal offset] [vertical offset] [blur distance (optional)] [color];
The four values specified must be separated by spaces, not commas. 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 -webkit- prefix is required for the CSS to be recognized on the Kindle Fire. As with the border-radius property, it is permissible and recommended to include a CSS declaration without the -webkit- prefix in order to support eReading devices not utilizing the Webkit engine.

An example of a red box shadow that is dropped down and to the left of a box would be as follows:
p#redboxshadow
{
background-color: red;
padding: 5px;
margin: 1em;
border-radius: 15px;
-webkit-border-radius: 15px;
box-shadow: -10px 10px 10px #999;
-webkit-box-shadow: -10px 10px 10px #999;
}
Box Shadow Example on Kindle Fire

This guide provides the most basic way to implement a box shadow, but there are many more options such as creating inner shadows, fine-tuning the "spread" of the shadow, and other tricks.

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.

Next Post: Changing Fonts
Share/Bookmark

April 28, 2012

Adding Images to Your Kindle eBook


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



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

Previous Post: Page Breaks

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

Styling Images (All Kindle Devices)


The e-ink Kindles and Kindle for iOS can only support images as, essentially, a block element. It is not possible to wrap text around an image, which is also known as "floating." However, care should be taken to ensure that the image is the right size, that it is properly aligned in the viewport, and perhaps it has a caption if needed. Recall the proper HTML markup for an image:
<img src="tester.jpg" alt="Centered Baby Pic" width="134" height="200" />
In this case tester.jpg is a 134px wide/200px high image located in the same directory as our HTML file. Do not neglect to add the alt attribute or your HTML will fail EPUB validation. Please also recall that img elements should not appear on their own in your HTML markup, and they should be wrapped in a block element (typically <p>…</p> 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:
<p><img alt="Centered Baby Pic" height="200" src="tester.jpg" width="134" />Pic with Caption That Has No CSS</p>
Example of Poor Image Layout with no CSS

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

Some example CSS for images that functions well on all Kindle devices is as follows:
p.imgcentered
{
text-indent: 0;
margin: 1em 0 0 0;
padding: 0;
text-align: center;
font-size: 0.8em;
}
And the HTML:
<p class="imgcentered"><img src="tester.jpg" alt="Centered Baby Pic" width="134" height="200" /><br />Centered Pic</p>
Properly Centered Image with Caption Below

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

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

Adding Borders to Images (Kindle Fire Only)


You may want to create a border around an image just so that your readers can easily distinguish it from textual content. Creating borders around images is very simple and done in the same fashion as a block element. It is also possible to add a drop shadow utilizing CSS3 properties and values, and you will learn more about that in the Advanced CSS section. Here is some example CSS to add a simple red border around an image:
p.imgcentered img
{
border-width: 2px;
border-style: solid;
border-color: red;
}
Image with a Border in Kindle Fire
Tip: You can use the shorthand CSS property border to include all three of these styles in one declaration. In this example, the declaration would be border: 2px solid red;.

Understanding Floating (Kindle Fire Only)


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

Suppose you want to have an image floated to the left with text wrapped around it. Some example CSS would be as follows:
p.imgleft
{
text-indent: 0;
margin: 1em 0 0 0;
padding: 5px;
text-align: center;
font-size: 0.8em;
float: left;
}
And the HTML:
<p class="imgleft"><img src="tester.jpg" alt="Floated Left Baby Pic" width="134" height="200" /><br />Floated Left Pic</p>
<p></p>
 Image Floated to the Left on the Kindle Fire
You will notice that padding was added to the paragraph element that was floated. This ensures that the text that wraps around it does not directly butt up against the image. Also, the floated element is placed before the content that will wrap around it.

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

Floated Box Expands Based on Caption Length
If you wish to avoid this problem, you can declare the width property of the floated element. This will ensure that the text wraps to the next line.

Clearing the Float (Kindle Fire Only)


Floating works well if the text wrapping around the image is long enough so that the height of its box is longer than the height of the image box. However, if you have a paragraph element that is short, the next paragraph element will also continue to wrap around the floated element. This may not be the design that you intended. Observe the following CSS for an image floated to the right:
p.imgright
{
text-indent: 0;
margin: 1em 0 0 0;
padding: 0 0 0 5px;
text-align: center;
font-size: 0.8em;
float: right;
}
And the HTML:
<p class="imgright"><img src="tester.jpg" alt="Floated Right Baby Pic" width="134" height="200" /><br />Floated Right Pic</p>
<p>A very short first paragraph that is too short to get around the image.</p>
<p>The next paragraph - not clearing the float!</p>
Example of Not Clearing the Float
The fact that both paragraph elements are wrapped around the image is not a bug in the Kindle Fire. All markup and content in the HTML following a floated element will try to wrap around it, unless you clear the float. Clearing is done with the CSS declaration clear: both;, and it ensures that nothing is to the left or the right of that selected element. In this case, you want to clear the float on the second paragraph to ensure that it appears below the image floated to the right. Some example CSS to add to the preceding example:
p.clearit {clear: both;}
Some example HTML that alters the second paragraph:
<p class="clearit">The next paragraph - clearing the float and then some more!</p>
Example of Clearing the Float
Perpetual worrywarts like to say that eBooks will never be the same as print books due to the lack of good methods to layout the images in reflowable content. However, HTML and CSS provide powerful tools that allow you to layout images in a variety of different ways (particularly on the Kindle Fire). Take the time to experiment with your presentation and content, and you will distinguish yourself as a professional eBook designer.

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