Margin at-rules not applied using chrome_print()

[JaydenCole-55]

I am trying to use pagedown::chrome_print() to pagenate HTML to an output pdf within RStudios. I wish to add page numbers in the bottom right corner page-margin box. I understand this should be applied under the page at-rule using margin at-rules . For example:

@page{
      size: 8.5in 11in;
      margin: 10%;
      @bottom-right-corner{
              content: counter(page);
      }
}

However, after some testing, I have not been able to apply any at-margin rules. However, other rules in the @page context are applied. In the example above, both size and margin percentage are applied to the page(s) when printed.

Attached is a simple HTML file (uploaded as a .txt file so GitHub will accept it) I have been using to test this. I have also tried applying a separate css file to this HTML file. The results are the same.

simple.txt

I am using pagedown 0.20, R 4.3.0, working within RStudios 2023.03.1 Build 446 and Google Chrome 114.0.5735.199

[cderv]

Are you using a pagedown format for R Markdown ? Or are you just using chrome_print() directly on the HTML file ?

If I open you document in a browser, and run Chrome print on it, it won't apply. Not an issue with pagedown - just your document does not work to print in browser like you expect, even without the package.

I believe rules like @top-left or @bottom-right-corner still requires Paged.js and not just a print to PDF using Chrome (which chome_print() does). margin and size are more native so works.

For context, this is the whole point of Paged.js (https://pagedjs.org/about/)

Paged.js follows the Paged Media standards published by the W3C (ie the Paged Media Module, and the Generated Content for Paged Media Module). In effect Paged.js acts as a polyfill for the CSS modules to print content using features that are not yet natively supported by browsers.

pagedown is allowing to use Paged.js in HTML output document so that they can be printed paginated. If I put your CSS in a custom.css

h1 {
  color:blue;
}
h2 {
  color:red;
}
@page {
  size: 8.5in 11in;
  margin: 10%;
  @top-left{
    content: "Please Write something";
    border: solid green;
  }
}
p {
  color: green;
}

and they, add it to a pagedown::html_paged format then it works as expected

---
title: test
output: 
  pagedown::html_paged:
    css: ["custom.css", "default-fonts", "default-page", "default"]
---

# My First Heading

## My Second Heading

My first paragraph.

• Paginated view of your document

This will print accordingly, but could require some tweaking regarding margin elements size. Docs for paged.js margin processing: https://pagedjs.org/documentation/7-generated-content-in-margin-boxes/. More doc at https://pagedjs.org/documentation/

So overall, you may need to use paged.js more directly. Either using this R package or another way.

Hope it helps.

If I misunderstood your question, please do share more details

[JaydenCole-55]

This is great, thank you. I am using Quarto (the "next generation of R Markdown") to produce reports. Although most R Markdown files can be rendered through Quarto without modification, from what I understand, the pagedown output format is not possible in Quarto files ( yet ;) ). Let me know if I am incorrect.

In short, I will look for a way to integrate the paged.js script more directly into Quarto documents.

Thank you for the great help.

[cderv]

You can still use pagedjs-cli tool to print any HTML document using Paged.js https://pagedjs.org/documentation/2-getting-started-with-paged.js/#command-line-version

So you can

• Render with Quarto to HTML
• Print a paginated version using Paged.js CLI tool.

But yes there is no specific paged.js integration with Quarto HTML yet. So maybe some stuff won't be correctly formated or printed. You should try.