<figure> and <figcaption>

[z537815]

If I code a picture with a caption:

<figure>
<img...>
<figcaption>...</figcaption>
</figure>

isn't this picture+caption then supposed to be 1 unit?

I'm asking because I specified a style="height:100vh" on the <figure>, but it looks as if the "height" only affects the <img> and not the caption. At least in ADE 4.5.11.187658 it does.

[JSWolf]

Are you doing this coding for yourself or is it for a book that's going to be for sale? I ask because how you code it depends on what you are going to do with the book.

[z537815]

It's all for myself. I started doing this - or at least, trying to do it - when I found that ADE didn't properly display several pictures in the book. They kind of "disappear" at the bottom of the page, and I cannot scroll down then to see the rest.

So I'm trying to get the (pretty large) picture and its caption onto a separate page. I thought that framing the <IMG and its <FIGCAPTION with <FIGURE this way, would allow me to do it. But - according to ADE - I do manage that with the <IMG (it gets onto a new page) but the <FIGCAPTION doesn't.

The <IMG occupies the whole page (top to bottom) and the caption is displayed on the next page.

[Turtle91]

Not sure if it'll work but have you tried setting the size of the img and figcaption separately?

figure: height:100vh
figure image: height:80%
figure caption: height:20%

[graycyn]

Originally Posted by z537815

It's all for myself. I started doing this - or at least, trying to do it - when I found that ADE didn't properly display several pictures in the book. They kind of "disappear" at the bottom of the page, and I cannot scroll down then to see the rest.

So I'm trying to get the (pretty large) picture and its caption onto a separate page. I thought that framing the <IMG and its <FIGCAPTION with <FIGURE this way, would allow me to do it. But - according to ADE - I do manage that with the <IMG (it gets onto a new page) but the <FIGCAPTION doesn't.

The <IMG occupies the whole page (top to bottom) and the caption is displayed on the next page.

This may or may not work for what you are after, as you have to either have the image at the top of the XHTML file or in its own separate XHTML file. But you can play with it, see if it suits your needs or not.

https://github.com/jstallent/ImagesSingleFile

[JSWolf]

But if the image and figure do not fit the screen together, then they would have to slit. There's no way to prevent this.

[Turtle91]

What I was thinking was the <figure> would take the full viewport height (100 vh), then the image would take 80% and the caption would get 20% of the parent container (the figure). That should fit everything on one page. Of course you may need to adjust the ratio of image to caption size as needed for your image/caption.

If your device/app is too old to support vh then this method obviously wouldn’t work.

[z537815]

I might give that a try, but in the meantime I'm starting to think that the problem might be with ADE.

If I load the original Epub in ADE, it displays just a part of this (very) large picture. Without any scrollbars. I thought: what if it's clipping, because the picture simply won't fit in the viewbox, and "overflow: hidden"?

So I set "overflow:auto" in the CSS-class for the picture, expecting scrollbars to appear. They don't. The picture's now visible completely, as if it's been put onto a new page, but the caption still appears on the next page.

So, a lot better, but still not quite what I wanted. I think I'm going to post this in an ADE forum.

[JSWolf]

Originally Posted by z537815

I might give that a try, but in the meantime I'm starting to think that the problem might be with ADE.

If I load the original Epub in ADE, it displays just a part of this (very) large picture. Without any scrollbars. I thought: what if it's clipping, because the picture simply won't fit in the viewbox, and "overflow: hidden"?

So I set "overflow:auto" in the CSS-class for the picture, expecting scrollbars to appear. They don't. The picture's now visible completely, as if it's been put onto a new page, but the caption still appears on the next page.

So, a lot better, but still not quite what I wanted. I think I'm going to post this in an ADE forum.

What version of ADE are you using? If it's old enough, vh will not work.

[z537815]

Adobe Digital Editions Version 4.5.11.187658.