Posted on

Kindle Previewer, What EXACTLY is it?

The Kindle Previewer is a program provided by Amazon for ebook designers to proof their work.

Kindle Previewer is a graphical user interface tool that emulates how books display across Kindle devices and apps. Kindle Previewer makes it easy for publishers to preview the layout of a book and make sure its text displays properly for any orientation or font size to ensure publishers produce and submit the highest quality Kindle books.

As a best practice we recommend you use the Kindle Previewer to review how their books look across all Kindle devices and apps.

How accurate is the Kindle Previewer?

In my experience the Kindle Previewer is 90% accurate. I use it extensively when formatting ebooks; however, use actual devices for the final proofs. And you should, too. While the Kindle Previewer is close — it is not perfect. Viewing your file on an actual device or app is your best avenue for the most accurate file.

If you do not own a device, someone you know must have one. A friend, your high school, etc. I personally use the following before I sign-off on my projects:

Apps

Kindle Previewer
Kindle Reader for Mac
Sony Reader for Mac
Adobe Digital Editions

Devices
Ipad
Kindle Fire
Kindle 3

Mobi versus KF8

Even though Amazon Kindles and Apps display the MOBI format, you may notice your ebook designers starting to format for MOBI and KF8. The Kindle Fire allows a lot more flexibility in coding (HTML5), while the older Kindles and Apps do not. For this reason it is important to design your book to display well on the Kindle Fire, but then “dummy down” the code to display on all the other devices and apps.

IMPORTANT NOTE: This DOES NOT means you create two different files for upload. Amazon only accepts one file format. They take your ebook and convert it into two different formats – one for MOBI (older Kindles and Apps) and one for Kindle Fire. Both files contain the .mobi extension.

Because Amaozn only takes one file for both displays, this requires some very creative formatting using the @media Query.

Here is a two-page spread form a recent book I designed. See the difference between the Kindle Fire, the Kindle for Ipad App and the Kindle for Mac App.
Note: the Fire and iPad are screenshots from the Kindle Previewer and are 90% accurate.

Kindle Previewer: Kindle Fire

Kindle Fire 2 Page Spread - non-fiction e-book
Kindle Fire 2 Page Spread - non-fiction e-book

Kindle Previewer: Kindle for iPad
(This is the first and third page of Chapter 1)

Kindle for iPad 2-Page Spread - non-fiction e-book
Kindle for iPad 2-Page Spread - non-fiction e-book

Kindle READER: Kindle for Mac

Kindle Reader for Mac: 2-Page Spread - non-fiction e-book
Kindle Reader for Mac: 2-Page Spread - non-fiction e-book

Conclusion

You can see the dramatic differences between the two Kindles. Unfortunately, until Amazon updates their older Kindles and apps to use HTML5, you will need to do be creative in your formatting to produce acceptable files for both formats.

Recommended Reading

Know Your Digital Options
@media Query for Kindle Mobi ebooks

Posted on

Kindle Previewer, What EXACTLY is it?

The Kindle Previewer is a program provided by Amazon for ebook designers to proof their work.

Kindle Previewer is a graphical user interface tool that emulates how books display across Kindle devices and apps. Kindle Previewer makes it easy for publishers to preview the layout of a book and make sure its text displays properly for any orientation or font size to ensure publishers produce and submit the highest quality Kindle books.

As a best practice we recommend you use the Kindle Previewer to review how their books look across all Kindle devices and apps.

How accurate is the Kindle Previewer?

In my experience the Kindle Previewer is 90% accurate. I use it extensively when formatting ebooks; however, use actual devices for the final proofs. And you should, too. While the Kindle Previewer is close — it is not perfect. Viewing your file on an actual device or app is your best avenue for the most accurate file.

If you do not own a device, someone you know must have one. A friend, your high school, etc. I personally use the following before I sign-off on my projects:

Apps

