Start first page with `:right` css page rules?

Question

I have defined @page :left and :right margins like this:

@page :left {
  margin-left: 0.75in;
  margin-right: 0.25in;
}

@page :right {
  margin-right: 0.75in;
  margin-left: 0.25in;
}

When I print using Chrome it always seems to start the document with the :left rules.

Is there a way to have printing start with the :right rules?

I'm most interested in a solution for Chrome, but I'd also be interested in solutions for Prince.

Answer 1

You can use the page-break-before css property to adjusts page breaks in both Chrome and Prince (apparently).

Answer 2

CSS stands for "cascading style sheet" and the "cascading" means that it's read from top to bottom. If you simply switch the order of your statements, it should read right first.

Answer 3

Placing the @page :right above the :left should do it.

@page :right {
  margin-right: 0.75in;
  margin-left: 0.25in;
}

@page :left {
  margin-left: 0.75in;
  margin-right: 0.25in;
}