0

Why doesn't this work?

I want use the @page rule not @media print

@page {
  size: A4;
  margin: 10%;
  @bottom-center {
    content: "Page " counter(page);
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
</head>

<body>
  <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi nam assumenda magni, minima, odit cumque eveniet impedit in vel quasi accusamus fugit reiciendis vitae, consectetur aspernatur error quas dolore possimus.</div>
</body>

</html>

enter image description here

I am using Google Chrome Version 114.0.5735.134 (Official Build) (64-bit)

medilies
  • 1,811
  • 1
  • 8
  • 32
  • https://stackoverflow.com/questions/20050939/print-page-numbers-on-pages-when-printing-html I suggest you look here. – Mecit Yücetürk Jun 22 '23 at 20:00
  • @MecitYücetürk thanks for the good link. but most of the participations are old (the latest is in 2019). and most of the solutions suggest alternatives to `@page` rule. I at least need to know if what I am trying to accomplish is supported by browsers and if yes then how to get it to work. – medilies Jun 22 '23 at 20:32
  • I believe that when you try to generate a PDF from an HTML document, the PDF viewer typically does not interpret the CSS rules defined in the `@page` rule. Only the styles in the `@media print` rule, because these styles are specifically intended for printing. – ninadepina Jun 23 '23 at 19:17
  • @ninadepina but the margin from `@page` works. Even the docs I have seen state that `@page` works on print pages. – medilies Jun 24 '23 at 13:40

0 Answers0