Copy link to clipboard
Copied
Using Robohelp version 2020.3.32
Is there a way to ensure that an image and its caption stay together on the same page when generating PDF output? I am looking for something that has the same effect as teh MS Word "Keep with Next" paragraph style. I have tried placing the caption above the image and below. I have tried adding break-after: avoid; and break-before: avoid; (at different times) to an img style in the CSS. I have tried those styles in-line on the caption as well as the image.
From my topic:
<figure>
<figcaption><span data-condition="Output:Manual" >Create Cure Batch screen</span></figcaption>
<img alt="Create Cure Batch screen" data-condition="Output:Manual" height="423" src="../../../assets/images/Operations/CreateCureBatch.png" width="752" />
</figure>
From my CSS:
img {
break-before: avoid;
}
You could try break-inside on the figure element.
Or try the older page-break-before/after/inside.
But I don't know what css is supported by the pdf conversion process, so you might need to contact Adobe.
Copy link to clipboard
Copied
You could try break-inside on the figure element.
Or try the older page-break-before/after/inside.
But I don't know what css is supported by the pdf conversion process, so you might need to contact Adobe.
Copy link to clipboard
Copied
Does the avoid work in online outputs?
Copy link to clipboard
Copied
@Amebr Thanks for the suggestion on adding break-inside on the figure element. That did the trick. I knew it was going to be something totally obvious once it was pointed out to me.
Copy link to clipboard
Copied
@Peter Grainge The project I am working on is for a couple of variants of printed documentation, so I really haven't tried to see if I got the same behaviour in an on-line version.