CSS page break left/right

Question

Does anyone know of a tool out there that previews @page CSS rules? Failing that, is there something out there that I could use to print a document with full support for these rules?

http://www.w3.org/TR/CSS2/page.html

Opera comes closest. It supports everything except for the left/right page breaks (treats them as always) but still requires you to print to something to see them (can't see a live print preview).

Answer 1

Displaying Print preview

In Opera 12.16 (and all version prior to it, but unfortuntely not in Opera 16+), you can press Control + Shift + P to display Print preview, which will use print CSS media to display the page. If, for any reason, this shortcut does not work for you, you need to add it to keyboard shortcuts:

1. Open Opera Preferences (Control + F12)
2. Switch to Advanced tab → Shortcuts
3. Click Edit… button on the right side of Keyboard Setup part
4. Click New
5. Fill in "p ctrl shift" in first column (Input context and shortcuts) and "Print preview" in second (Actions)
6. OK, OK, refresh the page and try it now ;-)

Using @page CSS rules

… should be simple, everything works just fine in Opera (again, only 12.16-). Just remember to put @page CSS rules in @media print section of stylesheet, like this:

@media print {
  @page {
    margin: 0.7cm 0.85cm;
  }
  @page :first {
    margin-top: 5cm;
  }
  @page :left {
    margin-right: 2.5cm;
  }
  @page :right {
    margin-left: 2.5cm;
  }
}

I'm using these few rules to style my documents for better printing (notice extra margin on inner sides of pages, leaving space for binding). Hope it helps!