Friday, 6 September 2013

HTML and CSS Tricks to Improve the Look of Your Kindle Book

                                                    
Kindle does a pretty good job of converting Word 97 - 2003 documents if you use the right formatting. But the process isn't perfect. You'll find that some HTML knowledge is very useful for providing a friendly user experience on Kindle.
After you've uploaded your file, Kindle converts it to HTML. You can download the zip file to your computer. Then unzip it to a folder with the same name as Kindle gave the zip folder.
When you open the folder, you will see a list of files. The one you want is the one with the extension.html.
Open this file in a text editor. My favorite is Notepad++. It uses color to identify opening and closing tags, so it's easier to figure out what's gone wrong if you miss a piece of coding.


The HTML Kindle uses is simple once you know what you are looking at. The first thing you will see is the opening HTML tag <html>. This is followed by <head>. There may be a pair of <title> tags. These will then be followed by the document's CSS sheet.

Unless you are an HTML expert, scroll down until you see text that you recognize from your book. This where you'll start comparing the results on the Kindle viewer with the HTML code.

It's normal to see each paragraph open with something such as <p class="western"> if you've chosen to indent paragraphs. Each paragraph must close with </p>.

Tables don't always translate well. This means you may have to manually correct the code so the table views properly. Check to see if Kindle has given the table a border. You will recognize this by the opening code for the table which should look something like this: <table border="1" border="7" cellspacing="0" frame="ABOVE" rules="GROUPS" align="left">

Choose a consistent set of values so all tables in the document look the same. For example, you may prefer a heavier line. Increase the table border to "2". Or you may not want a line. Use "0" as your value. Cell padding and cell spacing can also be adjusted. You can center the table by changing the alignment to align="center". Kindle guidelines say to avoid right alignment.

Use basic table HTML. The <table> tag and all the properties available for formatting the table should open the table. The </table> tag must close the table at the very end. Otherwise, it won't display properly.

Kindle inserts <col width="value"/> after the table tag for each column in the table. Don't touch this.

Then the table formatting begins with <tbody>. For ease of keeping track of your opening and closing tags, start the table row <tr> on a new line. <tr valign="BOTTOM" places text at the bottom of the cell. TOP places text at the top and CENTER places text in the middle of the cell.

Table data is indicated by <td></td> opening and closing tags. If you have an orphan line, make sure you aren't missing a <td></td> pair. When all the data for the columns for one line has been entered, close the table row with </tr>.

In Kindle, you must indicate the tr property on each line, or create a CSS entry to handle all tables in the document. If you have extensive tables, with varying display needs, it's easier for a novice to just change the few lines that may not be displaying properly.

If you are CSS literate, then consider creating a style class for your tables, so table rows have a consistent appearance across the entire document. This saves the time required to manually change all the code. In Notepad++, you can replace all the messy tr code using the search and replace feature.

Where the usual inconsistencies occur is in the styling of paragraphs. If Kindle hasn't assigned a p style for tables (p) create one in the CSS sheet. This will control the way text looks in the tables without changing the appearance of the body text. Tables need extra space above and below the text for easy reading. You can create a paragraph style just for tables that adds this needed padding.

Much of this hassle can be prevented by formatting your Word document correctly from the beginning. Create styles for each variation of 'normal.' This will ensure that Kindle has the appropriate style instructions to generate the differing font sizes, paragraph and table styles used throughout your book.


No comments:

Post a Comment

Popular Posts