keepwithnext

[livetoski]

I want to keep a step result with a screenshot in a pdf. Seems easy enough. I didn't think I needed to create a new span class for this, but I will if I have to but I shouldn't think I need to.

I have a style:p.stepResultScreenshot and for this style I have defined PrintSupport page-break-after: avoid. I don't have page-break defined for the following image which has the style: img.screenshot.

This is not working as it should. My heading ends up orphaned on the page, and my screenshot bounces to the next page, unaccompanied. I would expect that my heading would pop to the next page to accompany my image. I have tried increasing and decreasing widows and orphans. I have tried defining the image as page-break-before: avoid. I have tried using a combination. I have searched my CSS in a text editor to see if there was something at the p or body level that I had forgotten about that defined a page-break. Nothing that I can see. The img style itself has nothing defined, and neither does p style.

My headings are defined page-break-after: avoid and it works great. Or at least they seem to be. Did something change in 6.1?

I might be too fuddled now to see straight, so I need suggestions. Thanks. This also might be a case of Flare not playing nicely with me.

[whunter]

The only way that I have been reliably able to keep items togther is to enclose the items in a DIV that is set to page-break-within:avoid.

I have other styles with page-break-before/after:avoid, and sometimes they work, and sometimes they don't. I'm sure something else is taking higher priority but I don't know what. Flare in general does not seem very "smart" in regard to automatically moving things up and down for page breaks or widow/orphans.

So far, the DIV has always worked for me. I don't know if DIV is at the top of the priority list or what.

[livetoski]

I just looked back at my previous project, regenerated some stuff with the same formatting, it's working beautifully. The page-break-after is hauling my heading forward to the next page with the following item. A div tag should not be required, or a span class. You are right, sometimes it works, sometimes it doesn't. It's pretty much the same style sheet. If I can't get it work before publication next week, I will have to use div or a span codes. Yoikes.

Thanks. Linda

[ajturnersurrey]

I use a p class p.keepwithnext

Code: Select all

p.keepwithnext
{
	page-break-after: avoid;
	column-break-after: avoid;
}

I use it often to keep figures with the caption that follows.

[i-tietz]

For me it never works:
1. For the print medium I created a class for image captions and set column-break-before and page-break-before to none ... it doesn't work.
2. I added a class for the image paragraph and set column-break-after and page-break-after to none ... it doesn't work.

I tried to find out whether it works at all and inserted an empty paragraph, produced a PDF, had a look the page break, inserted an empty paragraph, and so on
=>
As soon as there's not enough space for the caption, it jumps to the next page, leaving the image behind ...

Stuffing the image and its caption into one DIV is out of question because sooner or later my colleagues will forget about it ... they will want to go the easy way and drag the image file into the document, just like they do for online output. And honestly: I lack the arguments to explain why the software doesn't behave as it should.

[livetoski]

two projects, identical style sheets. In one project the keep with next (p.style page-break-after: avoid) works beeeyooteefully. Same style sheet, different project, I can't even insert page breaks. the only difference in the projects is that originally the following item was also a p.style, and I changed it to be an img.style and maybe that jinxed it?

[i-tietz]

the only difference in the projects is that originally the following item was also a p.style, and I changed it to be an img.style and maybe that jinxed it?

Correct guess, I think.
If you insert an image (drag&drop) it's always inside a <p> tag - even if you drag it into a table cell the <p> is inserted automatically. And the page-break-after refers to the element following immediately, means: the next element inside the <p>. It does not refer to the element that follows the element that includes the image ...

Means:
This might work: <p><img /> <br /><span>text</span></p>
This won't:
<p><img /></p>
<p>text</p>

[livetoski]

I have tested it out, and that is correct. I should have realized that if it took me effort to define the image as image only, then it might be the wrong thing to do. This just reflects my total lack of experience with code.
Thanks. Now to fix all my images.urf!

[LTinker68]

1. For the print medium I created a class for image captions and set column-break-before and page-break-before to none ... it doesn't work.
2. I added a class for the image paragraph and set column-break-after and page-break-after to none ... it doesn't work.

None isn't a valid value, or if it is, it's not the value you want. You want to set the value to avoid if you don't want it breaking.

[i-tietz]

None isn't a valid value, or if it is, it's not the value you want. You want to set the value to avoid if you don't want it breaking.

True - sorry!! *slapping my forehead*
I meant "avoid" ...

[livetoski]

No matter what you call it, avoid for page-break does not work if one of the items is img.style, or perhaps that holds for anything not a p.style.

[LTinker68]

No matter what you call it, avoid for page-break does not work if one of the items is img.style, or perhaps that holds for anything not a p.style.

It's quite possible that it wouldn't work for img.style because it's not the parent tag usually -- it's almost always the child of another tag. For the most part my screenshots are inside paragraph tags, so my page-break-after is on my p.screenshots style and my page-break-before is on the p.captionFig that follows it.

I think the only way page-break-before or -after would work on an img tag is if the img tag was on a line by itself and not inside a container tag. The only way to get that to happen in Flare is to open the topic in the Internal Text Editor and manually insert the img tag or remove any container tags. In other words, it would only work if the page code looked something like this:

Code: Select all

<p>Paragraph before image.</p>
<img src="..." />
<p>Paragraph following the image.</p>

[livetoski]

That's exactly what I did Lisa, and it didn't work. I went into the text editor to make it happen. It might have been a clue that it wasn't easy to do that it might not be the right thing. I just had the idea that images should be in image tags and that I was asking for trouble putting an image in a p tag. It just means I have to create a p tag specifically for images, no big deal. I will go back to the flare documentation and see if they are clear about that. No time at the moment.