Is there any way to force Chrome to always print without headers and margins? Chrome keeps forgetting and it really messes up my cash register program (if the header is there, it tries to print the entire page, which is a lot of white space). If you have any CSS, Chrome settings, even hard-coded editing of Chrome itself: anything that can fix this would be appreciated.
If you want to change this via your website, you can try using css media queries to hide or rearrange elements for printing.
#media print {
/* All your print styles go here */
margin: 0;
#header, #footer, #nav {
display: none !important;
}
}
I had the same issue. I wanted to override the print options so that the browser's headers and footers did not display.
Putting #page {margin: 5mm;} into my CSS file worked perfectly. In fact if you use #page {margin: 0} the Headers and Footers option is not even displayed on the Print Preview (in Chrome, I have not yet tested other browsers.
Related
The #media at-rule can specify a media query, such as print, to apply css rules to the document.
Let's say I have the following code:
#media print {
#page {
size: 3in;
margin: 0.2in;
}
}
body {
border: 1px solid;
}
<body>
<h1>Title for the page</h1>
<p>Some text goes into here.</p>
</body>
When I open this html webpage in Chrome, with its "Print to pdf" tool, I get a satisfactory result - the user can't change the exported pdf size, it is determined by the css rule, 3inch×3inch in this case. However, you can change the margins in this GUI, although I explicitly set it in the second rule.
EDIT:
When choosing "Default" margins in the printing tool, the margins indeed follow the rule set up in the css file.
On the other hand, on Firefox, the user can simply change the pdf page size, change the orientation and how to scale the content into the page. If so, then what effect does the css rule have?
So my question is mainly towards Firefox behavior: Is that a bug or rather is it ok?
Any thoughts would be very helpful.
According to MDN, #page/size CSS rule is simply not supported in Gecko and WebKit based browsers (Firefox and Safari) as of 2021-10.
https://developer.mozilla.org/en-US/docs/Web/CSS/#page/size#browser_compatibility
Bugzilla entry: [css3-page] implement #page rule size attribute
I have trouble understanding how to render html elements with correct size when printing them to A4 size paper.
To illustrate my purpose, I simplified my code to a html page with a single red bordered table that should be 210mmx297mm (A4 paper size):
<!DOCTYPE html>
<html>
<head>
<style>
#page
{
size: 210mm 297mm portrait; /* Set paper size to A4 (portrait) */
}
html, body
{
width: 210mm;
padding:0;
margin: 0 auto; /* Left, right are auto for body to appear as centered on screen */
}
html
{
background: rgb(204,204,204); /* gray client window for screen (so as to emphase the body as looking as A4 paper) */
}
table
{
width:100%;
height:297mm;
-moz-box-sizing: border-box;
border: solid 3px red;
border-spacing:0;
border-collapse: collapse;
}
td
{
padding: 0;
text-align: center;
box-shadow: inset 0 0 0 1000px white;
}
</style>
</head>
<body>
<table><tr><td>Hello world!</td></tr></table>
</body>
</html>
When I try to print this with Firefox (49.0.2), and carefully setting all margins to 0 and rendering size to 100%, I get a table which obviously is oversized:
If I select 'Adapt to page' for rendering size, I get a table which obviously is downsized:
I'm not much more lucky if I try with Chrome (54.0.2840.87 m)
I tried to force size to 210mmx297mm all the way round in the css, but there's still something wrong. I can't figure out what it is ... either a bug in rendering engine or setting missing in my code.
Note
Contextually I'm trying to create automatic reports all in html+css+javascript so they can be easily be viewed and eventually printed to pdf or paper from a web-browser. Cover page should be filled with some image up the very edges of A4 paper.
Here is some more complete example:
Example (JSFiddle)
I'm almost there, everything display nicely on screen (firefox+chrome) but there's still those margins when printing (printing works with firefox+nomargin+adaptsize only ... chrome is bugged for repeating table header/footer when printing).
You are tackling a difficult problem which is a bane of many programmers' existence. Printing from HTML and ensuring compatibility with different browsers is basically a unicorn. You shouldn't manage that concern yourself. The quirks of CSS styling and the fragmentation of the browser ecosystem will make sure you don't succeed.
My advice is that you take a look at a PDF generator API like PDF Kit or iText.
From my research, page and form printing is especially problematic on Firefox. As you've noticed from first hand experience, you can't manage margins in a sane way. I also tried with Firefox 49.0.2 without success.
I thought about using #media print{} but Firefox was unwilling to collaborate.
That being said, your code worked just fine for me running Chrome on the version you mentioned. Note that I set the margins to 'none'.
Cover page should be filled with some image up the very edges of A4 paper.
You're never going to satisfy this requirement. Trust me, I've been doing dashboards and reports on the web for a long time and you simply don't get fine-grained control over rendering like this. The web isn't designed for it.
You can still generate some great reports if you're willing to work within a margin and not try for pixel-perfect layouts. Web reports can look super sharp and you can cover multiple media with one code base.
But for situations where pixel-perfect rendering matters, in addition to control over page breaks and such, only a PDF library will suffice. There are some good ones out there--I've had success with PDFSharp.
Why don't you display a cover image that doesn't span the entire page?
You could use phantomjs to render your pdf (you ask for pdf eventually). In php I have successfully used https://github.com/kriansa/h2p to generate pdf's. (also with rendering javascript based charts with d3.js). It is not easy but with headless browsing you can make it work.
I have set a responsive style sheet for my website and here is part of the CSS file responsible to empty some space for the navigation-menu on the left :
#media (min-width: 48em) {
#layout { padding-left: 150px }
}
I've also set a print.css file as dedicated print style sheet as follow where I set the menu to hide and it's space to be omitted :
#media print {
#layout { padding-left:0 }
#menu { display : none }
}
The problem is that, while in print preview, the menu will hide but there's still the 150px white space on the left side of the content, no matter what, I've even tried :
#layout { padding-left:0 !important }
But no luck,
When I manually change the padding-left value to 0 using the Chrome's built-in feature (Inspect element), the page shows up alright in print preview, but the code in print.css does not seem to be applied no matter what.
All right after a lot of testing. I got it figured out. It seems the padding-left problem is only happening in Google Chrome's print preview, since all the other browsers print-preview respect print CSS. So everything is fine with my CSS, and this is browser related bug.
I know about #media css tag however it looks like no matter what I set the padding, I se no padding in "print" for my website.
I want to set a padding for print so that I want the website to be printed out with a custom page spacing around the text rather then letting the printer/browser "fit" the content with almost no white area around the website.
Any solution(s) is appreciated.
Did you take a look at the #page rule ? https://developer.mozilla.org/en/docs/Web/CSS/#page
#page {
margin: 2cm;
}
It's from CSS 2 specs, so it's supported by all major browsers (included IE8+).
It might help if you showed some code — it's hard to offer a solution if www can't tell what the problem is. This works fine for me in Safari on a Mac:
<style>
#media print {
body {padding:100px;}
}
</style>
Im working on a print style in chrome, an everything seemed fine, until i noticed that i didnt get any Footer or header on the print (the std. with page title, url etc., and i HAVE turned it ON in the print preview dialog).
So i just thought i would make one, so i just added a with:
.print-logo {
position: fixed;
display: block;
bottom: 0px;
right: 0px;
text-align: right;
width: 100%;
}
But that doesnt place itself all the way to the right:
So i tried printing in IE10, and here both the default footer, and my custom shows up, and is placed correct.
Everything is setup with bootstrap, and print friendly version is made by using the .hidden-print class.
Its all in localhost ATM, but i have a saved html version of 1 page here:
Anyone who have experience with these problems?
UPDATE:
Found that if i add
#page {
size: A4 portrait;
}
that i will add my default footer and headers... but my custom one is still displaying wrong...
I got my best result printing in Chrome setting a fixed width (in px) to the page or main div. If not, Chrome try to fix the content changing font-sizes, etc.