search

slidevjs / slidev

Presentation Slides for Developers
https://sli.dev
MIT License
33.49k stars 1.37k forks source link

Should PDF export use "print" CSS media? #1236

Open jgosmann opened 10 months ago

jgosmann commented 10 months ago

Describe the bug I am using some CSS styles (gradient on a text) that work well in browsers, but are displayed wrong (to varying degrees) in PDF readers when exporting the presentation to PDF. I attempted to remove the gradient (as graceful degradation) for the PDF export with an @media screen CSS media query, assuming that the PDF export would be "print" media. However, this does not work because apparently the PDF export emulates "screen" media.

Maybe this is desired to keep the export as close as possible to the web version. But to me it seems a valid use case to wanting to adjust some styles solely for the export to make them more suitable for actual printing or achieving better compatibility with a wider range of PDF viewers.

If it is agreed upon to change this behavior, I would be willing to prepare a PR for the change.

To Reproduce Steps to reproduce the behavior:

  1. Create a presentation with some CSS style contained in a media query (e.g. @media print { background: red; } or @media screen { background: blue; }).
  2. Export to the presentation to PDF.
  3. The style of the "screen" media (instead of "print" media) will be shown in the PDF export.

Desktop (please complete the following information):

jgosmann commented 10 months ago

For what it is worth, we could workaround our issue by importing import { isPrintMode } from '@slidev/client/logic/nav.ts' and using that to attach an additional CSS class to modify the styles for the PDF export.