feat: browser-native PDF export via Print with animations completed#105
Open
sonihemish wants to merge 2 commits into
Open
feat: browser-native PDF export via Print with animations completed#105sonihemish wants to merge 2 commits into
sonihemish wants to merge 2 commits into
Conversation
Make Cmd/Ctrl+P -> Save as PDF produce a correct one-page-per-slide PDF with no scripts or dependencies, addressing zarazhangrui#28: - viewport-base.css: add @page sized to the 1920x1080 design canvas, force print-color-adjust so themed backgrounds survive printing, fast-forward entrance animations (.reveal variants, [data-anim]) to their finished state so slides never visited on screen print with all text and diagrams visible, freeze transitions/animations to avoid mid-flight capture, and hide deck/editing chrome. - viewport-base.css: harden the print slide box (border-box + max-height + zero margin) — a slide even 1px taller than the page sheet makes browsers emit a blank page after every slide. - html-template.md: add setupPrintExport() with beforeprint/afterprint handlers that mark all slides .visible for printing and restore the exact pre-print state, keeping on-screen behavior untouched. - bold-template-pack/deck-stage.js: extend the injected document-level print stylesheet the same way (slide content is light DOM which ::slotted() cannot reach), mirror the blank-page hardening, and add beforeprint/afterprint handlers for [data-deck-active]-gated styles. - SKILL.md/README.md: document browser-native export as the primary zero-dependency path (vector output, selectable text); keep the Playwright script as the automation alternative. Verified with headless Chromium print-to-PDF: 3-slide deck with .reveal/.reveal-scale/.reveal-left/.reveal-blur content on unvisited slides renders 3 exact 1920x1080 pages with all content revealed and chrome excluded; screen rendering is pixel-identical before/after.
Add a default floating PDF button wired to window.print() so viewers can export without knowing the Cmd/Ctrl+P shortcut. Hidden while printing via the print-hidden rule; styled to match the deck theme.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Makes the browser's built-in Print → Save as PDF (Cmd/Ctrl+P) produce a correct one-page-per-slide PDF with all entrance animations completed — no scripts, no Playwright, no dependencies. Addresses #28.
Generated decks also get a small floating 📥 PDF button wired to
window.print(), so viewers can export without knowing the shortcut.Why
The existing
export-pdf.shworks, but it requires Node + Playwright (~150MB Chromium download), produces raster screenshots (no selectable text, large files), and can't be used by someone who just received the HTML file. The repo already had a@media printsection inviewport-base.css, but in practice it was broken:@pagerule → slides printed on A4/Letter with margins, scaled and cut..revealelements on slides the presenter hadn't visited stayed atopacity: 0, so printed pages were missing text and diagrams.print-color-adjust→ browsers stripped themed backgrounds.border-box) makes browsers emit a trailing blank page per slide.What changed
@pagesized to the 1920×1080 design canvas;print-color-adjust: exact; fast-forward.revealvariants and[data-anim]to their finished state; freeze transitions/animations mid-flight; hide deck/editing chrome; harden the slide box (border-box+max-height+ zero margin) against the blank-page problem.setupPrintExport()in the SlidePresentation controller:beforeprintmarks every slide.visibleso class-gated animations resolve,afterprintrestores the exact pre-print state. Documents the default floating PDF button.::slotted()can't reach) gains the animation fast-forward and hardening;beforeprint/afterprinthandlers cover styles gated on[data-deck-active].On-screen rendering is untouched — every change is scoped to
@media print/@page, and the JS handlers snapshot and fully restore deck state after the print dialog closes. Verified with byte-identical before/after screen screenshots.Testing
Headless Chromium
--print-to-pdf(same engine as the Cmd+P dialog) against a template-faithful test deck using.reveal,.reveal-scale,.reveal-left, and.reveal-bluron slides never visited on screen:Notes
export-pdf.sh— the script remains for automation and non-Chromium browsers.Closes #28.