I create ePubs using a custom script and HTML, resulting in perfectly valid, attractive ePub 3.0 files.
Using either Amazon's Kindle Previewer or Calibre to convert to Kindle format, I still have no issues - they display perfectly on e-Ink and Fire devices.
I'm aware that Kindle for iOS is a different matter, and it reverts to old mobi format.
I've then managed to correct several of the flaws by using an amzn-mobi @media query, but there are some that are still puzzling me. If anyone could throw any light on why this XHTML/CSS code (ePub) gets converted to the following HTML (found by using the mobi unpack tool), I'd be very grateful. Specifically, it's turning a text-indent:30px paragraph definition into a centre-aligned blockquote. Which I just don't understand.
HTML snippet:
Code:
<blockquote><p>Surely he has borne our griefs
</p><p class="poetryin">and carried our sorrows;
</p><p>yet we esteemed him stricken,
</p><p class="poetryin">smitten by God, and afflicted.
</p><p>But he was pierced for our transgressions;
</p><p class="poetryin">he was crushed for our iniquities;
</p><p>upon him was the chastisement that brought us peace,
</p><p class="poetryin">and with his wounds we are healed.<sup class="footnote"><a href="#fn--38" id="fnref--38" epub:type="noteref">38</a></sup>
</p></blockquote>
entire CSS @media query (there's other definitions further up, but these are the relevant ones):
Code:
@media amzn-mobi {
h1, h2, h3, h4, h5, h6 {
color: #000;
}
h1 {
margin-bottom: 30px;
margin-top:20px;
color: #1c1c1c;
font-size: 30px;
line-height: 14px;
clear:both;
}
h2 {
margin-bottom: 15px;
margin-top:30px;
color: #1c1c1c;
font-size: 22px;
line-height: 14px;
}
h3 {
margin-bottom: 15px;
font-size: 18px;
}
h4 {
margin-bottom: 15px;
font-size: 14px;
}
p {
text-indent: 0;
margin: 20px 0;
font-size: 12px;
}
sup, sub {
line-height: 12px;
}
ol, ul {
margin: 20px 15px;
}
blockquote {
margin: 20px;
}
.poetryin {
text-indent: 30px;
text-align: left;
}
.toc-list-epub {
list-style: disc;
margin-top: 15px;
margin-bottom: 0px;
}
.toc-list-epub li {
display: block;
}
.toc-list-epub .heading {
margin-top: 15px;
margin-bottom: 0px;
display: block;
}
.bibliography {
padding-left: 40px;
text-indent: -40px;
}
.mobihide {
display: block;
}
}
Resulting mobi HTML (carriage returns inserted for clarity):
Code:
<blockquote height="2em" width="0pt">
<font color="#444">
Surely he has borne our griefs
</font>
</blockquote>
<blockquote height="1em" width="1em" align="center">
<font color="#444">
and carried our sorrows;
</font>
</blockquote>
<blockquote height="1em" width="0pt">
<font color="#444">
yet we esteemed him stricken,
</font>
</blockquote>
<blockquote height="1em" width="1em" align="center">
<font color="#444">
smitten by God, and afflicted.
</font>
</blockquote>
<blockquote height="1em" width="0pt">
<font color="#444">
But he was pierced for our transgressions;
</font>
</blockquote>
<blockquote height="1em" width="1em" align="center">
<font color="#444">
he was crushed for our iniquities;
</font>
</blockquote>
<blockquote height="1em" width="0pt">
<font color="#444">
upon him was the chastisement that brought us peace,
</font>
</blockquote>
<blockquote height="1em" width="1em" align="center">
<font color="#444">
and with his wounds we are healed.
<sup><a id="filepos407068" /><small><a href="#filepos423743"><font size="1"><font color="#444">38</font></font></a></small></sup>
</font>
</blockquote>