Printing sidenotes

[samarulmeu]

Hello to you all!

This is more of a question than a issue. Is there a possibility to have the sidenotes/marginnotes appear when printing? I have no idea how to enable this.

Thank you very much!

[vincentdoerig]

Hi! Yes, it is indeed possible with the @media print { ... } query in your stylesheet. If I have the time I will try to make them appear when printing. In the meantime, here is an article on the print media query: https://benfrain.com/create-print-styles-using-css3-media-queries/.

PS: If you do end up writing print styles, feel free to open a PR or send them over so that we can add them to LaTeX.css :).

[samarulmeu]

Hi @vincentdoerig!

I know about @media print I just did not found information about how to handle the footnotes (were to put them in the page). If you can give me at least a hint, I could try to get something done.

Thank you!

[vihuna]

I have been playing here with Paged.js to make a "printable" design for a LaTeX.css document.

You can see here the pdf file obtained: LaTeX.css — Make your website look like a LaTeX document.pdf.

Some Notes:

• Loading. Paged.js should be loaded in last position, so it can do all the calculations with sizes of the final HTML document (after other scripts manipulations). It seems it starts immediately after the DOM is loaded, and breaks scripts that are not fully loaded. The biggest problem has been Prism.js: I had to disable automatic highlight after the HTML document is loaded, and wrap the function to highlight all code inside a Promise (also, highlightAll() returns a callback for each element highlighted, although highlights the entire document!).

  Some links about loading Pajed.js and Mathjax:

  • https://docs.mathjax.org/en/latest/web/configuration.html#performing-actions-during-startup
  • https://docs.mathjax.org/en/latest/web/typeset.html#typesetting-and-converting-mathematics
  • https://groups.google.com/g/mathjax-users/c/m_fYYMLKIUo
  • https://gitlab.coko.foundation/pagedjs/pagedjs#polyfill
  • https://gitlab.coko.foundation/pagedjs/pagedjs/-/blob/main/examples/math.html

  Also, It has to be noted that Paged.js needs "a web server to let the polyfill access your CSS file". Then the document can be printed with web browser (-> print to pdf file, with no headers and no margins).

  There is a command line version to export the document to PDF, but I haven't tested it yet.

• Original content breaks. Paged.js can be very aggressive with the original document layout. So, for example, when breaks an ordered list into pages, it has to adjust the numeration. But it seems it still does not supports CSS counters() function; so document ToC numeration is going to get broken if it doesn't fit in a single page.

  I have used a script from one of the subprojects examples from Paged.js, to build the ToC automatically and fix this issue (I thought it could be interesting explore this method).

• Differences with LaTeX article. Latex.css has some differences with default latex articles (text size of side notes, text size and alignment of abstract, ...).

  In particular, the two-sided side notes and their width needs to bee modified to fit in A4 paper (or US Letter), so the final page design may differ from both, the LaTeX.css and the LaTeX-original design.

• This is only a test sample. There would be a lot of things to work on: from css styling (table borders are too thick, adjust page margins, ...), to broken elements (links in pdf document?, buttons, ...), and also the way Padjed.js is integrated into LaTeX.css (script URI or npm module, ...).

• I have not tested Paged.js enough. Makes page breaks inside paragraphs? Can break a LaTeX-displayed math formula? (It's supposed that supports MathJax). And so, can you "manually" avoid "breaks-inside"? (I have to take a look at the documentation about supported CSS elements).

  Another example: sidenotes. With a LaTeX.css sidenote using the following layout

  <p>
    Some text <label>...</label><input> <span class="sidenote"> sidenote text sidenote
    text sidenote text sidenote text sidenote text ||auto-page-break-here|| </span>.
  </p>

  is Paged.js going to be careful to avoid starting a page with a dot?

Finally, what do you think? Is this worth working on?

[vincentdoerig]

Thanks for putting so much thought into this @vihuna! I really like the idea of having (nice!) printable documents, however, I would like to keep the "main" purpose of the project as simple as possible. A reference on the documentation to a secondary page (similar to the languages feature) would be good in my opinion. People interested in adding this "extension" can then read through the dedicated documentation. Regarding the associated styles, these should ideally be in a separate CSS file to avoid cluttering the main styles.

If you want to work on this, feel free to do so!! I will gladly have a look and give feedback once you open a PR!