View Full Version : Manually Anchor Images to Text

08-10-2012, 09:43 PM

I have a sort of conundrum. I know how to anchor images to text in InDesign but I am currently editing an ePub file without access to InDesign (I am away from my work computer) using Sigil. I want to manually anchor an image to some text so that they stay together if the text gets reflowed. By "manually" I mean that I want to code this into the XHTML. How would I go about doing this? I am unsure of what the proper way to do this would be. I've tried putting the image and text into a table and putting them within the same <p></p> tags with a <br/> between to maintain the top-down layout but nothing has worked. The text always gets separated from the image if reflowed.

I would also like to do this with headers - keep headers with the text they go over and I have been having the same problem.

I would appreciate any help you guys could provide.


08-11-2012, 04:44 AM
Wrap both image and text in a <div> and apply "page-break-inside: avoid" to it with CSS. Unfortunately, not all readers obey this in all circumstances, even if the whole thing fits in a "page". Or include the text in the image :rolleyes:

08-13-2012, 06:54 PM
Thanks, Jellby. What I ended up doing was putting the image and text within <div> tags and applying: "display:inline-block; page-break-before:always;". I read that iBooks doesn't recognize the "page-break-x" attributes so "inline-block" would still be a way of keeping the elements together.

I was wondering if "page-break-before:always" is better than "page-break-inside:avoid"? The former would keep the images and text on a separate page away from other elements - I wasn't sure if this was a more reliable way of keeping the text and images together or if both would work equally, just in different ways?

Thanks for your help.

08-14-2012, 06:36 AM
page-break-before:always forces a pagebreak before the block, page-break-inside:avoid should only insert the pagebreak if the block does not fit in the remaining page space. For large blocks (images) it's the same, but for smaller ones (or large pages), the former would insert unnecessary pagebreaks.