Offset text from picture

[wildchild1954]

I'm using Image files for the Chapter headings on an epub I'm working on. I know how to get the text to square up with the image using the Tweak app but the text is too close to the image as you can see in the attached photo. Is there any way to create a wider gap between the image and the text? I would really appreciate any help with this. I'd like to know if there is any way to adjust the image down a little to line up better with the text.

[Robert]

What you want is called an “In Margin Drop Cap.” To achieve this, you could try tweaking the Atlantis EPUB code as described in the following 2 articles:

ePub Formatting – How To Add Drop Caps To Your ePub Content
Creating drop caps using CSS

However, keep in mind that Drop Caps are fixed-layout elements. They don’t fare well with the EPUB format which is essentially reflowable. Your Drop Caps might not display as expected in a number of e-readers… Note that you’d have the same kind of problem with a Drop Cap picture.

This said, you could try to create mock Drop Caps directly from Atlantis. The 2 documents attached to this post illustrate what can be done. Both use borderless 2-column tables. But they don’t render as expected when converted to the EPUB or MOBI format…

HTH.
Robert

[wildchild1954]

Thanks but I'm not trying to create a drop cap. I'm not computer literate enough to understand how the suggested articles recommendations apply to my problem. This is the line that allows the squaring effect to the image: <p class="p0"><img src="images/img1.jpg" width="80" height="96" alt="img1.jpg" align="left" />It was. I added the align="left" after img1.jpg" to create that squaring. All I want is a little more space between the image and the text and to move the image down so that it centers more on the four lines of text beside it. In other words I want it to look more like this attachment.

[Robert]

We all understand what you want. You want to create a Drop Cap that would display as a Drop Cap in an EPUB file. But Drop Caps are fixed-layout elements and as such are not supported by the EPUB format which is essentially reflowable. To put it more clearly, you won’t be able to make sure that your Drop Cap pictures will display at the exact location you want them to display. No amount of HTML or CSS will change this fact. Note that Drop Caps represent capital letters and are expected to replace the first letter of the word that follows. Accordingly, your text should begin with “t”, and not “It”.

This said, adding “align=left” to “<img src="images/img1.jpg" width="80" height="96" alt="img1.jpg" align="left" /> does not make sense. “align=left” is already present at the end of this IMG tag. What’s more, the position of this picture is relative to the paragraph it is inserted into. That paragraph position is controlled by the CSS class “p0”, of which we know nothing.
By the way, note that the “align” attribute is no longer supported in HTML5. CSS must be used instead.

As I already suggested, your best bet is to use a borderless 2-column table to insert Drop Caps in your source documents, and convert them to EPUB automatically from Atlantis, using “File | Save Special > Save As eBook…”
In the attached document, the first chapter starts with a Drop Cap picture inserted into the first cell of a borderless 2-column table. Converted to EPUB by Atlantis, this document displays as expected in Adobe Digital Editions and in the Chrome add-on named “Simple EPUB Reader”. But this Drop Cap is not rendered correctly by the Kindle Previewer in the MOBI version…

HTH.
Cheers,
Robert

[wildchild1954]

When I convert documents to ePub with Atlantis they will never be read in Adobe Digital Editions, Kindle, or Nook. I read them on a Samsung tablet using Alkido. So since there's no way to get what I want I'd like to thank you for the help.