Kindle Previewer
Kindle Reader for Mac
Sony Reader for Mac
Adobe Digital Editions

Devices
Ipad
Kindle Fire
Kindle 3

Mobi versus KF8

Even though Amazon Kindles and Apps display the MOBI format, you may notice your ebook designers starting to format for MOBI and KF8. The Kindle Fire allows a lot more flexibility in coding (HTML5), while the older Kindles and Apps do not. For this reason it is important to design your book to display well on the Kindle Fire, but then “dummy down” the code to display on all the other devices and apps.

IMPORTANT NOTE: This DOES NOT means you create two different files for upload. Amazon only accepts one file format. They take your ebook and convert it into two different formats – one for MOBI (older Kindles and Apps) and one for Kindle Fire. Both files contain the .mobi extension.

Because Amaozn only takes one file for both displays, this requires some very creative formatting using the @media Query.

Here is a two-page spread form a recent book I designed. See the difference between the Kindle Fire, the Kindle for Ipad App and the Kindle for Mac App.
Note: the Fire and iPad are screenshots from the Kindle Previewer and are 90% accurate.

Kindle Previewer: Kindle Fire

Kindle Fire 2 Page Spread - non-fiction e-book
Kindle Fire 2 Page Spread - non-fiction e-book

Kindle Previewer: Kindle for iPad
(This is the first and third page of Chapter 1)

Kindle for iPad 2-Page Spread - non-fiction e-book
Kindle for iPad 2-Page Spread - non-fiction e-book

Kindle READER: Kindle for Mac

Kindle Reader for Mac: 2-Page Spread - non-fiction e-book
Kindle Reader for Mac: 2-Page Spread - non-fiction e-book

Conclusion

You can see the dramatic differences between the two Kindles. Unfortunately, until Amazon updates their older Kindles and apps to use HTML5, you will need to do be creative in your formatting to produce acceptable files for both formats.

Recommended Reading

Know Your Digital Options
@media Query for Kindle Mobi ebooks

Posted on

Kindle Previewer, What EXACTLY is it?

The Kindle Previewer is a program provided by Amazon for ebook designers to proof their work.

Kindle Previewer is a graphical user interface tool that emulates how books display across Kindle devices and apps. Kindle Previewer makes it easy for publishers to preview the layout of a book and make sure its text displays properly for any orientation or font size to ensure publishers produce and submit the highest quality Kindle books.

As a best practice we recommend you use the Kindle Previewer to review how their books look across all Kindle devices and apps.

How accurate is the Kindle Previewer?

In my experience the Kindle Previewer is 90% accurate. I use it extensively when formatting ebooks; however, use actual devices for the final proofs. And you should, too. While the Kindle Previewer is close — it is not perfect. Viewing your file on an actual device or app is your best avenue for the most accurate file.

If you do not own a device, someone you know must have one. A friend, your high school, etc. I personally use the following before I sign-off on my projects:

Apps

Kindle Previewer
Kindle Reader for Mac
Sony Reader for Mac
Adobe Digital Editions

Devices
Ipad
Kindle Fire
Kindle 3

Mobi versus KF8

Even though Amazon Kindles and Apps display the MOBI format, you may notice your ebook designers starting to format for MOBI and KF8. The Kindle Fire allows a lot more flexibility in coding (HTML5), while the older Kindles and Apps do not. For this reason it is important to design your book to display well on the Kindle Fire, but then “dummy down” the code to display on all the other devices and apps.

IMPORTANT NOTE: This DOES NOT means you create two different files for upload. Amazon only accepts one file format. They take your ebook and convert it into two different formats – one for MOBI (older Kindles and Apps) and one for Kindle Fire. Both files contain the .mobi extension.

Because Amaozn only takes one file for both displays, this requires some very creative formatting using the @media Query.

Here is a two-page spread form a recent book I designed. See the difference between the Kindle Fire, the Kindle for Ipad App and the Kindle for Mac App.
Note: the Fire and iPad are screenshots from the Kindle Previewer and are 90% accurate.

