🖨️ Some PDF layout improvements (#2738)

fonsp · Dec 6, 2023 · b6998a3 · b6998a3
1 parent a4de685
commit b6998a3
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 6 deletions.
diff --git a/frontend/components/Editor.js b/frontend/components/Editor.js
@@ -1464,7 +1464,11 @@ patch: ${JSON.stringify(
                     <header id="pluto-nav" className=${export_menu_open ? "show_export" : ""}>
                         <${ExportBanner}
                             notebook_id=${this.state.notebook.notebook_id}
-                            notebook_shortpath=${this.state.notebook.shortpath}
+                            print_title=${
+                                this.state.notebook.metadata?.frontmatter?.title ??
+                                new URLSearchParams(window.location.search).get("name") ??
+                                this.state.notebook.shortpath
+                            }
                             notebookfile_url=${this.export_url("notebookfile")}
                             notebookexport_url=${this.export_url("notebookexport")}
                             open=${export_menu_open}

diff --git a/frontend/components/ExportBanner.js b/frontend/components/ExportBanner.js
@@ -44,7 +44,7 @@ export const WarnForVisisblePasswords = () => {
     }
 }
 
-export const ExportBanner = ({ notebook_id, notebook_shortpath, open, onClose, notebookfile_url, notebookexport_url, start_recording }) => {
+export const ExportBanner = ({ notebook_id, print_title, open, onClose, notebookfile_url, notebookexport_url, start_recording }) => {
     // @ts-ignore
     const isDesktop = !!window.plutoDesktop
 
@@ -55,12 +55,13 @@ export const ExportBanner = ({ notebook_id, notebook_shortpath, open, onClose, n
         }
     }
 
+    //
     let print_old_title_ref = useRef("")
     useEffect(() => {
         let a = () => {
             console.log("beforeprint")
             print_old_title_ref.current = document.title
-            document.title = notebook_shortpath.replace(/\.jl$/, "").replace(/\.plutojl$/, "")
+            document.title = print_title.replace(/\.jl$/, "").replace(/\.plutojl$/, "")
         }
         let b = () => {
             document.title = print_old_title_ref.current
@@ -71,7 +72,7 @@ export const ExportBanner = ({ notebook_id, notebook_shortpath, open, onClose, n
             window.removeEventListener("beforeprint", a)
             window.removeEventListener("afterprint", b)
         }
-    }, [notebook_shortpath])
+    }, [print_title])
 
     return html`
         <aside id="export" inert=${!open}>

diff --git a/frontend/editor.css b/frontend/editor.css
@@ -69,7 +69,6 @@ pluto-editor {
 
 main {
     flex: 1;
-
     max-width: calc(700px + 25px + 6px); /* 700px + both paddings */
     padding-top: 0px;
     padding-bottom: 4rem;
@@ -286,6 +285,7 @@ pluto-output hr {
     border-top: 3px solid var(--rule-color);
     margin-left: 0;
     margin-right: 0;
+    break-after: page;
 }
 
 pluto-output blockquote {
@@ -1109,7 +1109,6 @@ pluto-cell {
     min-height: calc(23px + 1px + 1px);
     margin-top: var(--pluto-cell-spacing);
     position: relative;
-    break-inside: avoid;
 }
 
 pluto-output {

diff --git a/frontend/hide-ui.css b/frontend/hide-ui.css
@@ -19,12 +19,53 @@ pluto-runarea,
 /* These next rules only apply to @media print, i.e. the PDF export. We want to hide these items in the PDF, but not in a static HTML. */
 @media print {
     .edit_or_run,
+    .floating_back_button,
     pkg-status-mark,
+    .MJX_ToolTip,
+    .MJX_HoverRegion,
+    .MJX_LiveRegion,
     nav#undo_delete {
         display: none !important;
     }
+    main {
+        padding-bottom: 0;
+    }
     pluto-input .cm-editor {
         border-left: 1px solid var(--normal-cell-color);
         border-radius: 4px !important;
     }
+
+    pluto-cell {
+        break-inside: avoid;
+    }
+    /* Cells with simple prose content should be allowed to break. Here is a hearistic for that: (we could check for the `.markdown` class generated by the Markdown stdlib but we also want to fully support alternatives) */
+    pluto-cell.code_folded:has(p) {
+        break-inside: auto;
+    }
+
+    pluto-output hr {
+        height: 0;
+        margin: 0;
+        visibility: hidden;
+        break-after: page;
+    }
+
+    pluto-output h1 {
+        break-before: page;
+    }
+    pluto-cell:first-of-type pluto-output h1 {
+        break-before: avoid;
+    }
+
+    /* pluto-cell:has(h1) + pluto-cell {
+        break-inside: auto;
+    } */
+
+    pluto-output :is(h1, h2, h3, h4) {
+        break-after: avoid;
+    }
+}
+
+@page {
+    widows: 2;
 }