CODEWITHSUNDEEP
htmlcssprinting
Houy Narun
Houy Narun

Reputation: 1725

How to set default print option in browser

I am setting up a friendly printable document for my client. From that, I would like to set a default print option to have a page footer for page number option selected by default. It is like this:

enter image description here

So far, I know there is an option like:

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

However, I am not quite sure it is possible have above option selected or not.

Thanks.

Upvotes: 2

Views: 3145

Answers (1)

Matthew Beckman
Matthew Beckman

Reputation: 1722

You can't change the default settings for browsers like that. 'Headers and footers' is a user option in Chrome. Chrome is going to respect the users preferences, not the websites.

The @page rule you're trying to use is only able to hide the headers and footers because you're able to change the margins, but it's not really what it was designed for.

With that said, you can still choose to make your own headers and footers that are only visible when printing. For example:

HTML

<body>
  <div id="print-head">Page 1. Hidden in browser, shows up printing.</div>
  <div>This is just a normal div that shows up on both.</div>
</body>

CSS

#print-head {
  display: none;
}
@media print {
  #print-head {
    display: block;
  }
}

I know you said you wanted pages numbers, but you'd need to know exactly where the page breaks were going to happen. Even if you defined the page breaks yourself, there is no guarantee that users settings / environments won't introduce additional breaks, which would put the headers / footers out of place.

Upvotes: 3

Related Questions