CSS doesn't have the concept of "keep with next." Rather, it has the concept of breaks before, inside, or after different HTML tags. You can design styles that always break or that avoid breaking. (There's no such concept as never breaking.)
To achieve the specific behavior you're after, you have a couple of options.
One way is to put the paragraph that holds the lead-in sentence and the paragraph that holds the image inside a div and assign the div class that includes the page-break-inside attribute set to "avoid". I use this exact div structure, with a class of div.Figure.
Code: Select all
div.Figure
{
page-break-inside: avoid;
}
BTW, if you wanted to use a similar div structure for other kinds of content besides paragraphs with images, you could name the div more generally.
Code: Select all
div.NoBreakInside
{
page-break-inside: avoid;
}
Another way is to have one CSS class for the lead-in paragraph that instructs Flare to avoid a page break after and another CSS class for the paragraph that holds the image that instructs Flare to avoid a page-break-before.
Code: Select all
p.FigureLeadin
{
page-break-after: avoid;
}
p.Figure
{
page-break-before: avoid;
}
In my own practice, the lead-in to a figure is always the figure title, so my code is:
Code: Select all
p.FigureTitle
{
page-break-after: avoid;
}
p.Figure
{
page-break-before: avoid;
}
In the p.FigureTitle CSS, I also set up an auto-number for the figure title, but that's a whole other discussion.
HTH