Question

I am trying to make a print newspaper that is easily generated from my WordPress site. I am trying to design the print template for it, but in order to control specific pages, I need to use the @page rule.

I read this tutorial, which suggests methods like:

@page :left {
  @top-left {
    content: "Cascading Style Sheets";
  }
}

But when I try this in Firefox 5 (and Chrome 14) print-preview or print, it does not print anything at the top-left. In fact, I can’t seem to do anything within the @page rule.

Am I doing this wrong or is this a CSS3 feature that just hasn’t been implemented yet?

Answer 1

Just after the preface, the tutorial states:

Web browsers are good at dealing with pixels on a screen, but not very good at printing. To print a full book we turned to Prince, a dedicated batch processor which converts XML to PDF by way of CSS. Prince supports the print-specific features of CSS2, as well as functionality proposed for CSS3.

So, the tutorial code isn’t meant for use with a browser’s print function in the first place.

In any case, as I said in my comment, I wouldn’t count on any browser implementing this yet. Everyone’s crazy about the stuff happening on screen like animations right now.