Disabling browser print options (headers, footers, margins) from page?

Asked 25/12, 2009 at 10:33 Answered 9/12, 2023 at 17:51

Solved javascript html css browser printing

200

I have seen this question asked in a couple of different ways on SO and several other websites, but most of them are either too specific or out-of-date. I'm hoping someone can provide a definitive answer here without pandering to speculation.

Is there a way, either with CSS or javascript, to change the default printer settings when someone prints within their browser? And of course by "prints from their browser" I mean some form of HTML, not PDF or some other plug-in reliant mime-type.

Please note:

If some browsers offer this and others don't (or if you only know how to do it for some browsers) I welcome browser-specific solutions.

Similarly, if you know of a mainstream browser that has specific restrictions against EVER doing this, that is also helpful, but some fairly up-to-date documentation would be appreciated. (simply saying "that goes against XYZ's security policy" isn't very convincing when XYZ has made significant changes in said policy in the last three years).

Finally, when I say "change default print settings" I don't mean forever, just for my page, and I am referring specifically to print margins, headers, and footers.

I am very aware that CSS offers the option of changing the page orientation as well as the page margins. One of the many struggles is with Firefox. If I set the page margins to 1 inch, it ADDS this to the half inch it already puts into place.

I very much want to reduce the usage of PDFs on my client's site, but the infringement on presentation (as well as the lack of reliability) are their main concern.

Shrader answered 25/12, 2009 at 10:33 Comment(5)

Is there any specific reason why you want to do so? If you say the requirement, then perhaps there could be a another possible solution... For me changing user settings does not look like a nice solution... – Revulsive 25/12, 2009 at 16:33

I agree. I don't want to change the user settings. I want to overwrite the browser's default settings. And the reason is because the alternative is to use a PDF, which seems unnecessary when everything else can be made printer-friendly via CSS. – Shrader 7/7, 2011 at 18:30

I see you've checked the answer as the solution, but it works ONLY in chrome. have you been able to get a correct solution cross-browser? or at least in a few browsers? cause I have the same issue – Elevon 3/4, 2014 at 17:39

@Elevon see https://mcmap.net/q/127415/-disabling-browser-print-options-headers-footers-margins-from-page for a cross-browser solution. – Eglanteen 19/4, 2016 at 10:50

Summary of answers: If your content always fits on one page, see answers below. If it spans pages... give up on using CSS. – Tollmann 18/3, 2022 at 18:41

215

The CSS standard enables some advanced formatting. There is a @page directive in CSS that enables some formatting that applies only to paged media (like paper). See http://www.w3.org/TR/1998/REC-CSS2-19980512/page.html.

Downside is that behavior in different browsers is not consistent. Safari still does not support setting printer page margin at all, but all the other major browsers now support it.

With the @page directive, you can specify printer margin of the page (which is not the same as normal CSS margin of an HTML element):

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Print Test</title>
    <style type="text/css" media="print">
    @page 
    {
        size:  auto;   /* auto is the initial value */
        margin: 0mm;  /* this affects the margin in the printer settings */
    }

    html
    {
        background-color: #FFFFFF; 
        margin: 0px;  /* this affects the margin on the html before sending to printer */
    }

    body
    {
        border: solid 1px blue ;
        margin: 10mm 15mm 10mm 15mm; /* margin you want for the content */
    }
    </style>
</head>
<body>
  <div>Top line</div>
  <div>Line 2</div>
</body>
</html>

Note that we basically disables the page-specific margins here to achieve the effect of removing the header and footer, so the margin we set on the body will not be used in page breaks (as commented by Konrad) This means that it will only work properly if the printed content is only one page.

This does not work in Firefox 3.6, IE 7, Safari 5.1.7 or Google Chrome 4.1.

Setting the @page margin does have effect in IE 8, Opera 10, Google Chrome 21 and Firefox 19.
Although the page margins are set correctly for your content in these browsers, the behavior is not ideal in trying to solve the hiding of the header/footer.

This is how it behaves in different browsers:

In Internet Explorer, the margin is actually set to 0mm in the settings for this printing, and if you do Preview you will get 0mm as default, but the user can change it in the preview.
You will see that the page content actually are positioned correctly, but the browser print header and footer is shown with non-transparent background, and so effectively hiding the page content at that position.
In Firefox newer versions, it is positioned correctly, but both the header/footer text and content text is displayed, so it looks like a bad mix of browser header text and your page content.
In Opera, the page content hides the header when using a non-transparent background in the standard css and the header/footer position conflicts with content. Quite good, but looks strange if margin is set to a small value that causes the header to be partially visible. Also the page margin is not set properly.
In Chrome newer versions, the browser header and footer is hidden if the @page margin is set so small that the header/footer position conflicts with content. In my opinion, this is exactly how this should behave.

So the conclusion is that Chrome has the best implementation of this in respect to hiding the header/footer.

Blackthorn answered 6/5, 2010 at 11:1 Comment(14)

To clarify, this does not seem to remove the headers with Firefox 21 or IE10, although I suspect it did cause the header/footer not to take up space. It does work with Chrome 28. – Ending 30/7, 2013 at 18:48

I have updated to reflect newer browser versions. Chrome has now the best implementation of this. – Blackthorn 31/7, 2013 at 11:42

@SearchForKnowledge: Yes, it is as I said - if you read my answer under the description on how it behaves in IE: "You will see that the page content actually are positioned correctly, but the browser print header and footer is hiding the page content at that position." I say it "does have effect" in IE 8, not that it works like we want... I will edit my answer to make this clearer. – Blackthorn 7/8, 2014 at 8:26

Removes headers, but also the left marign. So all my text is on the edge of the page now. – Disfranchise 23/1, 2016 at 18:44

@Mittchel: You also have to add the padding you want. The point is that You have full control on this using css. The padding must be added on the body. Since we specify media="print" this style will only be applied on paper, so it won't affect the screen layout. – Blackthorn 3/2, 2016 at 9:42

@Mittchel: I have changed my example to separate the html style and body style, so that the html style will do the trick on hiding header/footer, and the body style will handle the content margins of your choice. The blue border is just to visualize the extent on the body container. – Blackthorn 3/2, 2016 at 10:44

"Chrome has the best implementation of this in respect to hiding the header/footer." > what happens if you have more than one page? You will have text in the non printable area of the sheet – Antidepressant 26/4, 2016 at 17:24

@JulienM: That is a good point. In this case, I would say Chrome handles this best, as you can define some margin on the @ page. If you specify it just so small that it conflicts with the header/footer, it will be hidden. – Blackthorn 10/5, 2016 at 8:29

This solution simply doesn’t work at all, because @page margins and body margins are fundamentally different things: the body margin only applies to the whole body, i.e. the top of the first page and the bottom of the last page. For all intermediate pages, the top/bottom will still have a zero margin. – Beloved 2/5, 2017 at 15:46

@KonradRudolph: Yes you are right. This only works for content that only has one page in the print. I will edit my answer to emphasis this fact. – Blackthorn 3/5, 2017 at 7:41

@BoopathiD: Well, I have only tested on Windows browsers. PDF writers are in effect own browsers in itself, and tend to not support many of the edge cases in the standards. – Blackthorn 29/3, 2019 at 8:18

Note that Margins needs to be set to Default in Chrome for the @page directive to take effect. – Gong 1/1, 2020 at 6:14

Removing header: .page { width: 21cm; min-height: 29.7cm; padding-left: 2cm; padding-top: 2cm; padding-right: 2cm; padding-bottom: 2cm; } @page { /* Paper size and page orientation / size: A4 portrait; / Margin per single side of the page */ margin-left: 2cm; margin-top: 0cm; margin-right: 2cm; margin-bottom: 0cm; } ....<header> <h1> </h1> </header> – Franza 23/11, 2020 at 0:37

@page { margin: 5mm; } Instead of 0, set margin to a low amount that first will hide the header content and second works on multi page print. In this case setting body margin is not needed. – Arteriosclerosis 2/5, 2021 at 15:27

Any recent version of Chrome and Opera, as well as Firefox 48 alpha 1 and greater

You can set the page margin to a size that's too small to contain the text in order to disable this (borrowing from awe's answer):

