View Single Post
Old 01-16-2012, 07:41 PM   #1
NoYouDo
Junior Member
NoYouDo began at the beginning.
 
Posts: 1
Karma: 10
Join Date: Jan 2012
Device: none
KindleGen Adding Line Breaks after every <a> and <span>

I've spent all day on this and have not been able to make ANY progress!

I have an enhanced (video) epub that passes ePubChecker verification (minus the html 5 video element), it looks great on an iPad and decent on a Nook. My client also wants it for the Kindle (enhanced version for the Kindle app) so I've been using KindleGen v2 (and v1) to create the .mobi with no errors or warnings. It's all great, right?! Well when I open the .mobi in Calibre or Kindle Previewer, it looks soso. I then uploaded it to my iPad (via iExplorer) to view in the Kindle App and it looks horrible!

So to investigate what's going on I "exploded" the .mobi to take a look at the .html. It's an absolute nightmare with empty <div> causing line breaks added before and after every <a> and <span>. I've tried cleaning up the CSS (which is already minimal) and it helped with a few other cosmetic issues, but hasn't done a think for the line breaks from all the added <div>s.

I'm at a complete loss. Anyone have any suggestions?!

Here is a sample of the html being generated for a "List of Graphics":

Code:
<mbp:pagebreak/><a id="filepos12242" /><h2 height="0">List of Graphics</h2><div height="0"></div> <div height="0"> <div height="0">Introduction</div><div height="0"></div> <div height="0"><div height="0"></div><a href="#filepos625354" ><font color="#7f0000">GDP Growth, Kazakhstan Relative to Advanced Economies, 1994-2012</font></a><div height="0"></div></div><div height="0"></div> </div><div height="0"></div> <div height="0"> <div height="0">Chapter 2.</div><div height="0"></div> <div height="0"><div height="0"></div><a href="#filepos66058" ><font color="#7f0000">Human Development Index, Asia and the Pacific, 2010</font></a><div height="0"></div></div><div height="0"></div> </div><div height="0"></div> <div height="0"> <div height="0">Chapter 3.</div><div height="0"></div>
That originally looked like this:

Code:
<h2 class="header-two">List of Graphics</h2>

  <div class="tableList">
    <div class="list-level-one">Introduction</div>
    <div class="list-level-two"><a href="../Text/Appendix.xhtml#graphic-00-01" class="toc-link">GDP Growth, Kazakhstan Relative to Advanced Economies, 1994-2012</a></div>
  </div>

  <div class="tableList">
    <div class="list-level-one">Chapter 2.</div>
    <div class="list-level-two"><a href="../Text/Chapter02.xhtml#graphic-02-01" class="toc-link">Human Development Index, Asia and the Pacific, 2010</a></div>
  </div>
NoYouDo is offline   Reply With Quote