Moving HTML Content

Moving entire HTML sections into a page region is accomplished by creating a running element, which is also part of the draft CSS Generated Content for Paged Media Module specifications.

For example, a <footer> element could be turned into a repeating footer on every page:

footer {
  position: running(footer);
}
@page {
  @bottom {
    content: element(footer);
  }
}

First, the running() function removes the entire <footer> from the document flow—along with any associated styling and pseudo-elements—and names it footer. Then it’s inserted into the @bottom page region with the element() function, where it’s repeated on every page.

Image watermarks are created with the same technique Running elements are often used alongside other generated content elements, such as page numbers, to create complex content blocks.

All of this is possible because of Prince's help in defining the CSS Paged Media specifications, which, unfortunately, are still unavailable in any open-source libraries, including Google Chrome's Puppeteer, but is why we created DocRaptor!

This functionality is only possible because of Prince's contributions toward defining the CSS Paged Media specifications. Regrettably, these specifications haven't been integrated into any open-source libraries, such as Google Chrome's Puppeteer.