Kindle Previewer: Kindle Fire

Kindle Fire 2 Page Spread - non-fiction e-book
Kindle Fire 2 Page Spread - non-fiction e-book

Kindle Previewer: Kindle for iPad
(This is the first and third page of Chapter 1)

Kindle for iPad 2-Page Spread - non-fiction e-book
Kindle for iPad 2-Page Spread - non-fiction e-book

Kindle READER: Kindle for Mac

Kindle Reader for Mac: 2-Page Spread - non-fiction e-book
Kindle Reader for Mac: 2-Page Spread - non-fiction e-book

Conclusion

You can see the dramatic differences between the two Kindles. Unfortunately, until Amazon updates their older Kindles and apps to use HTML5, you will need to do be creative in your formatting to produce acceptable files for both formats.

Recommended Reading

Know Your Digital Options
@media Query for Kindle Mobi ebooks

Posted on

How to Embed Fonts in an Epub or Kindle ebook @font-face

Embed Font in e-book
2 page spread of embedded fonts in an epub e-book: Click for larger image, hit the BACK button to return to post.

Licensing Use

IMPORTANT UPDATE: TRAJAN PRO is an Adobe font whose license DOES NOT allow embedding on websites or ebooks using @font-face. See comment section on details and links to Adobe licensing.

When choosing a font to embed, make sure you have the legal right to do so.


Many authors want to spice up their pages by adding attractive typefaces and fonts. This can add a lot of interest to your book IF you don’t overdo it.

What you need to embed fonts

  • Include your fonts in your ebook
  • List your fonts in the CSS first
  • Link to font

Step 1

Finding a Typeface:

Embedding Fonts with @font-face
Embedding Fonts with @font-face

There are literally thousands to choose from and many are free for the using. But is more better? Not always. I find that I stick with about 12 typefaces for page layout. I call them my apostles, and they cover the basics of what I need: serif, san-serif, heavy, thin,fancy, plain, grunge. I recommend you find a few typefaces you like and keep them organized on your computer.


LINGO TO KNOW
Typeface: In typography, a typeface is the visual representation or interpretation of a set of characters; it is their appearance. Each typeface is designed, and there are thousands of different typefaces in existence, with new ones being developed constantly. Wikipedia


Resources: I like to use Linotype (paid) and DaFont.com (free) as my sources for finding typefaces when designing book covers.

TTF or OTF?

Should you use a True Type Font (TTF) or Open Type Font (OTF)? Both should work, but in my testing I found OTF to work better in the long run. (at least for me.)

When I have a TTF I want to use that is being obstinate – not displaying correctly all the time – then I convert it to an OTF.

Resource: Convert your TTF fonts to OTF using this free Online Font Converter, http://onlinefontconverter.com/

Step 2:

Create the Cascading Style Sheet

The style sheet for you file can be either inline or a separate file. I either case, the fonts must be the first items listed. You need one declaration for each font (normal, bold, italic, etc).

CSS example of embedding fonts
CSS example of embedding fonts

LINGO TO KNOW
Cascading Style Sheet: Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation semantics (the look and formatting) of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can also be applied to any kind of XML document, including plain XML, SVG and XUL. Wikipedia


CSS

I prefer to name my fonts without spaces or underscores – just one word. If the name is two or more words then it MUST BE enclosed in quotes.

Example:

font-family: “Font Pro”;

The CSS Code for Font Pro:
Substitute FontPro for the name of your chosen font.


@font-face {

font-family:FontPro;

src: url(../Fonts/FontPro-Regular.otf);

}

@font-face {

font-family:FontProBold;

src: url(../Fonts/FontPro-Bold.otf);

}

Step 3

Applying the font-family to your tags

In your CSS apply the font-family to the tags you want displayed as Font Pro.


h1 {
font-family: “FontPro”;
}