@page {
  size: auto;  /* auto is the initial value */
  margin: 0mm; /* this affects the margin in the printer settings */
}
html {
  background-color: #FFFFFF;
  margin: 0px; /* this affects the margin on the HTML before sending to printer */
}
body {
  border: solid 1px blue;
  margin: 10mm 15mm 10mm 15mm; /* margin you want for the content */
}

<ol>
  <li>
    <a href="data:,No Javascript :-(" target="_blank">Middle-click to open in new tab</a>
  </li>
  <li>
    <a href="javascript:print()">Print</a>
  </li>
</ol><!-- Hack to work around stack snippet restrictions --><script type=application/javascript>document.links[0].href="data:text/html;charset=utf-8,"+encodeURIComponent('<!doctype html>'+document.documentElement.outerHTML)</script>

For versions of Firefox up to 48 alpha 1

You can add a mozNoMarginBoxes attribute to the <html> tag to prevent the URL, page numbers and other things Firefox adds to the page margin from being printed.

It is working in Firefox 29 and onwards. You can see a screen shot of the difference here, or see here for a live example.

Note that the mozDisallowSelectionPrint attribute in the example is not required to remove the text from the margins; see What does the mozdisallowselectionprint attribute in PDF.js do?.

Other browsers

Unfortunately, there seems to be no way to resolve this problem in Internet Explorer, so you'll have to resort to PDF or ask users to disable margin texts.

