I have a page with a wide (say around 3000px) horizontal graph which is normally scrollable.
In the printing version I render the entire graph, (I actually have a separate JAvascript/HTML code for the printing version), so it takes lets say three A4 widths (landscape) on the screen.
In this situtation I see the browser (FF3 in this case) does not allow me to print the wide page on several paper sheets (based on the print preview).
It seems like the only way to have the entire document printed is to have the user set zoom level to 30%, and then the entire graph fits on a single A4.
I must be missing some CSS directive there, but was unable to google it anywhere.
Will appreciate pointers/ideas.
Thanks.
You could add a rotation transformation to the print stylesheet. A partial solution as a long table will now be too wide...
.rotated-when-printed {
-moz-transform:rotate(90deg);
-webkit-transform:rotate(90deg);
-o-transform:rotate(90deg);
filter:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',M11=6.123233995736766e-17,M12=-1,M21=1,M22=6.123233995736766e-17)
}
<!-- some very wide table -->
<table class="rotated-when-printed">
...
</table>
(a previous answer of mine to this question was deleted, don't know why: I try again)
Long time I looked for a CSS based solution on this problem, and I think it's not possible to have vertical page breaks of HTML tables through CSS (at least not page breaks on tabular data in a HTML TABLE tag, but it should be possible with tabular data organized in DIVs).
I think the only solution is to let javascript do the splitting.
When the page is loaded, javascript can check if table is wider than the page width desired: in that case it's possible to dynamically create a new table and duplicate in it only the columns that are outside the allowed width, and deleting them from original table.
All the process is a bit tricky, but results are satisfying.
It's also possible to let the javascript code run only for printing and not for the table showed on screen: a print button on the page can be arranged to run a server side code, for example php, which can generate a pdf thought the library wkhtmltopdf, passing to it the html page where is the table, including the javascript code. In fact wkhtmltopdf generate a pdf simulating a browser, and the javasript code will be correctly executed.
Now, this javascrpt library already exist, I wrote it and works very well (at least for my needs), and it freely available on Internet: I don't want to link it because already had a previous answer deleted, and I don't know if it was for that reason. But if someone is interested, you can ask in comments and I'll give it.
Printing html across multiple pages like this is not a nice thing to have to do
You probably want to break the graph up into page sized chunks (e.g. a div for each page) so when they are floated beside each other the graph looks as required. Then use CSS page-break-before or page-break-after to ensure that the printed pages are broken up correctly and you don't lose any content off the side of the page.
Also ensure that you have the media type specify print for the css you use for the printable version.
You can't control how HTML is printed in any real way - HTML/CSS/JS has no access to the print driver or browser print settings.
The only option is to convert your printable output to PDF (or some other print-centric format) and serve that instead.
Related
I have html like
<table>
<tbody></tbody>
</table>
This template is getting converting to PDF with puppeteer where my tabular data is splitting across two pages however i dont want tabular data to split across the pages
I have tried all the solutions of SO for this issue https://github.com/puppeteer/puppeteer/issues/6366
but still I am not able to find the solution
I have tried page-break-inside :avoid in tbody/tr its not working
I know this css works on block level element so I have tried with wrapping the table in div and applied that css on div still table is breaking in pages
Please help if you have any solution
First of all, you need to generate your pdf for print. To do it, use this method :
await page.emulateMediaType('print');
This will allow you to control the presentation of content for print with css like break-before, see more here : https://developer.mozilla.org/en-US/docs/Web/CSS/Paged_Media
Answer
You have multiple solutions so :
If your table is small enough, you can put it on one page, with a css rule like style="page-break-before: always", to ensure that it start on a new page.
If your table is too long (most of the case for dynamics table), generate your pdf for print will repeat the table header on each page, so the pdf will still be readable. If you need to ensure that some elements groups will stay together, you can apply css rules like we saw above.
It could be an hard work to obtain precise render with puppeteer, but puppeteer is probably the best to do it for now. Be brave.
I'm writing a script to automatically transform plain text test documents into HTML tables with proper column width, step numbering, etc. Each page will have some part of a big, long table in it. I also need to have a header and footer on each page to comply with FDA regulations in this area- it has simple information about copyright, page number, part numbers, etc.
I have noticed some of the prescribed CSS/HTML tools for this task don't seem to work.
1)The #page rule with margins and the ability to put content into those margins would solve this problem pretty neatly, but I don't think it was ever implemented.
2)Many of the suggested answers to this question on SO:
How to add a header and footer to each printed page of a web document (without browser restriction)?
Is there a way to get a web page header/footer printed on every page? end up with some combination of: The footer/header render on top of text, or somehow break the page-break-inside rendering of the body so half of a line renders on each page.
Is it still (given the answers and my attempts to use them) impossible to do this in a clean way? Or at all? I don't mind what browser I have to use to print them correctly either.
I am developing a web application and I want the users to be able to copy some parts of the page and paste them into MS Word with minimum loss of html formatting. For example users should be able to copy only a table from the page and paste it into word with minimum loss (assume that the page contains necessary mean,scripts to select only a single table or div).
How should I develop the html so that users can copy-paste with minimum loss? For example should I prefer tags like b,i instead of css, should I prefer inline css etc.
As long as you don't rely on external CSS you're good; either inline CSS or tags such as B will do the trick.
Should probobly stick to CSS2 - no CSS3 fanciness. Only use websafe fonts of course, they have to be avaliable on the client's machine. If users will be able to copy multiple container elements you might want to design using tables rather than divs. Stick to a strict layout and don't use absolutely positioned elements and stuff like that. Aim for a strict, square and narrow layout that will fit an a4 page nicely.
If you know what your users will paste, the save option is to make that part in a seperate page so that it is easy to paste.
By default MS-Word will give the same formatting but the width is always fixed, which can cause some issues (too wide or too narrow).
Another point to consider is that copying from a website always follows the flow of the HTML and not how it may appear in the browser. So all the to be pasted data need to be adjacent in HTML.
Be careful about:
absolute positioned elements, overlays, etc.
Elements that are scripted or dynamically loaded using Ajax
Scripts will always be dropped
To test it just paste something into word and than save the word-file in HTML.
See how it looks.
I have a HTML document with many tables which I want to be printed. The problem is that sometimes, the paper end is reached in the middle of a row, so half of it is printed in one page and the rest in the next page, even cutting a single line of text in two parts.
Is there any way to avoid this?
NOTE: I have already read this question, but I need a solution which not involves CSS, because is not working at the target computer, and I can't change that.
Even with CSS, the issue is difficult due to limited browser support to CSS pagination (as can be seen from the answers to the question you refer to).
Through years, this problem has existed, and I don't think anyone has souped up an HTML trick for the purpose. There have been some tricks for trying to prevent page breaks inside a paragraph or list by placing it in a one-cell table, but this has worked occasionally only, and besides, in your case you already have a table.
So I’m afraid there is no solution, apart from using elements that cause extra vertical spacing, like a pre element containing empty lines (to push the entire table to next page—this may of course make things much worse when the parameters of the situation, like page formatting and paper size, differ from your expectations) or splitting a table into two tables, possibly with extra space between them (even more problematic).
If the target computer doesn't support (enough of) CSS, then you can create a PDF document on the server. If you set the Content-Type correctly, the browser will download the document and start the PDF reader of the system.
If this isn't possible, then there is no solution.
I need to design a page for a web application that makes sense for user input. Sadly, the simplest and most logical manner for the user to interact with the data is completely unlike the form it needs to be printed in.
I'm aware of the #media #print #screen styles that allow me to style up the page differently for different media. What I'm trying to figure out is - is there a way of displaying the labels according to the location on the paper which they must be printed rather than laying out the screen and hoping it prints out correctly?
s there a way of displaying the labels according to the location on the paper which they must be printed rather than laying out the screen and hoping it prints out correctly?
I don't think there is, as all browsers will add their headers / footers to the document, plus there may be the printer's margins to consider (but that problem you will have whatever format you choose).
I think the only half-way reliable way to build a document with exactly positioned elements is generating a PDF document.
I think I'd move away from HTML if I needed that. What about giving the user one convenient way to interact with the data and then returning it to the user in a more print-suitable format --- say, PDF.
If you can't achieve the layout you want with css, why add a link to a separate page for a printable version.
If you absolutely have to have control over the positioning on a page, your only decent option is generating a pdf.