page-break-before: avoid - not honored (not table)

[pdenchfield]

I want to keep the figure image, caption, and legend together on the same page in PDF outputs. Most figures don't have legends, so I did not code the caption style to avoid page breaks after. Instead I have coded both caption and legend to avoid page breaks before. But the setting is not honored, resulting in a page break between caption and legend. What am I missing?

pagebreak-p.figurecaption.png

pagebreak-p.figurecaptionlegend.png

Topic:

Code: Select all

        <p class="FigureArt">
            <img src="../Resources_Edge/Images/1_1.jpg" style="width: 277.5485px;height: 278.0678px;" />
        </p>
        <p class="FigureCaption" MadCap:autonum="Figure 1-1 "><a name="SystemFrontFeatures"></a><a name="ch01_gs_2318645440_1261265"></a><a name="ch01_gs_2318645440_68644"></a>System Front Features <br /></p>
        <p class="FigureCaptionLegend">Legend: (1) Control panel, (2) AC power indicator, (3) Display, (4) USB ports, (5) Handle </p>

CSS:

Code: Select all

p.FigureArt
	{
		page-break-after: avoid;
	}

	p.FigureCaption
	{
		mc-auto-number-class: FigureNum;
		mc-auto-number-format: 'CF:Figure {chapnum}-{n+} ';
		page-break-before: avoid;
	}

	p.FigureCaptionLegend
	{
		page-break-before: avoid;
	}

Note: This issue differs from my previous post about page-break-before in a table cell.

[Psider]

Maybe wrap image, caption and legend in a div, and set page-break-inside: avoid on the div?

I think what's happening is you're getting a page-break-after on the Caption. Also, I don't think these css settings necessarily forbid the breaks, just says don't do it if possible.

[doc_guy]

Try adding a page-break-after: avoid to the p.FigureCaption class and see if that helps.

Code: Select all

   p.FigureCaption
   {
      mc-auto-number-class: FigureNum;
      mc-auto-number-format: 'CF:Figure {chapnum}-{n+} ';
      page-break-before: avoid;
      page-break-after: avoid;
   }

I also second the suggestion to wrap the whole thing in a DIV and setting page-break-inside:avoid.

A third, less ideal solution, would be to add the captions to the image in MadCap Capture as a call-out. That will place the text as part of the image, so it CAN'T break, but this option has its own issues like hard-coded image numbers, text rendering in the image, etc. What is nice about Capture is that the text remains editable in the future.

[pdenchfield]

Thanks, Paul and Psider!

I want captions to avoid page breaks before, but not after, because only a few captions are followed by legends.

I went ahead and created a div class "NoPageBreak" with page-break-inside: avoid and wrapped the content accordingly.

I wonder if this is a best practice?

[doc_guy]

I haven't tried this myself, but there is a selector in CSS that might be helpful, though I don't know if Flare supports it.

When you use this syntax:

Code: Select all

p.figurecaption+p.figurecaptionlegend {
      page-break-before:avoid
}

You are telling the CSS that when you have a p.figurecaption that is followed by a p.figurecaptionlegend, then apply the following style to the p.figurecaptionlegend element.

The reverse of this is:

Code: Select all

p.figurecaption~p.figurecaptionlegend {
     page-break-after:avoid
}

In this case you are telling the CSS that when you have a p.figurecaption that is followed by a p.figurecaptionlegend, then apply the following style to the p.figurecaption element.

Like I said, I don't know if Flare supports these, but they are standard CSS syntax, so if it doesn't, then it is a bug in Flare.

[pdenchfield]

Thanks, Paul. Very interesting! Hopefully soon I'll have a chance to test this out.