Captions together with image

[swepub]

Does anyone have any ideas how to keep captions on same page as image reflowable epub? I have a problem that one page ends with a caption and the the image starts in the next page.
I have tried <figcaption> but it's not consistent.

Thanks!

[Turtle91]

Originally Posted by swepub

Does anyone have any ideas how to keep captions on same page as image reflowable epub? I have a problem that one page ends with a caption and the the image starts in the next page.
I have tried <figcaption> but it's not consistent.

Thanks!

That is an often asked question. Try searching this forum for in-depth discussions.

The bottom line: There are many techniques that are not consistent across devices. One that does seem to work is to edit the image and add the text to the image itself - then use an svg wrapper to put the image on its own page. Of course, you could play around with all the settings in the svg wrapper and add <text> there, but that takes a little more time/effort to learn.

[RbnJrg]

Originally Posted by swepub

Does anyone have any ideas how to keep captions on same page as image reflowable epub? I have a problem that one page ends with a caption and the the image starts in the next page.
I have tried <figcaption> but it's not consistent.

Thanks!

Where are you working? On epub2 or epub3? Answer that and we will be able to give you a better solution. <figcaption> is for epub3, so is you are working on epub2, you need to employ others tags and css properties.

[jhowell]

You should also consider that forcing images and captions to be on the same page can result in a poor user experience, especially on devices with smaller screens such as most e-readers and phones. In many cases either the caption text, the image, or both will be too small to view comfortably.

[RbnJrg]

Originally Posted by jhowell

You should also consider that forcing images and captions to be on the same page can result in a poor user experience, especially on devices with smaller screens such as most e-readers and phones. In many cases either the caption text, the image, or both will be too small to view comfortably.

On epub3, the reading experience is very good, even in a small screen. Image and caption are a % of the height viewport (retaining proportions). And by tapping the image (in a good epub3 ereader) the same one will be showing at full screen.

Here you can watch screenshots from Kobo for Android on a 5" screen:

[Quoth]

Even epub2, if the % is used the images + caption (just p and CSS) can be OK on a 4.3″ phone screen. Bluefire, Aldiko Basic etc apps.

[swepub]

Originally Posted by RbnJrg

Where are you working? On epub2 or epub3? Answer that and we will be able to give you a better solution. <figcaption> is for epub3, so is you are working on epub2, you need to employ others tags and css properties.

Ahh sorry - missed that:
In Adobe Indesign and cleanup done in Sigil.
EPUB3.

Hope that clarifies...

[RbnJrg]

Originally Posted by swepub

Ahh sorry - missed that:
In Adobe Indesign and cleanup done in Sigil.
EPUB3.

Hope that clarifies...

Ok. To maintain image and caption joined, do the following:

1. In your .xhtml file:

<figure class="wrapper">
  <img alt="" src="your_path_to_your_image" />
  <figcaption class="caption">Your caption here</figcaption>
</figure>

2. In your .css stylesheet:

.wrapper {
  float: left;
  width: 100%;
  text-align: center;
  -webkit-column-break-inside: avoid !important;
  page-break-inside: avoid !important;
  break-inside: avoid !important;
}

.wrapper img {
  width: 100%; /* or the width you wish */
}

.caption {
  font-size: 0.9em; /* or the size you wish */
  font-style: italic; /* ad libitum :) */
}

This is the "basic" code (add margins/paddings, etc., where you need) and for images whose width is bigger than its height (things are a bit different when the height of the image is bigger than its width). As you can watch, the property "float" is present; this is key, because it will maintain the text flow and also the caption joined with the image; if the remaining space is enough for the image but not for the caption, the float property will move the image and caption to the following page to honors properties -webkit-column-break-inside: avoid and the others. If float is not present, the image and caption also will be moved to the following page but you also will have a big blank space that will ruin the flowing of the text.

