Styling based on odd/even page position

[ghost]

Is it possible to style an element based on whether it appears on an odd or even page with DomPDF?

We would like to implement a simple footer for a two-sided print where the page number is always on the outside of the document. Which in my mind would only require a single float or display-CSS property to be changed depending on the page.

.page_title:before {
  content: 'Document Title';
}

.page_number:before {
  content: counter(page);
}

.node.footer {
  position: fixed;
  inset: auto 0mm -27.5mm 0mm;

  display: block;

  height: 17.5mm;
  text-align: end;
}

.node.footer > .footer-start,
.node.footer > .footer-end {
  display: inline-block;
}

.node.footer > .footer-end {
  float: right;
}

/* --- */
:host([page-odd]) .node.footer > .footer-start {
  display: none;
}
:host([page-even]) .node.footer > .footer-end {
  display: none;
}
/* --- */

<div class="node footer">
  <div class="footer-start">
    <div class="type caption">
      <span class="page_number"></span>
      <span style="margin: 0mm 2mm;">—</span>
      <span class="page_title"></span>
    </div>
  </div>
  <div class="footer-end">
    <div class="type caption">
      <span class="page_number"></span>
    </div>
  </div>
</div>

---

#3178 is similar to this but doesn't feel like a solution, as it would not work with auto page breaks. Is there any way to do this programmatically?

[ghost]

Based on the callbacks solution from #3178 (reply in thread) –

<div class="node footer">
  <div class="footer-start" role="show-on-odd">
    <div class="type caption">
      <span class="page_number"></span>
      <span style="margin: 0mm 2mm;">—</span>
      <span class="page_title"></span>
    </div>
  </div>
  <div class="footer-end" role="show-on-even">
    <div class="type caption">
      <span class="page_number"></span>
    </div>
  </div>
</div>

$dompdf->setCallbacks([
  [
    'event' => 'begin_frame',
    'f' => function ($frame, $canvas, $fontMetrics) {
      $n = $frame->get_node();
      $p = $canvas->get_page_number();

      $role = $n->hasAttributes() && //
        ($a = $n->attributes->getNamedItem("role")) !== null ? $a->nodeValue : null;

      if (!isset($role)) return;
      
      if (
        ($role === 'show-on-odd' && $p % 2 === 0) ||
        ($role === 'show-on-even' && $p % 2 !== 0)
      ) {
        $style = $frame->get_style();
        $style->set_used("display", "none");
      }
    }
  ]
]);

[bsweeney]

Are you saying you were able to make this work using the above callback?

[ghost]

It does work with that callback, yes. Are there other ways to achieve condition based styling like this?

[bsweeney]

Dompdf does not yet support this scenario through styling alone. There is a request to add @page as a CSS selector (#1486). And though not quite the same, adding support for named pages (#498) would also help in some related scenarios.

I can not yet say when either of these will be implemented.