81

By default, when you print a web page, the page title and and URL are printed at the top of the page, and likewise the date and time are printed at the bottom.

It is possible to remove this additional as you are printing through the PAGE SETUP menu (under FILE in Internet Exp)

Does anyone know of a way of doing this via CSS or javascript?

10 Answers 10

137

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.

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; }

Print headers/footers and print margins

When printing Web documents, margins are set in the browser's Page Setup (or Print Setup) dialog box. These margin settings, although set within the browser, are controlled at the operating system/printer driver level and are not controllable at the HTML/CSS/DOM level. (For CSS-controlled printed page headers and footers see Printing Headers .)

The settings must be big enough to encompass the printer's physical non-printing areas. Further, they must be big enough to encompass the header and footer that the browser is usually configured to print (typically the page title, page number, URL and date). Note that these headers and footers, although specified by the browser and usually configurable through user preferences, are not part of the Web page itself and therefore are not controllable by CSS. In CSS terms, they fall outside the Page Box CSS2.1 Section 13.2.

... i.e. setting a margin of 0 hides the page title because the title is printed in the margin.

Credit to Vigneswaran S for this tip.

4
  • 2
    It seems to be possible...try printing in Google Docs..(from Chrome) Mar 21, 2012 at 19:44
  • 2
    its not the best solution because if you dont want the first section in the top of the page margin(-top) will push it top,its good for footer but not for header i think
    – Andrewboy
    Mar 23, 2018 at 11:29
  • Just ability to add button "Page Setup" to your web page like you do with your "Print" button, could save a lot of trouble...
    – Andrei
    Sep 9, 2019 at 15:36
  • This is a great answer. No need for 'print buttons' with javascript. If you want to get rid of the title on top but have trouble with following pages that don't have the desired spacing try @page :first instead
    – pwavg
    Jan 2, 2020 at 19:52
58

Its simple. Just use css.

<style>
@page { size: auto;  margin: 0mm; }
</style>
1
24

A possible workaround for the page title:

  • Provide a print button,
  • catch the onclick event,
  • use javascript to change the page title,
  • then execute the print command via javascript as well.

document.title = "Print page title"; window.print();

This should work in every browser.

1
8

You can add this in your stylesheet: @page{size:auto; margin:5mm;} But this discards the page number too

8

Nothing works for me except the following solution from @Md. Hasibul Huq. You can use it without styles for body:

@media print {
  @page {
    margin-top: 0;
    margin-bottom: 0;
  }
  body  {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
}
5

completing Kai Noack's answer, I would do this:

var originalTitle = document.title;
document.title = "Print page title";
window.print();
document.title = originalTitle;

this way once you print page, This will return to have its original title.

4

This is not a programming solution (I absolutely know that)
The person who asked this question was seeking an answer with CSS, I am aware of that, and this answer will not help him at all, but it could help others (like me) which brought me to here in the first place.


but It can save your life especially if your client calls you on Weekend to fix it :)
(like what happened to me)

quickly she (your client) can expand the "More Settings" and uncheck the "Headers and footers" from Chrome page, as shown in the image below,

Again the programming solution for this problem is as in the accepted answer, I will not repeat it, but if you do not want to deploy your application on Weekend, then this is the way to go

enter image description here

2

Try this;

@media print{ 
  @page {
    margin-top: 30px;
    margin-bottom: 30px;
  }
}
0
0

To add custom page title in the place of about:blank when printing via window.print(): Add the following lines:

document.write('<head>' +
   '<title>' +
   'My Title' +
   '</title>'+ ...)
3
  • I think you maybe missed the part of the question where it was specifically asking about CSS and plus I think someone already posted an answer very similar to this.
    – treckstar
    May 28, 2022 at 12:41
  • 1
    It says or JavaScript
    – Patricode
    Jul 15 at 8:23
  • You're right, the end of the question includes the condition for JavaScript. When your answer came up during the review process, I read the title of the question, and then saw your answer wasn't using CSS, which is what prompted my comment. I was the one who missed the part of the question where it said or JavaScript. Sorry.
    – treckstar
    Jul 15 at 23:23
-10

There's a facility to have a separate style sheet for print, using

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

I don't know if it does what you want though.

4
  • 1
    He's asking to change the print page's header and footer, not body.
    – BalusC
    Apr 4, 2010 at 5:11
  • I know that, but I don't know if it is possible to do that with the CSS or not.
    – user181548
    Apr 4, 2010 at 5:31
  • 4
    This response shows poor understanding of the question.
    – Cassandra
    Nov 18, 2016 at 5:16
  • 1
    This is a very poor response and does not answer the question.
    – naveedk
    Sep 30, 2018 at 2:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.