View Full Version : Image With Text Formatting Question


jackibar
02-18-2013, 09:56 PM
Hi, Everyone...

I'm working on an eBook that has an image inline with the text at the beginning of each chapter. I remember reading a while back that some eReaders do not support the "float" style and therefore it's not recommended. I'm trying to figure out the best way to set this up and wondered if anyone can help! I will be formatting this book for Kindle, iBooks, and Nook (so ePub and mobi formats)... Do the newer devices handle the float style? Or should I find another way?

Anyway - I'm posting a snapshot of the way this currently looks in iBooks - I tried setting it up using a table with the text being in the left column and the image in the right - but it looks terrible - leaves white space where the text was in the left column and if you switch to portrait mode it changes everything. Plus, the image won't display large enough to see w/o double-tapping to expand it to full size. I'm not sure what I'm missing as far as making the image display at the right size - do you use the width/height tags or not?!

Thanks so very much for any help with this. I'm open to suggestions as far as the best way to lay this out where it will look decent on all readers and apps (within reason!)...

Toxaris
02-19-2013, 03:26 AM
Floats work in ePUB and I think also in KF8, since that is based on ePUB. I do not think float works in mobi though, so for older Kindles it should not work.

mrmikel
02-19-2013, 06:43 AM
Beyond the question of it working is how does it look. Be sure to preview what you do on a viewer for the Sony or Nook, as something that looks fine on a larger screen may not look so great on smaller one. It could annoy the reader if you have your beautiful pictures taking up most of a page and they have to turn pages every second or two to actually read the book.

Your readers might be happier if you group pictures together or provide a link so they can jump to them if they are so inclined.

My experience is needing the picture to fill the page to see any detail at all on e-ink devices.

GMcG
02-19-2013, 01:47 PM
@jackibar
You don't need floating text or tables. Or did I understand something wrong?
The thumbnail in my examples is just an image at the beginning of the paragraph. It is shown well in the Calibre viewer and in the Mobipocket emulator including the working link.

<p style="text-indent:0.50em"><a href="muc.gif"><img src="cap.gif" width="26" height="30" border="0"></a>This is an example with a thumbnail at the start of the paragraph and text-indent. The thumbnail refers to the picture in original size.</p>

The image in original size is either shown in an external viewer (Calibre) or in an internal viever (Mobipocket). You need the button of the device for navigating back.
The layout with tables will be ruined, if the reader resizes the font-size.

George

Toxaris
02-19-2013, 02:18 PM
If you look at the example, you see that the top of the image is in line with the text. In your example without float, the bottom of the image is in line with the bottom of the first line. That is a big difference.