Image at start of line displays correctly ePub 2, not so ePub 3

I just opened an old project that was originally compiled to ePub 2.

The project has a number of lines that have a small image (24pt) at the beginning of the line followed by a space, then text, all left justified..

When compiled to ePub 2 it displays correctly. The image and the text on the same line.
When compiled to ePub 3 the image displays centered on the page and the text on the following line (left justified).

I’ve had a bit of a quick play and can’t see how to change that behavior.

Edit: Tried compiling to .docx then into Pages and exporting as ePub3 from pages - Images display correctly.

Any tips?

You could look in Sigil and see what is different.
What exactly got inserted (or “happens”) between your image and the first line of text that isn’t in the Epub2 version. (?)
You could also fix it this way too, if that’s the point.

3 Likes

This older thread on making a sequence of inline images is probably all you need to implement a solution for this particular look you want.

The old ePub 2 output in Scrivener was more like PDF/RTF output, mostly telling the text engine converter to produce HTML as a basis for the formatting, same as you would get when opening an RTF in TextEdit and using Save As to make an HTML file. Messy, very messy, and almost impossible to design against with your own CSS, but closer to the original text editor formatting in a WYSIWYG sense.

1 Like

Thanks for that.

Using the simple suggested solution, img { display: inline; } works more or less, though the images are almost a line higher than the text on the line.

Will have to have more of a play when I get time.

Seems my search prompt was not sufficient to find that - shows I’d be no good trying to use AI to write :grin:

1 Like

If you open up the ePub 2 alongside, in Sigil, you might be able to see how it was formatting the inline images, and either put that CSS into the img override you already added, or if it is something being done to the paragraph, then you might need a style on these lines to target them effectively.

But if you try by hand, I do find a little padding-top or padding-bottom can usually orient an image correctly within the line. Using ‘em’ units (usually at small fractions), is best, so that the offset scales with the font size.

1 Like