Skip to content

WIP: Print Mode

Lukas Möller requested to merge lmoeller/community-solutions:print into staging

Implements #45

Would be better if #19 (closed) was implemented as well as the exported pdf has too much whitespace.

Although it would be possible to render the pdf version with solutions included on the server it would mean that two different markdown renderers would have to be maintained. Initial experimentation with exporting to latex has shown that is difficult to find a markdown → latex converter that is fully compatible with the client-side version of the markdown renderer. Therefore this branch is an attempt to implement an export function in the frontend.

Ideally the feature would be implemented on the server. The answers would be converted into separate PDF files using the same markdown renderer (by a software like puppeteer) and these PDF files would be composited together with the exam PDF.

This branch introduces a print-mode that affects how an exam is rendered:

  • For each answer section the answer with the most upvotes is displayed (I probably should also take expert-votes into account.)
  • Each pdf section is rendered independent from the viewport (Uses a lot of RAM (> 300 MB for most exams) but is required for PDF exporting)
  • Whitespace is reduced
  • Box shadow is removed
  • debouncing is turned off for resizing events
  • Buttons are hidden
  • Answers are displayed in a serif font

Some of these changes are introduced if @media print matches, others are active if a special prop is set. Not all of these changes can use @media print as some require JS-work. Although one could use events to trigger print-mode before printing there are problems as some actions are asynchronous (I had problems where some sections wouldn't be visible in the PDF).

Currently the resulting PDF is quite large as the canvas elements are converted into images. This could be an advantage of a server-based approach.

TODO:

  • Test browser compatibility
  • Improve appearance
  • Fix rendering issues + add dpi override
  • Possibly use the SVG renderer of pdf-js which would result in a vector-graphics PDF instead of current bitmap based PDF-rendering.
  • Possibly switch to a server-side solution.

Example PDF: DM_FS19_-_VIS_Community_Solutions.pdf

Merge request reports