Register Guidelines E-Books Search Today's Posts Mark Forums Read

Go Back   MobileRead Forums > E-Book Formats > Kindle Formats

Notices

Reply
 
Thread Tools Search this Thread
Old 06-25-2011, 09:46 AM   #1
Derek R
Connoisseur
Derek R began at the beginning.
 
Derek R's Avatar
 
Posts: 87
Karma: 20
Join Date: Jun 2011
Location: County Down, Northern Ireland
Device: none
Image alignment and spacing

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.
Derek R is offline   Reply With Quote
Old 06-25-2011, 10:15 AM   #2
DiapDealer
Grand Sorcerer
DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.
 
DiapDealer's Avatar
 
Posts: 9,029
Karma: 40855212
Join Date: Jan 2010
Device: Nexus 7, Kindle Fire HD
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.
DiapDealer is online now   Reply With Quote
Old 06-25-2011, 10:42 AM   #3
dwig
Guru
dwig ought to be getting tired of karma fortunes by now.dwig ought to be getting tired of karma fortunes by now.dwig ought to be getting tired of karma fortunes by now.dwig ought to be getting tired of karma fortunes by now.dwig ought to be getting tired of karma fortunes by now.dwig ought to be getting tired of karma fortunes by now.dwig ought to be getting tired of karma fortunes by now.dwig ought to be getting tired of karma fortunes by now.dwig ought to be getting tired of karma fortunes by now.dwig ought to be getting tired of karma fortunes by now.dwig ought to be getting tired of karma fortunes by now.
 
dwig's Avatar
 
Posts: 969
Karma: 1382338
Join Date: Dec 2004
Location: Paradise (Key West, FL)
Device: Current:Dell Venue 8 Pro, Kindle 3/WiFi - Retired:Clie UX50, T415, ...
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.

Last edited by dwig; 06-25-2011 at 10:43 AM. Reason: #&@* typos
dwig is offline   Reply With Quote
Old 06-25-2011, 11:33 AM   #4
Derek R
Connoisseur
Derek R began at the beginning.
 
Derek R's Avatar
 
Posts: 87
Karma: 20
Join Date: Jun 2011
Location: County Down, Northern Ireland
Device: none
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 is offline   Reply With Quote
Old 06-25-2011, 11:47 AM   #5
Derek R
Connoisseur
Derek R began at the beginning.
 
Derek R's Avatar
 
Posts: 87
Karma: 20
Join Date: Jun 2011
Location: County Down, Northern Ireland
Device: none
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 is offline   Reply With Quote
Old 06-25-2011, 12:57 PM   #6
Derek R
Connoisseur
Derek R began at the beginning.
 
Derek R's Avatar
 
Posts: 87
Karma: 20
Join Date: Jun 2011
Location: County Down, Northern Ireland
Device: none
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"... />
Derek R is offline   Reply With Quote
Reply

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Hello/Image and text alignment Derek R Introduce Yourself 3 06-26-2011 10:47 AM
PRS-650 Text and alignment issues henders254 Sony Reader 0 05-14-2011 08:11 PM
Text alignment James_Wilde iRiver Story 0 10-25-2010 04:22 AM
left alignment speakingtohe Calibre 2 08-13-2010 10:39 AM
Vertical Alignment gardefjord ePub 2 05-25-2010 09:59 PM


All times are GMT -4. The time now is 07:58 PM.


MobileRead.com is a privately owned, operated and funded community.