View Single Post
Old 06-10-2014, 04:04 AM   #1
freney
Junior Member
freney began at the beginning.
 
Posts: 6
Karma: 10
Join Date: Jun 2014
Device: iPad & Kindle
ePub to (old) Mobi has some strange quirks

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>

Last edited by freney; 06-10-2014 at 04:12 AM.
freney is offline   Reply With Quote