How to print a html page with header and footer by default (without explicitly clicking checkboxes during printing)?
For example, for displaying background picture, i found "-webkit-print-color-adjust: exact;":
.print-layout {
width: 210mm;
margin: 0 auto;
#media print {
-webkit-print-color-adjust: exact;
}
}
But how to do it for footer and header?
In my HTML page, I don't have any header and footer classes explicitly.Hence in my case,header is name of tab and date, footer is link of site and number of page in my case.
As far as i am aware you cannot get a header and footer added on by just adding css, the new features in HTML allow you to add <footer> and <header> tags to your HTML and you could add in an <a> tag with the URL link to the webpage, again if you need something dynamic like the data changing every time you would have to add in a script with the new Date() method.
The -webkit-print-color-adjust property is a non-standard CSS extension which is not really recommended to be used as it does not give reliable outcomes every time.
I am trying to print a repeating header on a dynamically generated HTML page in print.
The header shows a logo, and uses CSS to display page numbers.
My site lets users add blocks of text, or collages of images, and adds them independently with "add text" and "add image" buttons.
the resultant code is (somewhat) as follows: (slim/HAML syntax)
editable-section.ng-cloak(
ng-repeat='section in story.sections'
editable='false'
)
= render 'header'
.show-content-wrapper
= render 'sections/section'
The size of this content can vary wildly, and so I don't want to place a 'page-break-before:always;" rule before each ... because I may want them to stack more than one on a page to save paper and not look silly.
My problem is, inside each editable-section, I have an HTML header I only want to display if this is the first editable-section on the page.
So the question is, how would I only display the first header on each printed page? I imagine it would be something to the effect of:
#media only print {
#page {
header {
display:none;
&:first-of-type {
display:block;
}
}
}
}
However, "You can't change all CSS properties with #page. You can only change the margins, orphans, widows, and page breaks of the document."
https://developer.mozilla.org/en-US/docs/Web/CSS/#page
Thoughts?
Are you aware of this javascript?
document.getElementsByTagName('h1')[0]
With the brackets you can select a particular element with the 0th being the first.
Does this help?
I am trying to print some Cards using web browser, the unfortunate part is that the browser writes a header and footer on my card and gets some space on my card which causes the card to be printed on two pages instead of one page.
How can I remove header and footer on the printing document ?
Thanks in advance .
You could use an alternate stylesheet for printing, and then you define distinct rules for that format:
.my-header { display: none; }
.my-footer { display: none; }
And include the stylesheet with the proper media type, print:
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
#media print
{
.noPrint
{
display:none;
}
}
save it in your stylesheet and add this class to elements which you don't want to print.
The browser automaticaly adds a header and footer (with the url and such), you can not switch those off (unfortunately).
The Headers and Footers added by the browser at printing can only be turned off locally by the end user. In IE for instance go to Print > Page Setup and edit the settings under Headers and Footers.
An alternative might be to create a PDF on the fly using something like http://sourceforge.net/projects/itextsharp/
This would allow you to set the page size, insert images, etc. dynamically which might meet your needs.
I have written some stylesheets - including a print.css - and it's working fine.
I'd like to remove the URL from printing out on each of the pages. I am beginning to wonder if it is impossible. Is there an element/option that I can set to display:none to do this?
The reason is that the specific pages that have a 'normal' and 'print' stylesheet have been specially formatted so when printed, it forms a meaningful booklet. Therefore the URL is irrelevant.
In Firefox, https://bug743252.bugzilla.mozilla.org/attachment.cgi?id=714383 (view page source :: tag HTML).
In your code, replace <html> with <html moznomarginboxes mozdisallowselectionprint>.
In others browsers, I don't know, but you can view http://www.mintprintables.com/print-tips/header-footer-windows/
Sadly, no. The header and footer are generated by the browser. Only the end-user can change the footer - it might be an idea to give the user a step-by-step for each browser what to do. See for example here for a set of illustrated walk-throughs for windows based browsers.
The only alternative I know of is generating PDFs, with which you have full control over the printed output.
Use that code.that will help to solve your problem
#media print
{
#page { margin: 0; }
body { margin: 1.6cm; }
}
#media print
{
a[href]:after { content: none !important; }
img[src]:after { content: none !important; }
}
you can try this in the stylesheet:
#page{size:auto; margin-bottom:5mm;}
But this also removes the page number
This solution will do the trick in Chrome and Opera by setting margin to 0 in a css #page directive. It will not (currently) work for other browsers though...
It depends on your web browser. If you're using Firefox you can adjust or turn off those header and footer lines (URL, page number, etc) by going into File > Page Setup then clicking the Margins & Header/Footer tab.
If I understand you correctly, you talk about the page headers and footers. They are printed by the browser. They are not part of your HTML content, so you can't influence them directly.
Show your users how to disable headers and footers in the «Page setup...» dialog.
The headers and footers for printing from browsers is, sadly, a browser preference, not a document-level element that you can style. Refer to my very similar question for further workarounds and disappointment.
Historically, it's been impossible to make these things disappear as they are user settings and not considered part of the page you have control over.
http://css-discuss.incutio.com/wiki/Print_Stylesheets#Print_headers.2Ffooters_and_print_margins
However, as of 2017, the #page at-rule has been standardized, which can be used to hide the page title and date in modern browsers:
#page { size: auto; margin: 0mm; }
Credit to Vigneswaran S for this tip.
Remove the url from header and footer using below method
#page { size: letter; margin-top: 4mm;margin-bottom: 4mm }
I've also tried everything but finally I'm writing below code to make URL shorter:
var curURL = window.location.href;
history.replaceState(history.state, '', '/');
window.print();
history.replaceState(history.state, '', curURL);
But you need to make a custom PRINT button for user to click.
Now we can do this with:
<style type="text/css" media="print">
#page {
size: auto; /* auto is the initial value */
margin: 0; /* this affects the margin in the printer settings */
}
</style>
Source: https://stackoverflow.com/a/14975912/1760939
I assume that you are talking about the URL that shows in the footer of the page.
If so, this is set by the browser and it is not something that you can do from your code.
I am not sure but the URL is added by a browser when you want to print. It is not part of the page so can not be affected by CSS. Maybe there is a way but it will be browser dependent.
i found something in the browser side itself.
Try this steps. here i have been mentioned the Steps to disable the Header and footer in all the three major browsers.
Chrome Click the Menu icon in the top right corner of the browser. Click Print. Uncheck Headers and Footers under the Options section.
Firefox Click Firefox in the top left corner of the browser. Place your mouse over Print, the click Page Setup. Click the Margins & Header/Footer tab. Change each value under Headers & Footers to --blank--.
Internet Explorer Click the Gear icon in the top right corner of the browser. Place your mouse over Print, then click Page Setup. Change each value under Headers and Footers to -Empty-.
This is a browser issue. But you can handle this problem by these line of codes:
<style type="text/css" media="print">
#media print
{
#page {
margin-top: 0;
margin-bottom: 0;
}
body {
padding-top: 72px;
padding-bottom: 72px ;
}
}
</style>
For Internet Explorer, go to Tools. Click on the print option and then page set up. Under headers and Footer, make all the choices "empty". Then it will not print out on your printed pages.
I hope this helps.