Fix print to pdf
Change-Id: I27f134c1ee74fe06a7f4579f9f4845da5d5c7ef1
diff --git a/inst/reveal.js-5.2.1/css/theme/source/ids.scss b/inst/reveal.js-5.2.1/css/theme/source/ids.scss
index 41a1e43..de961f5 100644
--- a/inst/reveal.js-5.2.1/css/theme/source/ids.scss
+++ b/inst/reveal.js-5.2.1/css/theme/source/ids.scss
@@ -107,7 +107,12 @@
// body content lines up with the heading text rather than with the bar.
$idsContentInset: calc(#{$idsBarWidth} + #{$idsHeadingGap});
-.reveal .slides section:not(.stack) {
+// The html prefix is solely about specificity: reveal's print styles
+// (html.reveal-print .reveal .slides section { padding: 0 !important }) would
+// otherwise beat this rule and flatten the inset on ?print-pdf pages. An html
+// prefix ties that specificity, and since the theme is loaded after
+// reveal.css, this rule wins both on screen and in print.
+html .reveal .slides section:not(.stack) {
box-sizing: border-box !important;
padding-left: #{$idsContentInset} !important;
padding-right: #{$idsContentInset} !important;
@@ -481,6 +486,70 @@
transition: opacity 800ms ease-in-out;
}
+/* In print, the footer's negative stacking drops it behind the .pdf-page
+ * backgrounds (z-index 1); lift it above them. position: fixed repeats it at
+ * the bottom of every printed page. */
+html.reveal-print #ids-footer {
+ z-index: 100 !important;
+}
+
+// reveal's print CSS gives every .pdf-page z-index:1, which forms a separate
+// stacking context per page. The slide-number-pdf lives INSIDE such a page, so
+// its own z-index only competes within the page: the footer (z-index 100 at
+// root level) always paints over it, and raising the number's z-index alone
+// cannot help. Remove the per-page stacking context in print (the pages are
+// separated by page-break-after:always anyway, so nothing needs stacking), and
+// the number's z-index 200 wins against the footer globally. Position stays
+// the theme's screen rule (right:29px / bottom:22px), which puts the number
+// inside the footer band with its white background cutting the dotted line --
+// the same look as on screen.
+html.reveal-print .reveal .slides .pdf-page {
+ z-index: auto !important;
+}
+
+// On screen the number is flanked by the arrow buttons, so its slightly raised
+// baseline reads as deliberate; in print it shares the footer band with the
+// author/title/date line, whose vertically centered text has its baseline
+// ~19px above the page bottom. The number's screen offset (bottom:22px, 14px
+// font from reveal's print rule) puts its baseline ~25px up. 15px aligns the
+// two baselines. Print-only: the screen rule keeps its 22px.
+html.reveal-print div.slide-number-pdf {
+ z-index: 200 !important;
+ bottom: 15px !important;
+}
+
+// On screen the bar segments shift left by --ids-band-left so the bar reaches
+// the window's physical edge when the slide is pillarboxed. In print there are
+// no bands (.pdf-page == slide box), and if the band values are ever stale
+// (e.g. an outdated template script), a nonzero band-left would push the
+// segments outside the pdf-page, whose overflow:hidden then clips them.
+// Pin the geometry explicitly for print instead of trusting the custom
+// property: title segments start at the heading's (== pdf-page's) left edge,
+// the subtitle segment (which lives in the text column, inset by
+// $idsContentInset) reaches back out by exactly the inset, and the level1
+// divider bar starts at the section's left edge. Widths stay the normal bar
+// width, so the visible result is pixel-identical to the on-screen bar.
+html.reveal-print .reveal .slides section:not(.title-frame) > h1:first-child::before,
+html.reveal-print .reveal .slides section:not(.title-frame) > h2:first-child::before {
+ left: 0 !important;
+}
+
+html.reveal-print .reveal .slides section:not(.title-frame) > h2:first-child + h3::before {
+ left: calc(-1 * #{$idsContentInset}) !important;
+}
+
+html.reveal-print .reveal .slides section.level1:not(.title-frame)::before {
+ left: 0 !important;
+}
+
+// The WGL membership logo sits at bottom:10px of the title frame -- inside
+// the footer's ~46px band on print pages (the footer is force-shown on every
+// page in print view and cannot be hidden per page, position:fixed). Lift the
+// logo above the footer in print only; the screen layout stays put.
+html.reveal-print .reveal .slides section.title-frame {
+ background-position: right 8px bottom 55px;
+}
+
// Like the orange bar/IDS logo above, this is painted on the slide itself
// (rather than on .slide-background-content, which spans the raw,
// unscaled viewport) so it stays pinned to the title slide's true
diff --git a/inst/reveal.js-5.2.1/dist/theme/ids.css b/inst/reveal.js-5.2.1/dist/theme/ids.css
index bc3301d..d3cc7ed 100644
--- a/inst/reveal.js-5.2.1/dist/theme/ids.css
+++ b/inst/reveal.js-5.2.1/dist/theme/ids.css
@@ -35,9 +35,9 @@
--r-heading4-size: 0.7em;
--r-code-font: Fira Code, Fira Mono, DejaVu Sans Mono, Source Code Pro, monospace;
--r-link-color: #2a76dd;
- --r-link-color-dark: rgb(12.0674763833%, 39.0418353576%, 75.5991902834%);
- --r-link-color-hover: rgb(42.3410335794%, 62.9141859173%, 90.7962213225%);
- --r-selection-background-color: rgb(59.5879971422%, 74.0073033262%, 93.5492577598%);
+ --r-link-color-dark: rgb(30.7720647773, 99.5566801619, 192.7779352227);
+ --r-link-color-hover: rgb(107.9696356275, 160.4311740891, 231.5303643725);
+ --r-selection-background-color: rgb(151.9493927126, 188.7186234818, 238.5506072874);
--r-selection-color: #fff;
--r-overlay-element-bg-color: 240, 240, 240;
--r-overlay-element-fg-color: 0, 0, 0;
@@ -360,7 +360,7 @@
background-color: var(--r-background-color);
}
}
-.reveal .slides section:not(.stack) {
+html .reveal .slides section:not(.stack) {
box-sizing: border-box !important;
padding-left: calc(calc(var(--slide-height) * 0.05) + 24px) !important;
padding-right: calc(calc(var(--slide-height) * 0.05) + 24px) !important;
@@ -632,6 +632,39 @@
transition: opacity 800ms ease-in-out;
}
+/* In print, the footer's negative stacking drops it behind the .pdf-page
+ * backgrounds (z-index 1); lift it above them. position: fixed repeats it at
+ * the bottom of every printed page. */
+html.reveal-print #ids-footer {
+ z-index: 100 !important;
+}
+
+html.reveal-print .reveal .slides .pdf-page {
+ z-index: auto !important;
+}
+
+html.reveal-print div.slide-number-pdf {
+ z-index: 200 !important;
+ bottom: 15px !important;
+}
+
+html.reveal-print .reveal .slides section:not(.title-frame) > h1:first-child::before,
+html.reveal-print .reveal .slides section:not(.title-frame) > h2:first-child::before {
+ left: 0 !important;
+}
+
+html.reveal-print .reveal .slides section:not(.title-frame) > h2:first-child + h3::before {
+ left: calc(-1 * calc(calc(var(--slide-height) * 0.05) + 24px)) !important;
+}
+
+html.reveal-print .reveal .slides section.level1:not(.title-frame)::before {
+ left: 0 !important;
+}
+
+html.reveal-print .reveal .slides section.title-frame {
+ background-position: right 8px bottom 55px;
+}
+
.reveal .slides section.title-frame {
background-image: url("https://corpora.ids-mannheim.de/slides/reveal.js.ids/images/Mitglied_WGL_transparent.svg");
background-repeat: no-repeat;
diff --git a/inst/rmarkdown/templates/revealjs_presentation/resources/default.html b/inst/rmarkdown/templates/revealjs_presentation/resources/default.html
index e65dd40..fbbe211 100644
--- a/inst/rmarkdown/templates/revealjs_presentation/resources/default.html
+++ b/inst/rmarkdown/templates/revealjs_presentation/resources/default.html
@@ -731,9 +731,11 @@
if (!scale) return;
var size = Reveal.getComputedSlideSize();
var root = document.querySelector('.reveal-viewport') || document.body;
- root.style.setProperty('--ids-band-left',
+ // in print layout each slide fills its .pdf-page exactly -- no bands
+ var bands = document.documentElement.classList.contains('reveal-print');
+ root.style.setProperty('--ids-band-left', bands ? '0px' :
Math.max(0, (window.innerWidth - size.width * scale) / 2 / scale) + 'px');
- root.style.setProperty('--ids-band-top',
+ root.style.setProperty('--ids-band-top', bands ? '0px' :
Math.max(0, (window.innerHeight - size.height * scale) / 2 / scale) + 'px');
}
Reveal.on('ready', updateBands);