Is there a way to customize the text that is printed on the header and footer of every HTML page that you print, where the page number, URL, date, etc is printed ? (if you choose to print the headers and the footer from the print options).
The other solutions to display a header and a footer on every print page (using thead/tfoot and fixed positioned divs) don't seem to work on Chrome.
Here are the print headers and footers highlighted on a print preview for google.com:
Try this:
#media screen {
.print {
display: none;
}
}
#media print {
.print {
display: block;
}
}
And add the .print class to the appropriate element or elements.
Related
I have a page which is created dynamically with the user interaction, with many DIVs with variable sizes and other nested components. Some of them are displayed side by side, some will display on the next line. Once I call window.print(), they are reorganized by each browser, with the help of
#media print { .myDiv { page-break-inside: avoid; } }
I want to add a header with image on top of each print page, but using position: fixed won't work on Chrome or Safari (as of 03-31-2016). I don't want to calculate page size or components heights, since the user can always change the margins.
Considering I can dynamically add another <div class="print-header"> before each <div class="myDiv">, I would want something like this:
#media print {
.print-header { display: none; }
.print-header:first-of-the-page { display: block; } /*pseudo css*/
}
JS solution is acceptable too.
More Details [added on 04-01-2016]
Original problem: to set a logo (<img>) as header of all printing pages on Chrome, Firefox, Safari and IE11 (bonus).
Option 1: using an HTML5 API. NOT AVAILABLE
Option 2: using #media print { .print-header{ position: fixed}} to show the element on all the printing pages GOOD FOR FF and IE ONLY
On Chrome and Safari it only shows it on the 1st page . See a code sample on MDN's Printing a document
Option 3: Add header based on sizes and position calculated at print time. ERROR PRONE
This means calculating the width and height of all components to forecast which of them will fit in on a print page, then add a jQuery.clone() of the header element on a position defined by pageHeight + i, where i is 0, 1, .. n and n is the # of pages on the printed document.
Option 4: Conditionally select the element which shows on the top of the print page. INITIAL QUESTION
In CSS I can use :first-of-type to get the 1st child of a type under a given parent. Is there any similar way to getting the 1st child on each print page? Is there a way to know, at print time, what belongs to each page, using CSS or JS?
Related Links
Apparently they won't provide a definite solution, but I may have missed something:
How to use HTML to print header and footer on every printed page of a document?
Print footer on every printed page from website, across all browsers (Chrome)
Having Google Chrome repeat table headers on printed pages
How to apply some styles to first and last elements on a print page?
Using CSS and/or jQuery for Printed Pages with Page Breaks
Action: Printing a document by Mozilla Contributors is licensed under CC-BY-SA 2.5.
Here is a sample on how to accomplish the previous task with HTML and CSS:
<div id="print-header">
<img src="img/logo.png" width="200px" height="50px" >
</div>
#print-header{ display: none; }
#media print {
#print-header {
display: block;
position: fixed;
top: 0pt;
left: 0pt;
right: 0pt;
text-align: right;
}
}
NOTE:
Showing header on all pages was fixed on Chrome
Within a website I'm developing there're several info tabs, each of them displaying different reports or graphs when activated.
But when trying to print the website with window.print() it only prints the current displayed tab, that's the current website status, applying the printable CSS styles.
My customer wants to print the whole information in the website, but with the less user interaction as possible. That means without moving from one tab to another, clicking on "print" button for every single page, and avoiding the "validate" and "accept" printing process.
To sum up, my customer wants a single "print" button that prints every single document contained in the different tabs. I am afraid this is 100% impossible as is planned.
May I have to create a printing pool background process?
You can do something like that with CSS only. Just use #media print { }. If your tabs are hidden with display: none; you can just use
#media print {
.tabs {
display: block;
}
}
do a custom print css
#media print {
p {
font-size: 20px;
color: red;
}
}
http://www.w3schools.com/css/css_mediatypes.asp
You can then have all content tabs displayed as display:block
I am using JavaScript window.print() function to print a web page with a header and footer And that web page height is dynamic. It's height is depend on the HTML table on that page. So when table height is large, and when I print that page using window.print(), footer image of the web page will set to the middle of printed page. How can I avoid this?
Use the #media print directive to apply specific CSS styles when a user prints.
#media print {
…
}
that's the place where you could use #media query. setup a different layout for printer friendly
yes, you can use #page {
counter-increment: page;
#top-center {
content: "This is the header that will repeat on every page"
}
#bottom-right {
counter-increment: page;
content: "Page " counter(page);
}
}
why don't you use this jquery plugin:
https://github.com/etimbo/jquery-print-preview-plugin
demo:
http://etimbo.github.io/jquery-print-preview-plugin/example/index.html
I have an ASP.NET website divided in tabs like this
|TITLE1| - |TITLE2| - |TITLE3| - ETC.
If user clicks on Title 2, only the div corresponding to title 2 shows under, and so on.
I made a print image button but i'd like to make it so that it print as if all tabs were opened stacked one over another. Right now, it only prints that tab that was clicked.
You will need to render the contents of all your tabs into a div which has a css media print rule associated with it. Your actual tabs also need another css rule which will hide them for printing.
So for example you have
<div id="tabs" class="print_hidden">
Your actual tabs go here
</div>
<div id="printTabs" class="screen_hidden">
Your printer friendly text goes here when the link below is clicked.
</div>
<asp:LinkButton runat="server" id="lnkPrinterFriendly">Printer-friendly view</asp:LinkButton>
Then in css file you have the following:
#media print {
.screen_hidden { display: none; }
}
#media screen {
.print_hidden { display: none; }
}
Use a print stylesheet which has all the tabs (which I assume would be in div elements) set to display: block.
There is one long in the content on the print page, but while we print the some content of the text cut down.
alt text http://img694.imageshack.us/img694/6766/printpage.jpg
please let me know , if there is any dynamic way to add page-break css. the content could be any thing.
You might also just want to prevent page breaks inside an element.
E.g. short tables that you don't want to get ripped apart when printing:
#media print {
table {
page-break-inside: avoid;
}
}
As Haim Evgi referenced in this article http://davidwalsh.name/css-page-breaks
In addition to what's already described in the article, I would like to point out that it's good practice to use .page-break-before: auto instead of .page-break-before: always. The "auto" will break the page only if the contents are at the end if the page, this will prevent breaking the page and leaving a lot of blank space.
The CSS
#media all {
.page-break { display: none; }
}
#media print {
.page-break { display: block; page-break-before: auto; }
}
The HTML
<div>some content</div>
<div class="page-break">more content, this content may be short or long</div>
<div class="page-break">this content may page-break if content above this <div> is at the end of the page</div>
<div class="page-break">etc,..</div>
Use the css page-break-before and page-break-after elements.