Kindle for iOS (AZK format) - Layout issues

[heulwen.jones]

Hi there,

I have layed out a reflowable ebook which looks good on Kindle devices (at least the later KF8 devices, and its OK on older MOBI devices - I think I can tweak this further for Kindle MOBI using media queries if required).

However in the Kindle for iOS App (eg. on iPad) some key formatting is lost:
1. Fonts aren't embedding;
2. TOC 'min-width' not working,
3. 'min-width' and superscript issue with numbers at beginning of paras
4. Image sizing not working


1. Fonts aren't embedding correctly
ie. Times and Palatino fonts are being displayed as Georgia, even when I change my setting on the iPad to "Publisher Font"?

2. TOC 'min-width' layout not working
e.g. in the example below the spacing between the number 1:4 and the text "Important note to reader" is lost as is the left indent.

XHTML:
<p class="Template-Only_TOC-4"><a href="5.xhtml#_idTOCAnchor-9"><span class="Hyperlink-TOC-Black"><span class="TOC-4-Spacer">1:4 </span>Important note to reader</span></a></p>

CSS:
.TOC-4-Spacer{
min-width:1.15em;
display:inline-block;}

.Template-Only_TOC-4{
-epub-hyphens:none;
-webkit-hyphens:none;
font-family:Times, serif;
font-size:0.875em;
font-style:normal;
font-weight:normal;
line-height:1.143;
text-align:left;
text-indent:-1.15em;
margin-bottom:.4em;
margin-left:3.3em;
margin-right:0;
margin-top:0;
}

3. Also having the 'min-width' issue as well as other issues at the beginning of each para.
Each para has a number at the start of it that's basically displayed as a superscript, at a smaller size and indented. All this formatting is lost so the number displays too large, it sits at the bottom rather than top of the line and there is no indent. The code is:

XHTML:
<p class="Body-Para"><span class="ParagraphNo">130</span>Indeed, as I pointed out in chapter… </p>

CSS:
.ParagraphNo{
min-width:3.6em;
font-family:Times, serif;
font-size:.6em;
font-style:normal;
font-weight:normal;
display:inline-block;
text-align:right;
padding-right:.2em;
vertical-align:text-top;
position:relative;
top:-.75em;
}

.Body-Para{
text-align:left;
/*'auto' hyphenation turned off when text not justified*/
-epub-hyphens:manual;
font-family:Times, serif;
font-size:0.95em;
font-style:normal;
font-weight:normal;
line-height:1.287em;
text-align:left;
/*text-indent was 2em; now done thru ParagraphNo Style */
text-indent:0em;
margin-top:0;
margin-bottom:0;
orphans:2;
widows:2;
}

4. Image sizing not working You'll see in the example below that the width is actually set by the "_idGenPageitem-22" class. All other classes have width set to 100% including "ImageClass-Width". So it seems perhaps the image isn't 'obeying' the width of the enclosing DIV?

XHTML
<div class="Image-and-Caption-Object" style="page-break-inside: avoid"><div class="Image-Object _idGenPageitem-22">
<img class="ImageClass-Width" src="image/CloseUpOfFreedom_TxtCo_WordWEB.jpg" alt="" />
</div>
<p class="ImageCaption-Blank">*</p>
</div>

CSS

div._idGenPageitem-22{
width:80%;
margin-left:auto;
margin-right:auto;
text-align:center;
}


Are these known issues on Kindle for iOS? Any ideas how to solve them or work around them?

Many thanks in advance.

Heulwen

[dgatwood]

Have you run CSSLint on the stylesheet?

There's a narrow chance that some of the special characters (hyphens and underscores) in the class name might be making it unhappy.

Beyond that, it's probably a bug. Have you reported it to KDP yet?

[Hitch]

Originally Posted by dgatwood

Have you run CSSLint on the stylesheet?

There's a narrow chance that some of the special characters (hyphens and underscores) in the class name might be making it unhappy.

Beyond that, it's probably a bug. Have you reported it to KDP yet?

1. What generation iPad are you viewing this on?
2. Are you transferring the azk via USB? (If no, then do that), and,
3. You are assuming that the K4IOS is working at KF8 level, by using min-width, fonts, etc.

In the case of the last, iOS is always problematic, in that it may/may not recognize media queries for KF7 styling, and "try" to use the KF8 styling, but do it improperly, e.g., the min-width settings. You shan't get the fonts.

I'm inferring from your post that prior to this, you've basically not-yet-tackled the KF7 device issues (e.g., back to min-width and all that). Try creating all your KF7 media queries, regenerate the file, transfer it only using the USB to iTunes and thence to K4iOS (otherwise, you will get a false result), and see if that starts to get you closer to where you want to be. Don't forget: there are millions of KF7 devices out there, and they are still being sold. Even if you weren't having this issue with K4iOS, you'd have similar problems on the DX, etc. (images and min/max width).

Hopefully, that helps you, but as I said: K4iOS does not always "recognize' or use the media-queries that it should use. It's a bastard child--it can display FF books, which are KF8, with fonts, etc., but in reflowable, it's a whole other story.

Hitch

[heulwen.jones]

Hi there,

I posted the original question here about a year and a half ago, and just wanted to let people know that most the issues are now resolved.

It seems Kindle for the iOs has improved significantly in last 6 months so now when I create a AZK file and side load it to my iPad for testing most formatting issues are resolved. I also did some minor tweaking of my file to help, including using true type instead of open type fonts, tweaked a couple of media queries and removed a couple of invalid CSS Properties (I fixed a couple of warnings that were coming up in the Kindle Previewer conversion window).

I still have two remaining issues which I'll post as separate questions on the forum:
* image sizing is not working - iOS/AZK appears to not like image sizing set via percentages; and
* line height incorrect/tighter for quotes within text (ie. span tags)

Thanks for everyone's help and feedback.

Heulwen