Step 4

Adding the fonts to your ebook ‘package’.

The actual fonts need to be included with the file (.epub or .mobi). I prefer place all my fonts in a separate folder named “Fonts”. If you place them somewhere other than in a font folder then modify the CSS to the correct location.

NOTE: SIGIL automatically puts the fonts in the “Fonts” folder.

SIGIL font folder
SIGIL font folder

Excerpt from: Embedding Fonts: First Steps Supplement

Posted on

Thinking of Ebook Formatting? Know Your Digital Options

Every day I get questions from customers asking about formatting their ebook. This is not unusual as that is what I do, but what is difficult to understand is why they do not understand the medium they are trying to “advertise on.”

“I am viewing my book and there aren’t any spaces between the paragraphs.”

“Why won’t my font display? I have it embedded properly.”

It all comes down to this… readers (people) will read your ebook on a variety of devices and Apps: and every App and Device will display your book DIFFERENTLY — every one.

These ‘concerns’ are valid — but in the first instance, there were spaces between paragraphs — just NOT on the App she was using. This was a flaw with the App itself. Additionally, the font was embedded properly; Adobe Digital Editions refused to display it, while Kindle Fire and the iPad were fine.

Know what you are up against

Digital eBooks. Understand the technology you are considering. eReaders vary, and while you may want your book to appear like a printed book on every device, that just isn’t possible (yet).

Digital books stem from HTML (Hypertext Markup Language). The latest is HTML5. Not all ereaders or Apps utilize HTML5, so you are having to adjust your layout for various e-readers.

Example:

Fixed Layouts. Many Childrens books are fixed layouts. Full page color images with text overlaid. Beautiful on the iPad and Kindle Fire. but this type of format does NOT display on the Kindle. You can only upload ONE file format to Amazon for publishing, so be aware how it will look for BOTH the Fire and basic Kindle.

In Addition iBooks and Kindle have their own twist on the code for fixed layouts — so you have to create two separate files.

This is just one of the frustrations authors and formatters are up against in the ebook formatting world.

Buy a Device

Amazon is the most prominent source of e-books. So, spend a little $ and get the cheapest reader they have. If you are going to sell your wares you want to be able to see how it looks.

Example: If you were to place a classified ad in a newspaper, you would probably buy a newspaper to make sure it is correct, right? Not a preview of the ad, but the actual ad itself.

TV or Radio? You wouldn’t create a radio spot and then not listen to it live on the radio. A lot can happen between the final master tape and the actual airing.

So when you consider publishing in digital form, consider buying an ‘actual’ e-reader device. It not only will help you become more familiar on how digital devices work but will give you a better understanding of what to expect.

Side Note

I realize that it isn’t possible to purchase every e-reader device. And you may think that the reader Apps for your computer or phone would be fine. Well they are… and they aren’t.

For Example:

  • Not ALL e-readers will display embedded fonts
  • Not ALL e-readers will understand the HTML5 or EPUB 3 standards
  • Some Apps fail to display the non breaking space between paragraphs (Kindle for PC).
  • As of today (3/22/2012) only the Kindle Fire is utilizing HTML5 full capabilities: the older Kindles and the Kindle Apps (ie for iPad and iPhone) are lagging behind.)

There is a slew of other issues when comparing e-readers and Reader Apps. Your best bet is to have an actual device and then use Kindle for PC/Mac; Sony or NOOK Reader for PC/Mac, as well as the most recent Kindle Previewer.

CONCLUSION

Purchase a device of your own and find “friends” or colleagues who would be willing to view your book on their devices.

And above all — purchase your own book to make sure the product delivered is flawless.

Another Note: what you see in the Kindle Previewer is not “exactly” how it displays on the Kindle Fire, Kinde, or the Kindle App — it’s close but not exact.


[ORIGINAL POST: UNRULY GUIDES]

Posted on

How to Embed Fonts in an Epub or Kindle ebook @font-face

