ePub to (old) Mobi has some strange quirks

[freney]

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:

<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):

@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):

<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>

[kovidgoyal]

old mobi has no support for css. margins get converted into blockquotes as the closest possible approximation. old mobi is based off html 3.2.

[freney]

Yep, I realise that. Thanks for the quick reply.

But then some types of paragraphs get converted into centre-aligned blockquotes, while others aren't. Any idea either why that happens, or how I could code the original ePub to get a better result?

[kovidgoyal]

First off, calibre has no support for the @media amzn-mobi that is kindlegen specific hack. So remove that and replace it with normal CSS rules. If something is centered in the mobi it will have been centered in the input document as well.

[freney]

When I remove the amzn-mobi section, the formatting in the resulting mobi file is *way* worse. I realise it's a specific hack for kindlegen, but even in normal calibre processing it does make a difference—I checked by making one of the headings color:red and both Calibre and Kindlegen processing respect that set of rules.

And the *only* situation the resulting paragraphs are centre aligned is in the old mobi output: ePub, new kindles, eInk kindles, everything else formats it properly (i.e. a blockquote with a <p> paragraph indent). I'm at a total loss as to where it gets the centre instruction from, as there is literally not a single relevant style in the CSS anywhere that has a centre style.

[kovidgoyal]

Then it is not a center instruction, it simply looks that way because blockquotes in old MOBI have equal left and right margins. So in mobi you can either have equal side margins or no margins at all. The choice is yours.

[freney]

This is the HTML inside the mobi file, retrieved through mobi unpack:

<blockquote height="1em" width="1em" align="center">
<font color="#444">
and carried our sorrows;
</font>
</blockquote>

and the one without the paragraph indent:

<blockquote height="2em" width="0pt">
<font color="#444">
Surely he has borne our griefs
</font>
</blockquote>

It's definitely center aligned.

[kovidgoyal]

Conversion is not magic, if it has align="center" in the output then it has either text-align:center or margin-left: auto and margin-right:auto in the the input.

[freney]

Ah, ok, "margin-left: auto and margin-right:auto" might be the trick. It's definitely not text-align:center, so I'll go hunting. Thanks.

[freney]

Yep: there was a margin:auto definition in the very first p style.

Phew, thanks for that. It was driving me nuts.