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