embed fonts in an ebook
2 page spread of embedded fonts in an epub e-book: Click for larger image, hit the BACK button to return to post.

Licensing Use

IMPORTANT: Many typeface licenses DO NOT allow embedding on websites or in ebooks using @font-face. When choosing a typeface / font to embed, make sure you have the legal right to do so.


Many authors want to spice up their pages by adding attractive typefaces and fonts. This can add a lot of interest to your book IF you don’t overdo it.

What you need to embed fonts

  • Include your fonts in your ebook
  • List your fonts in the CSS first
  • Link to font

Step 1

Finding a Typeface:

Embedding Fonts with @font-face
Embedding Fonts with @font-face

 

There are literally thousands to choose from and many are free for the using. But is more better? Not always. I find that I stick with about 12 typefaces for page layout. I call them my apostles, and they cover the basics of what I need: serif, san-serif, heavy, thin,fancy, plain, grunge. I recommend you find a few typefaces you like and keep them organized on your computer.


LINGO TO KNOW
Typeface: In typography, a typeface is the visual representation or interpretation of a set of characters; it is their appearance. Each typeface is designed, and there are thousands of different typefaces in existence, with new ones being developed constantly. Wikipedia


Resources: I like to use Linotype (paid),  DaFont.com (free) and FontSquirrel.com as my sources for finding typefaces when designing book covers.

TTF or OTF?

Should you use a True Type Font (TTF) or Open Type Font (OTF)? Both should work, but in my testing I found OTF to work better in the long run. (at least for me.)

When I have a TTF I want to use that is being obstinate – not displaying correctly all the time – then I convert it to an OTF.

Resource: Convert your TTF fonts to OTF using this free Online Font Converter, http://onlinefontconverter.com/

Step 2:

Create the Cascading Style Sheet

The style sheet for you file can be either inline or a separate file. I either case, the fonts must be the first items listed. You need one declaration for each font (normal, bold, italic, etc).

CSS example of embedding fonts
CSS example of embedding fonts

LINGO TO KNOW
Cascading Style Sheet: Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation semantics (the look and formatting) of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can also be applied to any kind of XML document, including plain XML, SVG and XUL. Wikipedia


CSS

I prefer to name my fonts without spaces or underscores – just one word. If the name is two or more words then it MUST BE enclosed in quotes.

Example:

font-family: "Font Pro";

The CSS Code for Font Pro:
Substitute FontPro for the name of your chosen font.

@font-face {
font-family:FontPro;
src: url(../Fonts/FontPro-Regular.otf);
}

@font-face {
font-family:FontProBold;
src: url(../Fonts/FontPro-Bold.otf);
}

Step 3

Applying the font-family to your tags

In your CSS apply the font-family to the tags you want displayed as Font Pro.

h1 {
font-family: "FontPro";
}

Step 4

Adding the fonts to your ebook ‘package’.

The actual fonts need to be included with the file (.epub or .mobi). I prefer place all my fonts in a separate folder named “Fonts”. If you place them somewhere other than in a font folder then modify the CSS to the correct location.

NOTE: SIGIL automatically puts the fonts in the “Fonts” folder.

SIGIL font folder
SIGIL font folder

Excerpt from: Embedding Fonts: First Steps Supplement

Posted on

ERROR: Kindle Table of Contents is Missing

QUESTION: I Created my ebook with a linkable table of contents. But when I view it on my Kindle or in the Kindle Previewer, it says the table of contents is missing. What am I doing wrong?

It can be really frustrating to create a table of contents only to have Kindle tell you it is missing. This is a common error. You scream “It does exist. I just created it!”

But did you define it in the content.opf file?

All the elements and structure of your books resides in that little file called the content.opf. To have the ebook recognize your Linkable table of contents, you need to add the SEMANTICS for that page in the reference section. It looks like this:

<reference href=”Text/toc.xhtml” title=”Table of Contents” type=”toc” />

