Removing Page Title and Date When Printing Web Page (With CSS)

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

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.

@Print mode - ignore website title tag

Please use this and then set margins according to your needs. This will remove the headers and backgrounds from the printer settings.

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

Removing elements that appear when printing, using print.css stylesheet

There are quite a few posts on the subject here on StackOverflow:

Remove header and footer from
window.print()
Removing page title and date when printing web page (with
CSS?)
Can I remove the URL from my print css, so the web address doesn't
print?
How to remove the URL from the printing
page?
Disabling browser print options (headers, footers, margins) from
page?

Looks like it works by using the @page media property in combination with the print media property:

@media print {
    @page { margin: 0; }
  }

However, it only seems to work in Chrome (for the moment). Firefox can be made to oblige, though. Elsewhere, it was suggested to create PDF on the fly - or to use JavaScript to set at least the page title to an empty string.

Also, I'd question why you'd want to hide something your users are usually used to have control over.

To answer your question, though: The LA Times use bootstrap, which sets the page margin as follows:

...@page{margin:.5cm}...

How to remove page title, url, datetime and page number using javascript print

Please add below attribute in html tag.

"moznomarginboxes mozdisallowselectionprint"

like : <html moznomarginboxes mozdisallowselectionprint>

how to hide title and date on print screen in javascript

Taking the info from https://stackoverflow.com/a/2573612/1309377 you can add this css

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

to the window, which will hide the date and title (since they are in the margin). To add this css you can create a style element and append it to the window, just like you already do with the heading.

const element = document.getElementById("qr-code").innerHTML;var printWindow = window.open('', '', 'height=800,width=800');printWindow.document.write(element);printWindow.document.close();const title = printWindow.document.title = "some title here";const heading = printWindow.document.createElement('h1');const text = printWindow.document.createTextNode(title);heading.appendChild(text);
// Here is the style you can add to hide the date and title in the print screen.var style = document.createElement('style');style.type = 'text/css';style.innerHTML = '@page { size: auto;  margin: 0mm; }';
heading.setAttribute('style', 'order: -1; margin-bottom: 50px;');printWindow.document.body.appendChild(heading);
// Append the style to the window's bodyprintWindow.document.body.appendChild(style);
printWindow.document.body.setAttribute('style', 'display: grid; width: 100%; justify-items: center; margin: 0;');printWindow.print();

Remove page number, title and url - window.print() on internet explorer

This can only be done via your browser settings:

Click on settings icon on right of your browser. Hover over print then in sub menu choose page setup

You can change the header and footer in there

The page number and title are in the header and the url and date are in the footer - just set the drop downs to -Empty-

Sample Image

Removing Page Title and Date When Printing Web Page (With CSS)