18

I have css for print as simple as this:

@page {
  @top-left {
    content: "TOP SECRET";
    color: red
  }
  @bottom-center {
    content: counter(page);
    font-style: italic
  }
}

But the Chrome print preview and save to pdf seems not to recognize this at all. How can I correctly set the header and footer when priting?

EDIT: @page is supported by none ref

However, do I have other choice to do this. I'm not working on websites. The product wants a pdf as result only. I can accept chrome, webkit, plantomjs etc.

hbrls
  • 2,110
  • 5
  • 32
  • 53
  • 1
    This is quite simply an area of the CSS spec that has very little browser support. You may get some to work, on a limited browser selection, with the answers to this question: http://stackoverflow.com/questions/15797161/browser-support-for-css-page-numbers – Steven Don Jan 06 '14 at 09:36
  • 7
    @StevenDon interesting, `@page` is not supported at all [ref](http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28Cascading_Style_Sheets%29). Why are there so many posts over the web demonstrating similar codes. – hbrls Jan 06 '14 at 09:47
  • Are you applying this CSS to some HTML and wanting to display it in a browser? I don't think that's how the rules are meant to be used. You could pass the HTML/CSS through a PDF processor and generate a PDF to display in a browser. – CodeNinja Feb 21 '21 at 03:12

2 Answers2

2

You can use the open tool PagedJS to render iframes or whole pages using the CSS paged-media spec. https://pagedjs.org/

This tool is a polyfill that converts blocks like the one you posted (CSS Paged Media that isn't implemented by browsers) into browser-compliant html/css.

It also has a CLI alternative that sets up puppeteer & creates PDF outputs: https://gitlab.coko.foundation/pagedjs/pagedjs-cli

Olex Ponomarenko
  • 905
  • 7
  • 10
-2

Near as I can determine, CSS features for paged media are primarily for systems that render for printing, rather than systems that render for the screen (browsers) or the print feature of browsers. An example of an HTML/CSS engine for printing is Prince. So, @page won't work in a browser, nor (as far as I know) was it intended to.

Marc Rochkind
  • 3,678
  • 3
  • 30
  • 38
  • 5
    I would hate to believe that a module designed for the web platform was designed by persons who are ignorant of the need of such features *in the web platform*. Your average web user knows little of the command line but often finds a need to print articles, discussions, books, reports, and so on. – tuespetre Mar 07 '16 at 14:40
  • 1
    I don't understand your comment at all. What's the relevance of what you believe to be true of the designers of this module? A browser window is not a paged medium. – Marc Rochkind Mar 09 '16 at 15:27
  • 3
    I understand the browser window is not a paged medium, but the print (and print preview) feature of browsers arguably is, and it is a pervasive one at that (unlike Prince.) – tuespetre Mar 09 '16 at 15:40
  • 1
    OK.. I think I understand. You are explaining how it SHOULD work (in your opinion). By contrast, I was explaining how it DOES work. Hence the difference. – Marc Rochkind Mar 09 '16 at 20:12
  • 2
    This answer is disappointing, as basic support for [CSS2's `@page`](https://www.w3.org/TR/1998/REC-CSS2-19980512/page.html) is present in [nearly all browsers](https://developer.mozilla.org/en-US/docs/Web/CSS/@page), specifically to modify CSS properties when printing a document. – Alf Eaton Dec 21 '17 at 11:01