Fix the Kindle Paperwhite Bug

By Masha du Toit

Some ebooks, when viewed on the Kindle Paperwhite, have a really small font size that cannot be changed.  In many cases the font type cannot be changed either. For example, the book should look like this:

But on a Kindle Paperwhite it looks like this, with a small font that cannot be changed:

What causes the Paperwhite Bug?

This bug is caused by an error in the book’s Cascading Style Sheet (CSS). The CSS is the bit responsible for font size, paragraph spacing and all the other presentation details. Where other reading devices can cope with this particular error, it seems that the Paperwhite -- as well as some of the older Kindles -- cannot and the result is the messed up font sizing.

What causes the CSS error?

In most cases the problem seems to be Microsoft Word or OpenOffice. Both of these programs were designed with print in mind, and the file they generate specify font size in “points” eg. a heading might be set at a size of 18 pt. eReaders cope better with font size set in relative units such as “em” or “%”

This error can also happen when the book is generated by the Windows version of Scrivener. Apparently the newest beta release has dealt with this bug. Read about that here http://www.literatureandlatte.com/forum/viewtopic.php?f=34&t=21207

How to fix the error in a Word or OpenOffice document

Software you may need.

These are all free:

Step 1: Save as HTML

  1. Make a copy of your document in case something goes wrong and you need a backup :)
  2. Save the file as “filtered HTML” by going File > Save As and choosing “Web page, filtered (*.htm;*.html)”  
  3. Open that HTML page in a text editor. You can use Notepad if you have it, or a nice alternative is JEdit, see the download link above.

    Below is a screenshot of an HTML ebook open in JEdit. See that tag at the top that says <style>? That marks the beginning of the CSS information for this book. If you scroll down, you will find the closing </style> tag that marks the end of the CSS.

Step 2: Find the errors

Now you will identify anything that causes a problem.  (In the following examples, “xxx” is used as a placeholder for the actual value which may vary from book to book.)

There are three patterns to look for.

 @font-face

        {xxxxx:xxxxx;

        xxxxx:xxxxx;}

        font-size:xx.0pt;

        font-family:"xxxxx"; 

Below is the entire CSS of the example file, with the errant bits highlighted.

As an aside: this CSS example contains a lot of redundant and just plain unnecessary CSS that should also be removed in case it causes problems some time in the future. At the end of this article there are links to tutorials that will help you write clean, future-proof CSS. But for the moment lets just concentrate on the bits that are actually errors :)

<style>

<!--

 /* Font Definitions */

 @font-face

        {font-family:SimSun;

        panose-1:2 1 6 0 3 1 1 1 1 1;}

@font-face

        {font-family:Mangal;

        panose-1:2 4 5 3 5 2 3 3 2 2;}

@font-face

        {font-family:"Microsoft YaHei";

        panose-1:2 11 5 3 2 2 4 2 2 4;}

@font-face

        {font-family:"\@Microsoft YaHei";

        panose-1:2 11 5 3 2 2 4 2 2 4;}

@font-face

        {font-family:"\@SimSun";

        panose-1:2 1 6 0 3 1 1 1 1 1;}

 /* Style Definitions */

 p.MsoNormal, li.MsoNormal, div.MsoNormal

        {margin:0cm;

        margin-bottom:.0001pt;

        font-size:12.0pt;

        font-family:"Times New Roman";}

h1

        {margin-top:12.0pt;

        margin-right:0cm;

        margin-bottom:6.0pt;

        margin-left:21.6pt;

        text-indent:-21.6pt;

        page-break-after:avoid;

        font-size:16.0pt;

        font-family:Arial;}

p.MsoCaption, li.MsoCaption, div.MsoCaption

        {margin-top:6.0pt;

        margin-right:0cm;

        margin-bottom:6.0pt;

        margin-left:0cm;

        font-size:12.0pt;

        font-family:"Times New Roman";

        font-style:italic;}

p.MsoList, li.MsoList, div.MsoList

        {margin-top:0cm;

        margin-right:0cm;

        margin-bottom:6.0pt;

        margin-left:0cm;

        font-size:12.0pt;

        font-family:"Times New Roman";}

p.MsoBodyText, li.MsoBodyText, div.MsoBodyText

        {margin-top:0cm;

        margin-right:0cm;

        margin-bottom:6.0pt;

        margin-left:0cm;

        font-size:12.0pt;

        font-family:"Times New Roman";}

p.MsoBodyTextIndent, li.MsoBodyTextIndent, div.MsoBodyTextIndent

        {margin-top:0cm;

        margin-right:0cm;

        margin-bottom:6.0pt;

        margin-left:14.15pt;

        font-size:12.0pt;

        font-family:"Times New Roman";}

p.Heading, li.Heading, div.Heading

        {margin-top:12.0pt;

        margin-right:0cm;

        margin-bottom:6.0pt;

        margin-left:0cm;

        page-break-after:avoid;

        font-size:14.0pt;

        font-family:Arial;}

p.Index, li.Index, div.Index

        {margin:0cm;

        margin-bottom:.0001pt;

        font-size:12.0pt;

        font-family:"Times New Roman";}

@page Section1

        {size:595.3pt 841.9pt;

        margin:2.0cm 2.0cm 2.0cm 2.0cm;}

div.Section1

        {page:Section1;}

 /* List Definitions */

 ol

        {margin-bottom:0cm;}

ul

        {margin-bottom:0cm;}

-->

</style>

Step 3: Fix the errors

The simplest fix is to simply delete the incorrect CSS.

An alternative is to delete all the lines that specify “font family”, and to edit the “font-size” so that it uses “em” instead of “pt”. To convert from points to em, simply divide the pt size by 16.

So for example, you could change

font-size:12.0pt;

To the equivalent em size:

font-size:0.75em;

Step 4: Test in the Kindle Previewer


Edited to add: Apparently the Kindle Previewer for some older Mac OS versions don’t include the Paperwhite view, in which case you will not be able to do this step.

  1. Make sure you have the latest version of the Kindle Previewer -- 2.71 or later. Earlier versions did not show the Paperwhite bug. (You will find the download link earlier in this article)
  2. Open the Previewer
  3. In the “Settings” section in the lower right, set the “Set Default Device Mode” menu to “Paperwhite”. You can always change this to another device again later.
  4. Go File > Open Book and browse to where you’ve saved your HTML.
  5. You may get error messages -- ignore these for now.
  6. You should now see your book in the Previewer, and be able to see if you still have the Paperwhite bug.

Step 5: Turn it into an ebook again

You can upload the HTML file directly to KDP, but unless you know what you are doing that can result in other problems. I suggest you use Calibre to convert the HTML file into a Mobi file, following Guido Henkel’s instructions:

http://guidohenkel.com/2011/02/take-pride-in-your-ebook-formatting-part-ix/

NOTE:  Make sure you have downloaded the latest version of Calibre, as otherwise KDP may reject your files.

For a more complete tutorial on creating clean CSS, you can look at his entire tutorial which starts here: http://guidohenkel.com/2010/12/take-pride-in-your-ebook-formatting/

A Beginner's Guide to Amazon.com's Ebook Formats by Masha du Toit is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License.

Based on a work at https://docs.google.com/document/pub?id=1E3vJOdiEq2qLiN8TBzgz70HuxpjMXP1-u4tnpLttzBQ