CODEWITHSUNDEEP
cssprinting
FreakinOutMan
FreakinOutMan

Reputation: 266

Setting print margin content via @page css isn't working

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.

Upvotes: 3

Views: 2771

Answers (2)

hoogw
hoogw

Reputation: 5525

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

Upvotes: -3

FreakinOutMan
FreakinOutMan

Reputation: 266

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

Upvotes: 3

Related Questions