Aligning figures in ePUB

Scrivener
,
1

I have what may be a dumb question:

Compiling to ePub, images are currently centred on the page, between paragraphs of text, with the following example code:

<figure>
<img src="images/photo-1.jpg" alt="" id="photo-1"width="333" />
</figure>

For some of them, I would like to align them right and flush with the top of the preceding paragraph. On a website, that would be done by something like;

<p><img align="right" src="images/photo-1.jpg" alt="…> Blah blah blah.</p>

How do I do it when the image is wrapped in <figure> …… </figure>? Can I put the <figure> …… </figure> within <p> …… </p>, and if so where do I put the align="right"? Some of the images have captions.

:slight_smile:
Mark

2

The proposed solution to this one is going to be very similar to the one that would allow for multiple inline images. Here is an example compile Format that mainly demonstrates the structure being applied, although there is a little sample CSS as well:

ebook-right_float.scrformat (119.8 KB)

To give it a test, create a paragraph style called “Right Float”, and a character style called “Inline Caption”. The formatting for either is completely arbitrary, as the compile format is going to be treating these as raw HTML, and creating the classed figure itself. Here is the target HTML:

<figure class="right-float">
    <img .../>
    <figcaption>This is optional...</figcaption>
</figure>

Since you will be using a character style instead of a paragraph style for the caption, both the image line and the caption line would be assigned to the Right Float style. It will be the thing wrapping the two lines in the classed figure. If an image doesn’t have a caption, that is fine, it will just print an img in a figure.

For some of them, I would like to align them right and flush with the top of the preceding paragraph…

I might be reading this wrong, but I interpreted that as a float rather than right-alignment—where there would be empty space all the way to the left of the image. It will combine with the following paragraph(s), given how floats work. I don’t think there is a good way of getting a float flush top with the preceding paragraph, but this is easy to solve by where you put the image in the editor.

2 Likes
3

Thanks for this Ioa. Sorry not to have replied sooner… we were away for a couple of days.

I’ve downloaded the .scrformat and will examine it, along with working through the relevant W3Schools sections on HTML and CSS.

For reasons I can’t go into here, I am having to add the code using Sigil. That itself is straightforward, it’s working out what exactly I need to add to the small number of images to which this applies.

I’ll be in touch if I need more help with it.

:slight_smile:
Mark

1 Like