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

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?

Solution 1:

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.

Solution 2:

Its simple. Just use css.

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

Solution 3:

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.

Solution 4:

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