2

I'm trying to change what shows up in the margins when I print out a page from my website. I've read here that it should be possible to set the content of "page-margin boxes" like so:

@page {
  @top-center {
    content: "Page " counter(page);
  }
}

...But no matter what I try, this style seems to be completely ignored. I've tried in Chrome, Firefox, and Edge. I'm starting to wonder if the print preview functionality each browser has is somehow overriding this, as they provide their own margin content?

Has anybody ever got this to work? I assume the major browsers should handle this as caniuse.com says so (I blindly believe it :) ) and multiple examples I've found online imply that others have met with success.

FreakinOutMan
  • 247
  • 1
  • 2
  • 14

2 Answers2

3

In case this helps anyone, I've found that most modern browsers - including all three I tested with (Chrome, Firefox, Edge) - do not support @page margin boxes at this point in time!

I learned this from user alex's comment on an answer to another SO question here - Page numbers with CSS/HTML

And his source was https://en.wikipedia.org/wiki/Comparison_of_layout_engines_(Cascading_Style_Sheets)#Grammar_and_rules

FreakinOutMan
  • 247
  • 1
  • 2
  • 14
  • no, you are wrong. They support. The reason @page margin: 1in; does not work is because you select margin 'None' in print preview dialog window. If you select 'default' for margin. Then 1in will take effect – hoogw Aug 20 '23 at 11:00
0

The reason @page margin: 1in; does not work is because you select margin 'None' in print preview dialog window.

enter image description here

If you select 'default' for margin. Then 1in will take effect

enter image description here

hoogw
  • 4,982
  • 1
  • 37
  • 33