Now, I am not going to go through all the actual code within the content.opf file. I recommend you download the free SIGIL program and let it create the file for you. However, if you REALLY want to learn how to create the content. opf file, then there are plenty of sources on the internet.

EASY SOLUTION

SIGIL, the WYSIWYG e-book editor, is perfect for automatically creating the content.opf file.

  1. Open the file in the SIGIL program
  2. Right click the toc.xhtml page
  3. Select Semantics > Table of Contents
  4. Save your file.

I recommend that any time you make changes to your file — run the TOC Editor again, and save.


Have a question or frustration? Let me know.

Posted on

How to Format Poetry for Ebooks: Hanging Indents

QUESTION: “I have a poetry book I would like to prepare for the Kinde and epub. The problem is when lines are too long and roll over to a second line I need the line to indent slightly so it is easier to follow.”

Poetry is one of the most precise and precious of literary forms. It is also far the least adaptable to the growing e-book market treating a verse as though each line is a paragraph. A three-line stanza can expand to four if a line is too long or a four-line stanza compressed down into a three-line stanza if the second and fourth lines have sharp indentations. (Example: Henry Wadsworth Longfellow’s “Hymn to the Night.”)

Poetry is well suited for electronic media for the most part and I am confident the technical problems with e-readers can be fixed.

Poetry Formatting: the Negative Indent

A critical requirement for poetry is to code an indent for overflow text by setting the left margin to the point where you want the second and following lines to flow.

formatting poetry for ebooks

CSS:

.poem {
text-indent: -2em;
margin-left: 2em
}

The HTML code looks like this:

<p class=”poem”>First line of your poem that is very long so it will drop to a second line that is indented 2em.</p>
<p class=”poem”>The second line of the Poem.</p>

It will appear similar to this on an e-reader screen:

First line of your poem that is very long so it will drop
.    to a second line that is indented 2em
The second line of the Poem.

Posted on

How to Create eBook Fractions for Cookbooks, Recipes using CSS

QUESTION: “I am creating a cookbook and have run into issues using fractions. I would like to know how to create fractions so that they have a consistent look in my ePubs and Kindle Mobi files. One issue I have run into is that some fonts do not support support fractions like 1/3 or 1/16.”

What I have noticed is that many cookbooks (ePub and Mobi) do not seem to follow a strict or uniform usage of fractions: 1/3 will look quite different than 1/2. From a design perspective your ePub Cookbook recipe measurements should all maintain a uniform look if possible.

I wish this were as easy as restricting yourself to specific fonts that DO display fractions. From a design perspective this is the logical solution. Unfortunately you run into issues with standardizing your ePub file for the various eReaders: Nook, Kindle, iPad, etc. Additionally, eReaders allow the user to switch fonts. The key is to be able to maintain a uniform look even when the font is switched.

Create eBook Fractions using HTML Special Characters

You could use a special unicode character to create your fractions. Although there are unicode entities for the most common fractions (1/2, 1/4, etc) there are not unicode entities for all variations of fractions you would find in a recipe.

To ensure consistency, I have found assigning a class to a superscript and subscript element using basic CSS, and defining the font size and vertical alignment, works very nicely.

CSS:

sup.frac {
font-size: 0.6em;
vertical-align: 0.5em;
}
sub.frac {
font-size: 0.6em;
vertical-align: -0.1em;
}


Your HTML code would look like this:

<sup class="frac">1</sup>/<sub class="frac">2</sub>

Slash element “&frasl;”

Try employing the ‘&frasl; entity. This creates a slash character that looks a little more like an actual fraction slash (being slightly more horizontal) and gives the impression that the numerator is “on top” and the denominator is “on the bottom”. The slash can also be represented with decimal entity “&#8260;” and hexadecimal entity “&#x2044;”.

<sup>1</sup>&frasl;<sub>2</sub>

12

More on Special characters >>