Home » Html » Removing page title and date when printing web page (with CSS?)

Removing page title and date when printing web page (with CSS?)

Posted by: admin November 29, 2017 Leave a comment

Questions:

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?

Answers:

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.

Questions:
Answers:

Its simple. Just use css.

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

Questions:
Answers:

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.

Questions:
Answers:

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

Questions:
Answers:

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.

Questions:
Answers:

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.