Text Box besides image for EPUB

[saphire152]

Hello,

I hope you can help me becsuse this is driving me nuts and I cant figure it out. I want to create an EPUB book with indesign and so far I have managed to solve all issues by looking around / YouTube / ChatGPT etc. but I cant solve this one.

So what I simply want is a text besides an image. If I place an image and then place a textbox besides it, it will look fine in InDesign but after converting and reading in an eReader the text will appear below the image.

And if I make a text box and place inside a table and then an image to the left, and a text to the right that actually works BUT then the table gets split across 2 pages. I also had  to put a text box inside the table which is also in a text box so the image wouldnt get distorted in an eReader. Also the whole text box will overalap with the previous content in my document, althought thats only a nuissance for me because after converting thats fine.

And if I anchor the textbox to inline then I dont have the overlapping and splitting across 2 pages issues, BUT when converting it will rasterize the whole textbox. While the image is fine after convertig, the text becomes much bigger when reading in Calibre, in Kindle for example its fine though. I also tried to uncheck the option when convertig to EPUB "Preserve appearence from Layout ..." but that also didnt help.

SO when I solve one issue then another pops up, its so annoying and frustrating.

Bottom line, how would you do it if you want to write a text besides an image desigining in inDesign for EPUB ? I cant imagine that this isnt possible, I must overlook something. Also Iam pretty new to inDesign, just started a week ago.

Thanks in advance.

[Vivek12]

Hi, Sorry for the trouble. Please share a screen recording depicting the issue along with a sample file, so that we can better assist you. Also, confirm the OS and InDesign version. 

^VS

[Derek Cross]

You're new to InDesign, which is a complex application with a steep learning curve and you're creating a Reflowable ePub – a format that's not at all intuative. I suggest you keep your document simple and have the captions under the image perhaps in a smaller font and/or in italic.

(Remember, no folios, anchor all images, Parent page contenet in not implemented and use Paragraph and chracter styles in Reflowable ePubs.)

Also check your document on as wide a number of devices and readers as possible.

[James Gifford—NitroPress]

@Derek Cross has it right. In reflowable layout, the primary axis of content is vertical. With very few exceptions, things like images should be centered horizontally and have no text wrapped around them. It's a mistake to try to get anything side by side, except for the occasional very small image that allows text to flow around it. (The more fundamental mistake is to try and replicate a print layout in reflowable. Different mediums needing different approaches.)

The one thing you could do, if the image is restricted to 50% or less of the reader width, is to float one or both elements so that they will horizontally stack if the reader allows it — if the net size of each element is less than 50% width, so that there is room, but will stack vertically otherwise. The controls for that are buried in the object export menu for each element.

[saphire152]

Iam under Windows 10 and the newest version of inDesign.

Thank you for the answers and input. I actually managed now to make it work with the help of ChatGPT after giving it the .html code. It gave me then some .css code which works. While under object styles under "Anchored Object Options" there is an option to keep the table together it sadly didnt work, but the .css code from ChatGPT does.

In Kindle however it always drew a border/stroke around the table or text box (which was another issue), even though everything was set to 0 while on other readers it worked. With the .css code from ChatGPT it also works now in the readers Ive tried, Kindle, Aquille and Calibre.

ChatGPT really just only gave me the correct code and answer after giving the code snippet from the .html file. That was just an idea popping to my head yesterday and luckily that worked.

Here the .css code if someone may stumble upon this topic through a search engine and want to know. But now of course no table will have borders anymore, but I also dont need nor want it. However there may be a way to handle this through "classes".

For me personally its fine how it behaves now, my book wont have many images anyways.

/* General rule for all elements to remove borders */
* {
    border: none !important;
    border-width: 0 !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Specific rules for the elements in question */
div.Basic-Text-Frame, 
table.Inside-TextBox, 
td.Inside-TextBox, 
p.imagetext, 
img._idGenObjectAttribute-5 {
    border: none !important;
    border-width: 0 !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Ensure images are responsive */
img._idGenObjectAttribute-5 {
    max-width: 100% !important;
    height: auto !important;
}

/* Prevent page breaks inside elements */
@page {
    margin: 0;
}

/* Prevent page breaks inside tables or text boxes */
div.Basic-Text-Frame, 
table.Inside-TextBox, 
td.Inside-TextBox, 
p.imagetext {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
}

Or is there anything wrong with the code which I may not realize right now ?

[James Gifford—NitroPress]

The first thing to realize is that 75% of the web information on EPUB etc. is either wrong or badly outdated. The remaining 25% tends to be specific in ways that are not completely clear until you're stuck deep in the mud of Path A when you really needed to choose Path B (which the blog expert, or AI, doesn't know about, doesn't like or didn't know when they wrote the entry back in 2011).

The second thing to realize is that EPUB is overwhelmingly dependent on which reader you use to view it. Hardly any two will render the same file the same way, from minor variations in spacing to "perfect" on one and an unreadable mess on the next. (You haven't said what reader you're using to proof this work — there is no basic or universal one.)

As for the code and solution, if it works, it works — I didn't say this couldn't be done (at a technical level); I said it's a poor idea because of the nature of reflowable EPUB and (adding in) the reader variations. You may have it completely tweaked in for your selected reader and user settings; the next user might use another reader and prefer larger or smaller fonts, margins and line spacing. It's a crapshoot as to whether such delicately balanced layout will survive such variations in "attractive" form, much less readable form.

As a start, try viewing your file on multiple readers, and mucking around with things like font size, margins, line spacing and columns. Does your code still work the way you want? (As with web pages, there's a lot more to "responsive" than just image scaling.)

There are a number of things in the code I wouldn't use/do, but who am I to argue with Chaggy. 🙂 The main glitch I see is defining all images as 100% width — which is going to conflict with any layout trying to position text next to an image, which was your stated goal. And you can insert all the page-break-xxx statements you like, but they are merely advisory for the reader's processing; if the reader is a hard-paginating one, rules to avoid breaks or try to keep headings and tables and so forth together take a back-seat-driving role.

The takeaway here is that you have to respect reflowable e-book layout as its own medium and not try to map print expectations into/onto it. Different medium, different capabilities, different limitations; you have to very much "go with the flow" on these and not try to battle them into other form using scads of CSS code. If you want images and text side-by-side, you have to accept that it can only be done across a universal spread of readers and user settings by keeping the image width small and using float positioning. For large images, letting them run by themselves, centered, with no text wrap, is the only reliable layout option.