CSS "page-break-before: avoid" property for images?

[tomjohnson1492]

I'm trying to set a CSS property on my images that avoids having the images end up as orphans (that is, I don't want an image sitting at the top of a page without any text before it). Usually in procedural writing we have sentences that say, "The X image appears." I'd like to keep that line with the actual image.

So I defined a specific paragraph style for images and added this property:

Code: Select all

page-break-before: avoid;

However, this isn't working. I'm still seeing orphan images. Any suggestions for me?

[LTinker68]

Don't add it to the img tag. Image tags have to reside inside another tag, such as a <p> tag or a <td> tag. I recommend creating a custom <p> class, set the page-break property on that class, and apply that class to every paragraph containing an image. If you want the same behavior if the image is in a table cell, then instead of making it a <p> class, make it a generic class -- that way you can apply it to a <p> tag or a <td> tag. Although I'm not entirely sure the page-break property is one that works with <td> tags -- it should, but you'd have to test it.

[tomjohnson1492]

Thanks Lisa. Actually in my original post I forgot to include more details. I already did create a special paragraph class for images and apply the page break property to that special class. I know that trying to apply style attributes to the <img> tag has no effect.

So if I'm doing it right, shouldn't it work? Maybe I misunderstand what "avoid" means in CSS.

Tom

[KevinDAmery]

Here's an idea: you mentioned that you usually have an introductory line before the image. Why don't you try putting the page-break-after: avoid; attribute on that paragraph? That would (in theory) cause that paragraph to follow the image onto the following page.

[tomjohnson1492]

Thanks Kevin. That might work -- I'll let you know.

[navoff]

Yes, the page-break-before attribute doesn't seem to work (at least not for the "avoid" option). I placed each image inside a set of <p></p> tags and then created a paragraph class I called "figure". Then using the auto-numbering feature in the style sheet added a caption after each image. Sometimes the caption would appear on the next page. So, I set the "page-break-before" attribute to "avoid" but it still ended up on the next page. Then I changed the paragraph the image was in to a new class called "image" and set the page-break-after attribute to "avoid". Only then did my image and its caption remain together.

[kristil]

Yes, the page-break-before attribute doesn't seem to work (at least not for the "avoid" option).

Did you happen to create a bug request for this? I'm curous whether MadCap has confirmed this as a bug so that we can stop trying to use it. We're formatting page breaks in our CSS right now.

[navoff]

Yes, the page-break-before attribute doesn't seem to work (at least not for the "avoid" option).

Did you happen to create a bug request for this? I'm curous whether MadCap has confirmed this as a bug so that we can stop trying to use it. We're formatting page breaks in our CSS right now.

Yes, I have. I've gotten the auto-response from them that they've received it but haven't seen anything yet about it being assigned a number (but, then, I only just discovered the problem and submitted the bug today, so not really expecting to see any other response yet).

[tomjohnson1492]

I have a special class called keep that I apply to content that I want to keep with the next item. For example, I have p.keep, li.keep, p.result_keep classes. Each of these classes has the page-break-after:avoid attribute. It's kind of a pain to apply them, but it does work. For example, with each image, I apply the p.keep or the p.result_keep class because I don't want the image separated from the figure caption below it. Additionally, if I have a result statement, I sometimes apply the p.result_keep attribute to it because I have an image after the result, and I want the result statement to appear right before the image, rather than having the image orphaned.

[tomjohnson1492]

I have another problem I'm running into. My notes, tips, and cautions have a border around them, but they aren't in a table. Sometimes when I generate my printed output in Word, the note paragraph breaks from one page to another. Is there any property I can apply to the paragraph so that the paragraph itself won't break across a page? Barring that, do you know of a Word macro that would process that?

[LTinker68]

Is there any property I can apply to the paragraph so that the paragraph itself won't break across a page?

I think that's what the page-break-inside property is for.

[LTinker68]

I have a special class called keep that I apply to content that I want to keep with the next item. For example, I have p.keep, li.keep, p.result_keep classes. Each of these classes has the page-break-after:avoid attribute.

For future reference, you could use a generic class called "keep" that has the page-break-after:avoid attribute set. Since it's a generic class, you can apply it to any tag, so long as that tag doesn't already have a class applied to it. So in your example, you could use the same generic class for the <p>, <li>, etc. tags instead of having to create p.keep and li.keep classes. Although you would have to create a p.result_keep class since you couldn't have the "result" and the "keep" classes on the same tag. At least I don't think you can -- can't say as though I've ever tried it.

