How do I prevent a page break between an image and caption?

Community Beginner ,
Dec 02, 2020 Dec 02, 2020

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;
}

TOPICS
New UI

Views

94

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct Answer

Adobe Community Professional , Dec 02, 2020 Dec 02, 2020
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.

Likes

Translate

Translate
Adobe Community Professional ,
Dec 02, 2020 Dec 02, 2020

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.

 

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Dec 03, 2020 Dec 03, 2020

Copy link to clipboard

Copied

Does the avoid work in online outputs?

 

Please use the Blue reply button at the top to help me help you. The black Reply link nests replies and they sort out of order.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Dec 03, 2020 Dec 03, 2020

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Dec 03, 2020 Dec 03, 2020

Copy link to clipboard

Copied

LATEST

@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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Resources
RoboHelp Documentation