Smart html page break - html

I make html reports and print them (or PDF) and want to make smart page breaks. I want to avoid that the heading is on one page and the paragraph on the next page. In that case the next page should start with the heading.
I have tried page-break-after:avoid but with no success. And I don't understand why. If I try page-break-after:always it works. So I guess the avoid functions is not that good. I always use IE8.
Is their any script way to calculate where the page break should be? If their is I can just make a page-break-after:always at that place.
Thanks!
/Georg

This class is only a hint. A page break is only avoided if it can be avoided. If it would mean the result would have to be clipped, a page break will be inserted after all.
I don't think it's possible to calculate where the page breaks would be, because it depends on numerous variables, including printer margins and paper size, which are not accessable in CSS nor JavaScript.

I used TCPDF (http://www.tcpdf.org/) to do something similar. It was easy to get the page breaks in the right place though as it was printing tabular data so I could do a row count.
You could try it with a character count but it wouldn't be as accurate.

Related

SSRS Page Breaks. Past the end of my rope

(This is for SSRS 2012)
Hey guys. I know this really isn't the way to do things, but I am just completely done struggling with this.
Here is a zipped-up .rdl file for a report I'm working on: http://www.flowdex.net/files/amalgam_rdl.zip. Included in the .zip file is a .pdf with a typical output of that report.
I am getting several phantom page breaks that I simply cannot understand. I have scoured the internet, including stack overflow, and none of the regular suggestions have worked. I have made sure everything fits within the dimensions of a page, margins included, and have looked at the properties of every element in the report. Nothing gives ANY CLUE WHATSOEVER why a blank page must be inserted within a tablix that goes past one page, or why there is a page break in-between the two tablixes.
I don't know how viewing my .rdl will work... obviously you're not getting a database, so you won't have any way to test it. All I'm asking is for someone to take a quick glance at how everything is formatted and let me know if anything major stands out.
Sorry for the terseness, and I guess I'd understand if this question gets ignored / rejected. I just do not understand why this is so difficult. Teaching myself PHP was a million times easier than finding a stupid page break in SSRS.
Thanks in advance, and apologies again for being rude. This is crazy frustrating.
It looks to me like what you should do is take the DIV6 image and [Seiten] move them over to the left a little, then take the report body and collapse it to be right up against them. Right now, with your margins I think you are going over and it creates that phantom page thing.
Put visible borders onto everything. Start with the obvious: tablix's,text boxes, lists, images but also add to Report, Header, Footer, Body etc.
Make them all a different colour. You should then see which object is spilling onto the other page.
Note: adding a border adds a pixel (or point) to the width and height, so make sure you adjust for that when removing them or identifying the culprit.
Plan B:
From the screenshot, your empty page does not have a Batch:[Name] which indicates it could the way you are calculating your group maybe causing the problem (if it was due to pushing an element too wide, the header should have the same [Name] as the previous page.

When printing my web page it has some margin issues

So when i'll try to print out my document it will start colliding and does not show it the same as it shows in browser. Is there a workaround which wouldn't involve changing any of my css schema just for in case of printing?
As seen from image (i don't have enough rep to post it as image) there is a lot of room in the top and in the sides. I don't understand why is that like this, although i turned margins in the settings to 0 when choosing printing options.
In browser the rows are bigger and no collision.
I don't know if code is needed at this point but could also provide if needed.
It is possible to use media queries just for printing
#media print{
//You can do anything you want here and it will only affect the printed pages.
// Just use normal CSS.
//You can even put the unit cm to a good use here.
}

Is there a way to tell how many lines an HTML snippet will take up when rendered?

Given some HTML code, is there a way (in Ruby on Rails, in particular), to tell how many lines the HTML will take up on the screen when rendered?
-- Clarifications:
It's in an erb file, but i'm just talking about one string that will be rendered as HTML so yes, text that contains HTML tags.
-- EDIT:
The bigger picture: I want to know how tall a particular segment of the page is so I can conditionally include certain "Next/Previous" links on the bottom. These navigation links appear above the aforementioned segment, so I only want to include the links on the bottom if the segment is very tall.
Essentially, no - it all will depend on the CSS being applied by the browser and the platform itself and lots of other variables. You can, however, detect the dimensions of elements once they are rendered.
Update
Pursuant to your edit, you pretty much need to do this on the client using JavaScript. It's actually pretty straight forward.
Add the Next/Previous element HTML to the page but hide it with CSS
Detect the height of the element in question
If the height is above you threshold size, display the hidden Next/Previous
With Jquery (the framework of champions):
//assuming a height of 200 as the threshold
var THRESHOLD_HEIGHT = 200;
if ($("#segment").height() >= THRESHOLD_HEIGHT) {
$("#links").show();
}
No.
How can you possibly know how wide my screen will be when I visit your website?
Look at YUI Paginator http://s831.us/hW6Dpd
You would probably be best off solving this problem with javascript (or even better a javascript library like jquery). You could measure the height of the div containing the text you want to paginate and dynamically break it apart and add links in the browser. There would be several ways of solving this problem but I would probably do it by sequentially chopping off paragraphs from the end and remeasuring and repeating until it was short enough. Obviously the chopped off paragraphs would have to be collected somewhere to be used for the next page (and recursively measured again in case the second page was also too long).

Printing an envelope from a web page

Is there a way to specify the media type / page size to be used when the user prints a web page? Also, can I lay out text so it will be printed at specific positions?
For example, I’d like to render an address on a web page that the user can then print on a letter-size envelope.
Thanks!
EDIT
By media type, I meant the type of print media, such as letter-size, legal-size, #10 envelope, etc.
I think the bottom line is best use a PDF. Sadly, Browsers suck very much at printing.
Is there a way to specify the media type / page size to be used when the user prints a web page?
You can specify a CSS style sheet to apply only to printing using media="print". As to the page size, there is no reliable way of specifying that. You will have to rely on the user to do this for you.
Also, you will have to rely on the user to remove the header and footer that most browsers add to the printed result.
Also, can I lay out text so it will be printed at specific positions?
In theory, yes. You can use physical unit values cm or in to position elements on the page. I'm not sure whether these work with 100% reliability though, because printer specific margins may change the result - you'd have to test.
You may want to try using CSS for different mediatypes, though I don't know if this will give you the precise control you're asking for.

Any workaround for printing repeating backgrounds?

We have an HTML page which displays a bunch of pretty bars using divs and repeating backgrounds. We are in the process of making a report out of this that can be printed nicely, but this may take some time because we don't have a reporting framework in place. As an interm solution we'd like to make the HTML version printable. The background of the divs are the only problem, and they don't print because of the default setting (which can't be enabled because the workstations are locked down).
I have found a work around for printing background images, but this doesn't work when the background needs to be repeated.
Are there any other work arounds which might be able to help? I have also been trying to insert an image inside the dive and stretch it, but this is throwing off all the other relative positions and is proving to be very difficult to fix. I am still looking into this however.
I have used this ActiveX Component in situations where controlling the printer output was absolutely neccessary (think printing stickers etc).
The function you'd want is : printBackground
However this doesn't come with their free license but perhaps the cost of that license outweigh the other work arounds implementation time.
Drawback: IE only.
If you can educate your users, there is an option in the print dialog box of IE and Firefox that is labeled something like 'Include Background Images' or 'Print Background Images'
This will include repeating background images.
I couldn't load the link, and I may not be understanding the problem correctly, but...
This is more of a work-around than a solution, but would you be able to make a single image that just appears to be repeated? Or at least, is repeated (for variable browser and screen sizes), but is large enough to be 'proper' for printing (which is a much more standard size)?
The easiest way I can think of achieving this is to have different stylesheet for printing that uses standardised images that fit the containers printed on paper.
The display stylesheet would continue to use the repeated images which wouldn't hinder performance as the full images loaded in the print stylesheet would only be loaded when the page is sent to the printer.
...at least, that's what the HTML spec says should happen. Whether this is actually the case, I can't be 100% sure.