The downside is that you can't create a generic class through the Flare GUI, but you can modify it once you've added it manually to the stylesheet. Although the Advanced Stylesheet Editor view has a glitch when viewing generic classes.

[tomjohnson1492]

Lisa, thanks for the tip.

Tom

[Paul Griffiths]

Although you would have to create a p.result_keep class since you couldn't have the "result" and the "keep" classes on the same tag. At least I don't think you can -- can't say as though I've ever tried it.

Multiple classes, each separated by a space, is legal CSS, and you can apply it through the Attributes Window. Can't guarantee it'd work for this particular problem, though.

[LTinker68]

Multiple classes, each separated by a space, is legal CSS, and you can apply it through the Attributes Window. Can't guarantee it'd work for this particular problem, though.

Cool. I wondered if a comma would work, but I'll have to try a space sometime. Thanks.

[kristil]

Does anyone know what the "inherit" value does in these page break properties?

[LTinker68]

Inherit for any property means that it uses whatever value was set for the parent tag. So if you have a custom <p> class and set its page-break-whatever property to "inherit", then that custom class will use whatever value you have set for that same property in the parent <p> tag. If you don't have anything set for the parent <p> tag then I'm not sure if it'll go up another level (which may be the <body> tag), or if it just uses the default value (i.e., whatever "not set" corresponds to) for that property for the <p> tag.

Personally, I never use the inherit value for any property because that's the default setting, so there's no reason IMHO to ever set any property to be "inherit".

[navoff]

BTW, this is a known bug that MadCap is working on. I just got this email from technical support;

Thank you for your feedback. The bug you have reported was previously discovered and has been logged as item 24598. For now, the workaround you provided in the steps will work, but our developers are working to fix the behavior in a forthcoming version of Flare.

The work around I listed in my bug report was to style the preceding paragraph with "page-break-after: avoid".

[kristil]

We are inserting "page-break-after: avoid" inline for a couple of special recurring situations. In the meantime, we added the "page-break-before: avoid" to the necessary styles in anticipation of Macap fixing the bug. Wouldn't adding "page-break-after: avoid" to the preceding styles do strange things? Say, to a procedure, if we were trying to avoid separating the steps from the screenshots? Wouldn't we also be keeping the procedures steps together? I haven't specifically tested this particular example yet...

[beagley]

Hi,
I am struggling with many of the same issues in this thread.

1. I set page-break-inside to avoid for a div, and I use that div on every step in a procedure. (I use a custom, auto-numbering scheme, not <li>). This does not work, my steps are still split up between pages when I generate a PDF in Flare 4.

2. I set page-break-inside to avoid for my custom p.mediaobject, the block element that I put around all of my images. This does not work. Images still run off the end of the screen (instead, a long image should push the element to the NEXT page, right?) when I generate a PDF in Flare 4.

Anyone know if page-break-inside avoid really should be working in these circumstances?

Anyone else have images running off the bottom of their PDFs?

[kristil]

Yes, some of our images run into the footer, or off the page. Some of our tables too. But not all of them. Some of them break correctly across pages.
I'm wondering if it has something to do with the body frame of the page layout...

[beagley]

Thanks, kristil. Good to know I'm not the only one!

Has anyone hit upon a good CSS setup to prevent images from being chopped/running into the footer?

General CSS guidelines that I've checked out suggest putting images in a block (<p> or <div>) and applying styles to that. But I can't see how to avoid breaks inside an image. I imagine it would be a tricky thing, and part of the PDF creation process, as Flare will have to know how long the image is...

[Andrew]

Also bitten by this annoying bug, and submitted report.

[beagley]

Okay-- there ARE solutions to this problem, they ended up in a different thread, I guess.

Basically-- Take a hard look at all the nested elements around your images. You probably don't just have an img tag... it's probably inside a <p> tag, or a <div> tag, or so forth.

If you trace the "page-break" options for each of those elements, you can eliminate this problem, and your images will no longer run into your footer or break over pages.

You can use whichever block elements you need for you layout, just make sure that the last block element (the <p> or <div> element) that surrounds your <img> has the correct "Do not break within!" settings in the stylesheet.

Sorry for the rushedness of this response, off to a meeting...
-d

[KevinDAmery]

Also bitten by this annoying bug, and submitted report.

Not really a bug. The IMG tag doesn't support placement settings in the HTML \ CSS spec. Instead, you apply those settings to the containing tag (P, DIV, TD, whatever).