ansaurus

Question

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

Answer 1

+4 A:

There is no way to change the printer settings, margins, or any other browser setting, temporarily or permanently, from CSS or JavaScript.

While this is unfortunate for your genuine requirement, these restrictions are the reason why 95%+ of the web users keep JavaScript enabled in their browsers. (Browser Statistics)

Daniel Vassallo 2009-12-25 10:39:55

Clearly badly worded enough to make it wrong ("browser setting"? what about browser default css styles overridden by site stylesheets? what about javascript popup window scrollbars? What about print css stylesheets?).

Tchalvak 2009-12-25 12:45:31

+1. Short but so true. You can only do that with a worthfully *application* which runs at the client side, like a Java Applet or Java Web Start. You can **not** do that with a web styling or web scripting language.

BalusC 2009-12-25 15:07:45

@Tchalvak: I cannot agree with your observation. What you mention are "rendering styles" not "browser settings". CSS and JavaScript can modify the rendering styles of the page by manipulating the DOM. Anything else is rightly delegated to the user's responsibility. As BalusC correctly noted, the only way to have control on the browser is through client-side *applications* like the Java Applet described in this SO post: http://stackoverflow.com/questions/438397/

Daniel Vassallo 2009-12-25 23:32:28

Answer 2

+2 A:

If you want your prints to have a different look than the actual HTML-page you can make use of the media attribute when you link your CSS-files.

<link rel="stylesheet" type="text/css" media="print" href="foo.css">

In here you can set your margins & paddings to whatever that will look good on a print.

Another way of doing this:

@import url("foo.css") print;

and yet another way (inline)...

@media print {
  /* style sheet for print goes here */
}

Mickel 2009-12-25 12:17:20

Like I said in my question, I know about media-based stylesheets. But this won't always override the browser's default settings. Specifically, there isn't a CSS rule that I know of that says "don't print headers like the URL in the corner".

Anthony 2009-12-25 13:05:18

I can't see why you'd want to alter the browsers default printing settings... isn't that up to the user to decide? Maybe they want the bloody URL printed on each page? ;) The best you can do is to instruct your users HOW to adjust these settings... like so http://www.mintprintables.com/print-tips/header-footer.php

Mickel 2009-12-25 13:43:37

another, rather quirky way to do it, is to write a small JAVA-applet that handles the printing. But this seems kind of overkill for an rather small issue like this...

Mickel 2009-12-25 13:46:12

+1... and yet another way `<style type="text/css" media="print"> /* styles here */ </style>`

fudgey 2009-12-25 14:17:04

Combine that with browser-specific conditional comments for stylesheets customized for the results you want in your targetted browsers, e.g. firefox, and you should be set.

Tchalvak 2009-12-25 14:27:07

To the upvoters like fudgey: note that this answer is **wrong**. This is not what the OP asked.

BalusC 2009-12-25 15:05:58

Answer 3

+1 A:

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?

Hope this helps and Happy holidays, Best regards, Tom.

tommieb75 2009-12-25 12:32:03

In IE7+, you can disable header/footer by a simple button click in Print Preview. No need to do it in registry!

awe 2010-05-06 09:50:10

Answer 4

A:

You may have missed what I think is a very elegant solution to printing pages using the media => print solution.

All your other stylesheets should be going to media => all Coming last the media => print stylesheet sets all the elements you want to hide as display: none

You may have to tweak a couple things here and there but it's very simple to set up and very powerful too.

For an example of this in action one of my clients' site is at http://www.yogacentersc.es/en

The print preview will show the result with very little coding.

allesklar 2009-12-25 16:51:28

Also here: this is **not** what the OP asked. Reread the question and all comments.

BalusC 2009-12-25 17:13:47

Answer 5

A:

The CSS standard enables some advanced formatting you can try:
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 only IE8+ and Opera supports this.

You can specify margin of the page (which is not the same as normal css margin of a html element):

<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<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 */
        }

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

This does not work in Firefox 3.6, IE 7 or Google Chrome 4.1,
but it works in IE 8 and Opera 10.
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 print header and footer is hiding the top and bottom line of your page content.

I have not found anything that can turn off header and footer in IE8, but in Opera, it seems like the page content hides the header when setting margin:0mm; on the page (and using a non-transparent background in the standard css).

awe 2010-05-06 11:01:25

ansaurus

tags:

views:

answers:

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

related questions