The same goes for Safari; according to a comment by @Luiz Perez, the most recent versions of Safari (8, 9.1 and 10) still do not support @page for suppressing margin texts.

I can't find anything on Edge and I don't have a Windows 10 installation available to test.

Roselba answered 21/5, 2014 at 8:40 Comment(6)

honestly, I concur with this. It even works in Chrome if you print using "System dialog". just make sure that <!DOCTYPE html> <html moznomarginboxes mozdisallowselectionprint> is set. Source: https://bug743252.bugzilla.mozilla.org/attachment.cgi?id=714383 – Cammie 5/11, 2014 at 12:38

Works great on Firefox . So this along with @page{ size: auto; margin: 3mm; } to support chrome and safari did a cross-browser solution for me. – Hamelin 7/5, 2015 at 3:52

This solution works really well for removing unwanted info/content in printed materials in FF. Thanks! – Puton 11/6, 2015 at 14:10

This is great, but what about IE? – Schwejda 29/6, 2016 at 8:24

I tested this snippet on Safari 8, 9.1, and 10 and it does not remove the header or footer in those versions of Safari. – Syllabi 11/1, 2017 at 13:16

This approach will stick the content to the edges between pages: i.imgur.com/krDlC1K.png – Fascist 31/5, 2018 at 15:15

As @Awe had said above, this is the solution, that is confirmed to work in Chrome!!

Just make sure this is INSIDE the head tags:

<head>
<style media="print">
    @page 
    {
        size: auto;   /* auto is the initial value */
        margin: 0mm;  /* this affects the margin in the printer settings */
    }

    body 
    {
        background-color:#FFFFFF; 
        border: solid 1px black ;
        margin: 0px;  /* this affects the margin on the content before sending to printer */
   }
</style>
</head>

Dialogism answered 28/3, 2012 at 3:38 Comment(4)

This is a very good solution! Removes the margins and removes the header and footer. My only change was to then add padding: 0.25in 0.5in; into the body styles so that I have the exact margins that I need for a nice, clean print. Working in Chrome v25, and thankfully for this particular project we can ask the end-users to choose from a couple of modern browsers. – Bambino 25/2, 2013 at 17:8

Unfortunately this causes issues with multi-page printouts. Text at the bottom of the page gets clipped. – Launch 8/2, 2016 at 22:39

Works perfectly on Chrome 67.0.3396.99 and Firefox 62.0b5 with single page output. – Kovno 11/7, 2018 at 20:52

I was searching for a solution specifically for Edge and Chrome and this works like a charm. Didn't check with other browsers though. – Ethben 19/1, 2022 at 5:40

I have a similar request from a client who wants to have the header, page numbers, and html footer removed. In this case, the client is presenting an HTML page that can double as a formal certificate. The added URL, page, and, header, are irrelevant and lead to a less-than-pleasing final product. In some ways, it just looks cheap.

Media=Print has not been able to disable these browser defaults. The only workaround is to tell the user to click the "Gear" button and toggle those items on/off. Seriously, I had no idea I could do that for 20 years (and we think the typical user will have a clue to click the toggle button?).