I hope this can be of help. Also take into account that is ONLY for epub3 (it won't work properly on epub2).

EDIT: I forgot something important; if you are going to employ margins, paddings, borders, you need to include the property "box-sizing: border-box;".

[swepub]

Great!!! Seems to work perfect.
Thanks a lot.

[RbnJrg]

Originally Posted by swepub

Great!!! Seems to work perfect.
Thanks a lot.

You are welcome

[swepub]

The only thing that I need now, is some help to decrease the gap between my images/figures - tried some options but not able to solve it.
See image attached

[RbnJrg]

Originally Posted by swepub

The only thing that I need now, is some help to decrease the gap between my images/figures - tried some options but not able to solve it.
See image attached

Do You want to reduce the vertical space between those three images? Ok, post here the code you are using and that are producing that output and I/we will try to help you. The fact you are working on epub3 wiil make things easier to fix them.

[swepub]

Here it is - ugly coding since I'm new to this and inherit the code from Indesign:

<figure class="wrapper">
<figcaption class="caption"><p class="ImageCaptionCentered"><span class="Semi-Bold">Original Photos</span></p></figcaption>
<div class="_idGenObjectLayout-4">
<div id="_idContainer463" class="MainImage">
<img alt="" src="image/84-4.jpg" />
</div>
</div>
</figure>

<figure class="wrapper">
<figcaption class="caption"><p class="ImageCaptionCentered"><span class="Semi-Bold">Virtual Copies</span></p></figcaption>
<div class="_idGenObjectLayout-4">
<div id="_idContainer463" class="MainImage">
<img alt="" src="image/84-5.jpg" />
</div>
</div>
</figure>

<figure class="wrapper">
<figcaption class="caption"><p class="ImageCaptionCentered"><span class="Semi-Bold">Videos</span></p></figcaption>
<div class="_idGenObjectLayout-4">
<div id="_idContainer463" class="MainImage">
<img alt="" src="image/84-6.jpg" />
</div>
</div>
</figure>

________________________________________

CSS

/* image wrapper for captions */
.wrapper {
float: left;
width: 100%;
text-align: center;
-webkit-column-break-inside: avoid !important;
page-break-inside: avoid !important;
break-inside: avoid !important;
}
.wrapper img {
width: 100%; /* or the width you wish */
display: block;
}
.caption {
font-size: 1rem; /* or the size you wish */
font-style: italic; /* ad libitum */
}


div._idGenObjectLayout-4 {
text-align:center;
-webkit-column-break-inside: avoid !important; /* for webkit ereaders */
break-inside: avoid !important; /* for the rest of ereaders */


#_idContainer463 {
display:inline-block;
width:23.72%;

div.MainImage {
border-style:solid;
box-shadow: 14px 14px 10px rgba(0, 0, 0, 0.6);
margin-bottom:0.5em;
max-width: 99%;
max-height: 99%;
}

[RbnJrg]

Originally Posted by swepub

Here it is - ugly coding since I'm new to this and inherit the code from Indesign:

<figure class="wrapper">
<figcaption class="caption"><p class="ImageCaptionCentered"><span class="Semi-Bold">Original Photos</span></p></figcaption>
<div class="_idGenObjectLayout-4">
<div id="_idContainer463" class="MainImage">
<img alt="" src="image/84-4.jpg" />
</div>
</div>
</figure>

<figure class="wrapper">
<figcaption class="caption"><p class="ImageCaptionCentered"><span class="Semi-Bold">Virtual Copies</span></p></figcaption>
<div class="_idGenObjectLayout-4">
<div id="_idContainer463" class="MainImage">
<img alt="" src="image/84-5.jpg" />
</div>
</div>
</figure>

<figure class="wrapper">
<figcaption class="caption"><p class="ImageCaptionCentered"><span class="Semi-Bold">Videos</span></p></figcaption>
<div class="_idGenObjectLayout-4">
<div id="_idContainer463" class="MainImage">
<img alt="" src="image/84-6.jpg" />
</div>
</div>
</figure>

________________________________________

CSS

/* image wrapper for captions */
.wrapper {
float: left;
width: 100%;
text-align: center;
-webkit-column-break-inside: avoid !important;
page-break-inside: avoid !important;
break-inside: avoid !important;
}
.wrapper img {
width: 100%; /* or the width you wish */
display: block;
}
.caption {
font-size: 1rem; /* or the size you wish */
font-style: italic; /* ad libitum */
}


div._idGenObjectLayout-4 {
text-align:center;
-webkit-column-break-inside: avoid !important; /* for webkit ereaders */
break-inside: avoid !important; /* for the rest of ereaders */


#_idContainer463 {
display:inline-block;
width:23.72%;

div.MainImage {
border-style:solid;
box-shadow: 14px 14px 10px rgba(0, 0, 0, 0.6);
margin-bottom:0.5em;
max-width: 99%;
max-height: 99%;
}

Phew! What a mess! Very ugly Indesign is not able to generate a decent code. Use the following:

a) In your .xhtml file:

  <figure class="wrapper">
    <figcaption class="caption ImageCaptionCentered Semi-Bold">Original Photos</figcaption>

    <div class="MainImage">
      <img alt="" src="image/84-4.jpg"/>
    </div>
  </figure>

  <figure class="wrapper">
    <figcaption class="caption ImageCaptionCentered Semi-Bold">Virtual Copies</figcaption>

    <div class="MainImage">
      <img alt="" src="image/84-5.jpg"/>
    </div>
  </figure>

  <figure class="wrapper">
    <figcaption class="caption ImageCaptionCentered Semi-Bold">Videos</figcaption>

    <div class="MainImage">
      <img alt="" src="image/84-6.jpg"/>
    </div>
  </figure>

b) In your .css stylesheet:

.wrapper {
  float: left;
  width: 100%;
  text-align: center;
  box-sizing: border-box;
  -webkit-column-break-inside: avoid !important;
  page-break-inside: avoid !important;
  break-inside: avoid !important;
  margin: 1em 0 0; /* Here you control the gap between images; change 1em as you wish */
}

.caption {
  font-size: 1rem;
  font-style: italic;
}

.MainImage {
  width: 23.72%;
  border-style: solid;
  box-shadow: 14px 14px 10px rgba(0, 0, 0, 0.6);
  margin: 0 auto;
  box-sizing: border-box;
}

.MainImage img {
  width: 100%;
}

I still used styles "ImageCaptionCentered" and "Semi-Bold" but they are not defined in you .css. So, if they are not present in your stylesheet, you can delete them and instead of:

<figcaption class="caption ImageCaptionCentered Semi-Bold">

you can use:

<figcaption class="caption">

And now one last thing; the three images, must be joined? That is, a break can't be produced between them? Because the code is different is a break is allowed or not. The above code allows a break between the three images (what the above code makes is to maintain the caption joined with the images, but not the three images joined. For the latter, something more is needed.)

[Quoth]

Indesign is based on a 20+ year package based on an old Aldus package that was never released. It's DTP. Thus it's for paper/PDF/Print. It was fudged for ebooks. So it's no surprise it's really only good for flxed layout.

Loads of free options are better than Indesign for epub2 or epub3. Indesign is also now rental only. The epub2 didn't even exist when Indesign was first released.

Expensive and used by Corporates doesn't mean a tool is the best solution.

Even for simpler PDF layouts using MS Word (only if you have to) or LO Writer with styles is now a better solution than Indesign.
LO Writer is at 7.x It's been good enough since 5.x unless you are interchanging the same document with MS Word users frequently, back and forth.