Image alignment and spacing

[Derek R]

Hello! I've just posted a message about this in the "Introductions" forum, which is undoubtedly the wrong place, so I'll try here. I appreciate that the subject has almost certainly been covered before, but I'm trying to get to grips with aligning text beside images in Kindle. Essentially I want to have an image to the left with the text aligned to the center of that image, but nothing I try seems to work in the Kindle Previewer.

The css I am using is:

p.noindent {text-indent:0em;}
p.traffic {text-indent:0em; font-size:160%;}
img.traffic {vertical-align:middle;}

And the html:

<p class="traffic"><img class="traffic" src="Getting-Started-3.jpg" alt="" width="40" height="40" />Red Light Foods</p>
<p class="noindent">High GI and high calorie foods. Do not eat these if you want to lose weight.</p>
<p class="traffic"><img class="traffic" src="Getting-Started-4.jpg" alt="" width="40" height="40" />Yellow Light Foods</p>
<p class="noindent">Mid-range GI foods. Eat these when you have reached your target weight.</p>
<p class="traffic"><img class="traffic" src="Getting-Started-5.jpg" alt="" width="40" height="40" />Green Light Foods</p>
<p class="noindent">These are low GI, low in calories and low in saturated fat. Eat these if you want to lose weight. Low GI foods make you feel fuller for longer and reduce the craving for that fattening sugar fix.</p>

There may well be something fundamentally wrong with my code, or does Kindle not support vertical-align? If not, is there a fix?

Any tips would be appreciated.

[DiapDealer]

The Kindle Publishing Guidelines indicate the the following html attributes of the img tag are supported by the Kindle: align, border, height, id, src, width. The following attributes are not: alt, hspace, longdesc, lowsrc, title, usemap, vspace. The vertical-align property in your CSS may not be able to be converted by Kindlegen (Kindle Previewer).

You can try using the html attributes (basically any HTML 3.2 attributes) directly in the source and see if it makes a difference. I know you can't "wrap" text around images in a mobi with floated divs. You may have to experiment with creating a simple table; one cell for the image and one for the text, but beware... anything other than the most simplistic of table layouts/formatting will probably not work very well. especially on smaller devices.

[dwig]

You must keep in mind that the MOBI format itself does not support any form of Styles/CSS. Anytime you feed a MOBI format creator a file it must convert any styles to inline tag attributes. As a result, any discussion of such conversions needs to include a mention of the creator tool complete with version number.

Also, the Kindle Publishing Guidelines state that Tables should never be used for layout formatting. The use of Tables for such formatting should only be done in private documents and never for any that you intend to distribute to others.

According to the various references I have, what you are trying to do should work. Your problem probably lies in your creator app's conversion of the Styles into tag attributes.

One possible failure could involve the Tag specific Styles that have identical names. The creator could be failing to handle the p.traffic and img.traffic as different when replacing the class="traffic" entries with native Tag attributes. You could try renaming one of them.

You could also try replacing the class="traffic" in the <img> Tag with align="middle" or align="absmiddle", as these are the actual attributes that creator is attempting to create from your Styles.

[Derek R]

Thank you, chaps. I have been a traditional bookseller and publisher for 25 years and trying to get to grips with e-publishing is not proving easy for me - some of my questions/terminology might therefore be a bit stupid/incorrect. I appreciate you keeping me right.

I have been experimenting for hours and I'm now quite mentally drained, but will try changing the class names tomorrow to see if that makes a difference, and will report back.

I'm creating html files by hand and using Mobipocket Creator 4.2 (build 41) to convert them into .prc files for Kindle. I am also wanting to convert the same html files into .epub format, and have downloaded Calibre for that purpose. Do you think it is best to adapt the source html especially for .epub format and then import directly into Calibre, or just convert the .prc files I create with Mobipocket? It's probably a 'how long is a piece of string' question, but any general guidance would be welcome.

And thank you once again for taking the trouble to respond.

[Derek R]

BTW, changing the class names seems to have done the trick!! And I know I'm asking a lot of questions all at once, but is there a way to put horizontal space between the image and text as would have been done by "hspace"? I have tried using "margin: 0 5px 0 0;" but that just forced the text down below the image.

[Derek R]

A point of clarification: it was not changing the class names of tags that solved the vertical alignment problem so much as inserting align="absmiddle" into the img tag itself, i.e. <img align="absmiddle"... />