If CSS supports Media=Print, it should support the ability to control the entire end-user print experience. I appreciate that the browsers provide the added fields, but, why not allow CSS to control the overall print experience-if that is what's desired. A 90% solution could be 100% with three more fields! A simple:

#BrowserPrintDefaults{display:none}

would suffice.

Again, it's not a matter whether or not the end-user wants to print it out or not (maybe your client is very private and doesn't want printed URLs floating around. Or maybe a executive team uses a private collaboration sites?). Glad to defend the end-user, but if somebody is seeking an answer, don't respond saying it's the right of the end-user to show or hide. Sometimes it's the right of the client paying the bills.

Flinders answered 7/7, 2011 at 17:10 Comment(2)

I eventually gave up, as much as I didn't want to. I definitely agree this should be exposed in CSS, since all browsers have these settings and it is a presentation element. But instead this is scene as an application-level preference, like having cookies turned off. – Shrader 7/7, 2011 at 18:29

It is an official CSS standard using the @Page directive to set the printer margin (which is not the same as body margin of the html page). Currently this is supported by all the major browsers except Safari, but how it affects the header/footer varies. The best implementations are in Opera and Chrome. – Blackthorn 31/7, 2013 at 12:0

Try this code, works 100% for me:
FOR Landscape:

<head>
<style type="text/css">

@page{
  size: auto A4 landscape;
  margin: 3mm;
}

</style>
</head>

FOR Portait:

<head>
<style type="text/css">

@page{
  size: auto;
  margin: 3mm;
}

</style>
</head>

Weekender answered 6/3, 2015 at 6:12 Comment(1)

CSS page rules will set the margins, but do not remove built-in header and footer placed by browser (page URL, page number, etc) – Shrader 6/3, 2015 at 6:15

@page margin:0mm now works in Firefox 19.0a2 (2012-12-07).

Plantar answered 11/12, 2012 at 16:50 Comment(0)

Manipulating print header and footer and their special values such as date, total pages, page number, and URL should be possible using margin at-rules which are:

@top-left-corner
@top-left
@top-center
@top-right
@top-right-corner
@bottom-left-corner
@bottom-left
@bottom-center
@bottom-right
@bottom-right-corner
@left-top
@left-middle
@left-bottom
@right-top
@right-middle
@right-bottom

In the following style:

@page {
  size: A4 Portrait;
  margin: 0.5in;
  @bottom-right {
    content: "Page " counter(pageNumber);
  }
  @top-right {
    content: none;
  }
}

However, as of today, no browser supports these at-rules, as noted on MDN.

The margin at-rules have not been implemented by any user agent (updated: August 2023).

In conclusion. Any possible solution is a hack until margin at-rules are supported.

Meanwhile. I am intrigued by how Puppeteer can fully access the PDF Viewer capabilities, knowing that no API is exposed specifically by Chrome.

Tiptoe answered 9/12, 2023 at 17:51 Comment(0)

Since you mentioned "within their browser" and firefox, if you are using Internet Explorer, you can disable the page header/footer by temporarily setting of the value in the registry, see here for an example. AFAIK I have not heard of a way to do this within other browsers. Both Daniel's and Mickel's answers seems to collide with each other, I guess that there could be a similar setting somewhere in the registry for firefox to remove headers/footers or customize them. Have you checked it out?

Trichotomy answered 25/12, 2009 at 12:32 Comment(1)

In IE7+, you can disable header/footer by a simple button click in Print Preview. No need to do it in registry! – Blackthorn 6/5, 2010 at 9:50

-1

I solved my problem using some css into the web page.

<style media="print">
   @page {
      size: auto;
      margin: 0;
  }
</style>

Billposter answered 3/10, 2016 at 3:16 Comment(0)

-1

This worked for me with about 1cm margin

@page 
{
    size:  auto;   /* auto is the initial value */
    margin: 0mm;  /* this affects the margin in the printer settings */
}
html
{
    background-color: #FFFFFF; 
    margin: 0mm;  /* this affects the margin on the html before sending to printer */
}
body
{
    padding:30px; /* margin you want for the content */
}

Wisconsin answered 9/1, 2019 at 15:46 Comment(0)

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

This is how it behaves in different browsers:

Any recent version of Chrome and Opera, as well as Firefox 48 alpha 1 and greater

For versions of Firefox up to 48 alpha 1

Other browsers

Recommended topics

Hot tags