I'm not applying it to the img -- I'm applying it to p.Image. page-break-before: avoid doesn't work. The only workaround I am aware of is to apply a style to the paragraph before my image with page-break-after: avoid, and that is extremely annoying.KevinDAmery wrote: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).Andrew wrote:Also bitten by this annoying bug, and submitted report.
CSS "page-break-before: avoid" property for images?
Re: CSS "page-break-before: avoid" property for images?
Flare v6.1 | Capture 4.0.0
Re: CSS "page-break-before: avoid" property for images?
You're right. The implementation of "page-break-before: avoid" doesn't work. The "page-break-after: avoid" does. It's a known bug. Hence the need to style the preceding paragraph with "page-break-after: avoid". While this kinda works, what often happens is that the page break will occur before the paragraph preceding the paragraph with the image and both paragraphs end up on the next page.Andrew wrote:I'm not applying it to the img -- I'm applying it to p.Image. page-break-before: avoid doesn't work. The only workaround I am aware of is to apply a style to the paragraph before my image with page-break-after: avoid, and that is extremely annoying.KevinDAmery wrote: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).Andrew wrote:Also bitten by this annoying bug, and submitted report.
If I really don't want an image to go to the next page, I have used a couple of things, one is to create a paragraph style set to a smaller font and smaller spacing between paragraphs. Sometimes this is enough to keep the image on the page I want.
Another is to select the image, right click and go to Object (or type Ctrl+Alt+B). Then I'll select the Print Size tab. I'll change the width to Automatic and change the height to an amount that will permit the image to stay on the page. It may take some trial and error to get the results I want. Supposedly, this should only affect the printed output (I haven't had a chance to test the on-line help to see if that's true). Of course it means the displayed image is going to be smaller. As long as it doesn't get too squishy, it is a viable work around.
Also realize, I'm outputting to PDF. I can't speak for what behavior you'll get with other output mediums.
JRP
"How many slime-trailing, sleepless, slimy, slobbering things do you know that will run and hide from your Eveready?"
--Maureen Birnbaum, Barbarian Swordsperson
"How many slime-trailing, sleepless, slimy, slobbering things do you know that will run and hide from your Eveready?"
--Maureen Birnbaum, Barbarian Swordsperson
Re: CSS "page-break-before: avoid" property for images?
Wow! I have not had to do any of the above machinations.
I also output to PDF, and I do not need to fiddle with individual images or do any size adjustments or apply a special style to either the preceding or following paragraphs.
Here's the full description of what I do:
1. Every <img> is inside a custom <div> tag. I am using div.MEDIAOBJECT, but you can make a subclass of div with any name.
2. For that custom div, "page-break-inside" is set to "avoid" in the "Medium: print" section of my stylesheet.
That's it. I don't have anything strange set for my <img> tag, either. It's plain jane. Sometimes my images are deeply nested inside lists and procedures and other divs, sometimes they just hang out in the <body>. As long as the <div class="MEDIAOBJECT"> is the block item that directly surrounds the <img src="">, everything is smooth. I never have images break between pages, I never have funky "images run into the footer" problems.
Please let me know if I misunderstand the problem... and heck, there may indeed be a bug with one of the other properites (page-break-after, etc.) I just know this problem hasn't created extra work for me.
-d
I also output to PDF, and I do not need to fiddle with individual images or do any size adjustments or apply a special style to either the preceding or following paragraphs.
Here's the full description of what I do:
1. Every <img> is inside a custom <div> tag. I am using div.MEDIAOBJECT, but you can make a subclass of div with any name.
2. For that custom div, "page-break-inside" is set to "avoid" in the "Medium: print" section of my stylesheet.
That's it. I don't have anything strange set for my <img> tag, either. It's plain jane. Sometimes my images are deeply nested inside lists and procedures and other divs, sometimes they just hang out in the <body>. As long as the <div class="MEDIAOBJECT"> is the block item that directly surrounds the <img src="">, everything is smooth. I never have images break between pages, I never have funky "images run into the footer" problems.
Please let me know if I misunderstand the problem... and heck, there may indeed be a bug with one of the other properites (page-break-after, etc.) I just know this problem hasn't created extra work for me.
-d
-
alaltenburg
- Sr. Propeller Head
- Posts: 342
- Joined: Mon Nov 03, 2008 9:33 am
- Location: The heart of America
Re: CSS "page-break-before: avoid" property for images?
I have been having a similar issue. I have a footer (copyright information) and it always shows at the bottom of the body, but if there is an image/caption surrounded by a div, it overlaps the footer. I also set the div to page break during:avoid so the image and caption are always together, but sometimes they run into the footer and even off the page. It only happens with the divs and not the body.
The Moon is the first milestone on the road to the stars.
— Arthur C. Clarke
— Arthur C. Clarke
Re: CSS "page-break-before: avoid" property for images?
Huh. That is mysterious.
I guess it could be caused by either a) another style element taking precedence, or b) the page layout has the body overlapping the footer slightly.
I guess it could be caused by either a) another style element taking precedence, or b) the page layout has the body overlapping the footer slightly.
-
alaltenburg
- Sr. Propeller Head
- Posts: 342
- Joined: Mon Nov 03, 2008 9:33 am
- Location: The heart of America
Re: CSS "page-break-before: avoid" property for images?
I know it's not the page layout, but have no idea what could be overriding....
The Moon is the first milestone on the road to the stars.
— Arthur C. Clarke
— Arthur C. Clarke
Re: CSS "page-break-before: avoid" property for images?
If you are comfy with it, it may help to open the topic with a text editor and review all the tags. There might be some surprises in there.
Oh-- and though it is obvious: Make sure that the break-during avoid setting is set for the PRINT medium, and make sure that your PDF target is set to use that print medium of the stylesheet.
Oh-- and though it is obvious: Make sure that the break-during avoid setting is set for the PRINT medium, and make sure that your PDF target is set to use that print medium of the stylesheet.
Re: CSS "page-break-before: avoid" property for images?
I haven't seen anything about the "page-break-before: avoid" bug being fixed in the release notes. Things running into the footer and off the page is another issue that we experienced, too. We don't use div tags around images, but this happened to us with tables that had large rows. They ran over into the footer. Rewriting to reduce row content seemed to help. Does this happen with large images? I don't know if this is a bug or a CSS quirk. Maybe if the image is large enough, it isn't properly contained by the body proxy in the page layout?
Re: CSS "page-break-before: avoid" property for images?
I think you misunderstand my problem. It isn't that images are breaking in the middle between pages. The problem is white-space. If I have an image (and it's preceding paragraph) that I don't want breaking to the next page because it would produce a big, ugly white space on the preceding page, then I'll go through the machinations listed above. A large expanse of white space on a page is usually an indication that the topic is finished. More often than not, these issues come up in the middle of a topic. So, I'll do things like reduce the size of an image for print output if it will prevent it from moving to the next page and leaving a large expanse of white. Often, the preceding paragraph needs to stay with the image as it contains information introducing that image. They can get very testy here if the image gets separated from the paragraph via a page break, especially if it's a right hand paragraph and the image ends up on a left hand page. The "page-break-before: avoid" attribute doesn't work. I can't keep an image or a paragraph from breaking to the next page using this setting. Setting the "page-break-after: avoid" means that Flare will insert a page break before a block item to avoid a page break after it.beagley wrote:Wow! I have not had to do any of the above machinations.
I also output to PDF, and I do not need to fiddle with individual images or do any size adjustments or apply a special style to either the preceding or following paragraphs.
Here's the full description of what I do:
1. Every <img> is inside a custom <div> tag. I am using div.MEDIAOBJECT, but you can make a subclass of div with any name.
2. For that custom div, "page-break-inside" is set to "avoid" in the "Medium: print" section of my stylesheet.
That's it. I don't have anything strange set for my <img> tag, either. It's plain jane. Sometimes my images are deeply nested inside lists and procedures and other divs, sometimes they just hang out in the <body>. As long as the <div class="MEDIAOBJECT"> is the block item that directly surrounds the <img src="">, everything is smooth. I never have images break between pages, I never have funky "images run into the footer" problems.
Please let me know if I misunderstand the problem... and heck, there may indeed be a bug with one of the other properites (page-break-after, etc.) I just know this problem hasn't created extra work for me.
-d
While I have tried some of the suggestions mentioned in the Printed Output documentation to adjust the flow of text (short line elimination, widow and orphan control), I have yet to see that it actually works. Supposedly the default is set to have a 2 line widow and orphan control turned on automatically but I have often had instances where only one line of a paragraph showed up on the next page. Since I hadn't changed the default settings, I don't know why it allowed that to happen. I've even had it where only one word appeared at the top of the next page. I tried the short line elimination but to no avail. I finally gave up and found other work arounds, like adding paragraph breaks to force more text to the next page or making nearby images smaller to pull text back to the preceding page.
JRP
"How many slime-trailing, sleepless, slimy, slobbering things do you know that will run and hide from your Eveready?"
--Maureen Birnbaum, Barbarian Swordsperson
"How many slime-trailing, sleepless, slimy, slobbering things do you know that will run and hide from your Eveready?"
--Maureen Birnbaum, Barbarian Swordsperson
Re: CSS "page-break-before: avoid" property for images?
Yeah, I'm a bit suspicious about the orphan and widow controls. They especially don't seem to work in auto-number formatted tags.
As for the image covering the footer, it's been determined that if a tag contains a floating element then it doesn't account for the size of the floating element in its determination of where a page break should occur. So a page-break-inside:avoid on a tag may not appear to have any affect because the paragraph itself fits on the page, but the floated element (e.g, image) is bigger (taller) so it hangs over the footer. In that case, your options are to make the image smaller, or to create a custom paragraph (for example) with a page-break-before:always attribute set on it, and apply that class to the paragraph containing the image so the whole paragraph and its floated element moves to the next page.
Sometimes you can adjust things, too, by moving where the floated element is located in the page code. For instance, if it was inserted at the beginning of the second sentence in a paragraph, then try moving it to the beginning of the paragraph. I also noticed differences if I put the image at the front of a paragraph or if I put it at the front of the header preceding that paragraph.
As for the image covering the footer, it's been determined that if a tag contains a floating element then it doesn't account for the size of the floating element in its determination of where a page break should occur. So a page-break-inside:avoid on a tag may not appear to have any affect because the paragraph itself fits on the page, but the floated element (e.g, image) is bigger (taller) so it hangs over the footer. In that case, your options are to make the image smaller, or to create a custom paragraph (for example) with a page-break-before:always attribute set on it, and apply that class to the paragraph containing the image so the whole paragraph and its floated element moves to the next page.
Sometimes you can adjust things, too, by moving where the floated element is located in the page code. For instance, if it was inserted at the beginning of the second sentence in a paragraph, then try moving it to the beginning of the paragraph. I also noticed differences if I put the image at the front of a paragraph or if I put it at the front of the header preceding that paragraph.
Lisa
Eagles may soar, but weasels aren't sucked into jet engines.
Warning! Loose nut behind the keyboard.
Re: CSS "page-break-before: avoid" property for images?
Lisa, do you think any of the tips and issues you mentioned could help us with our issue of tables running into the footers? I haven't done much (successful) troubleshooting with table code. Rewriting helped most in most instances, but not all.
In general, besides the bug with page-break-before: avoid, the places where our team has had trouble with CSS not meeting our expectations in print have been places where our format could use improvement, IMO. We weren't starting procedures on new pages, some topics had gratuitous amounts of images, some topics were walls o' text, and some headings were used out of order (H5 following H3, for example). I reorganize and rewrite to correct these things as I'm able and it clears up a lot of issues. As a team, our goal is to format page breaks using styles rather than inline page breaks, because we single-source our content. We also usually can't get permission for an additional style to fix occassional problems. On the one hand, this has forced improvements to our documents in order to be able to produce print docs from Flare that met our standards. On the other hand, it added a ton of overhead to our Flare implementation.
In general, besides the bug with page-break-before: avoid, the places where our team has had trouble with CSS not meeting our expectations in print have been places where our format could use improvement, IMO. We weren't starting procedures on new pages, some topics had gratuitous amounts of images, some topics were walls o' text, and some headings were used out of order (H5 following H3, for example). I reorganize and rewrite to correct these things as I'm able and it clears up a lot of issues. As a team, our goal is to format page breaks using styles rather than inline page breaks, because we single-source our content. We also usually can't get permission for an additional style to fix occassional problems. On the one hand, this has forced improvements to our documents in order to be able to produce print docs from Flare that met our standards. On the other hand, it added a ton of overhead to our Flare implementation.
Re: CSS "page-break-before: avoid" property for images?
I ran into problems recently because I wanted to create a 5" x 8" PDF print version that would be sent to a printhouse for printing and binding, but we also wanted a version that could be viewed via the company intranet. I could have left the "soft" version at the 5 x 8 size, but that causes such a problem when trying to print locally since none of our printers can handle that page size. So I decided to design the "soft" version to be the standard 8.5 x 11. That caused some other problems because A) I had to create a second set of page layouts, and B) I had to create a new medium in the stylesheet and copy the print medium styles into the new medium area of the stylesheet so that I could style the two outputs differently when needed. For instance, for the "hard" print version, I had to force TopicD to break to the next page, but in the "soft" print version, TopicD was fine and it was TopicF that I had to force to the next page. So I had to get creative with my tags. I created a tag called "h1.pageBreakBeforeHard" that had a forced page break in the print medium but did not force a page break in the "soft" print medium. I created another tag called "h1.pageBreakBeforeSoft" tag that was the opposed -- no page break in print medium but a page break in the soft medium.
The moral of the story is... You have to do some more work in print output because it invariably doesn't break something where you want it to break. So you have to build and review the output and sometimes use custom classes with page-break-before set to always or however you want to force the page break. In your case, you could try playing with the page-break settings on the <td> tag, since that would control whether a cell breaks or doesn't break. If you're using paragraph tags inside the <td> tags, then you'd want to try the page-break properties on the <p> tag. You can either create a custom paragraph tag and apply it to all the paragraphs in the table cells, or go with the easier option, which is to create a complex selector that controls how the paragraph's page break properties behave when they're inside a table cell.
The moral of the story is... You have to do some more work in print output because it invariably doesn't break something where you want it to break. So you have to build and review the output and sometimes use custom classes with page-break-before set to always or however you want to force the page break. In your case, you could try playing with the page-break settings on the <td> tag, since that would control whether a cell breaks or doesn't break. If you're using paragraph tags inside the <td> tags, then you'd want to try the page-break properties on the <p> tag. You can either create a custom paragraph tag and apply it to all the paragraphs in the table cells, or go with the easier option, which is to create a complex selector that controls how the paragraph's page break properties behave when they're inside a table cell.
Lisa
Eagles may soar, but weasels aren't sucked into jet engines.
Warning! Loose nut behind the keyboard.
Re: CSS "page-break-before: avoid" property for images?
Thanks, Lisa. I forwarded your suggestion to our CSS guy (DurtyMat).