1/* Print / export-to-PDF styles.
2 *
3 * Exporting a PDF means printing the rendered document with the browser's own
4 * "Save as PDF" destination, which keeps everything vector: KaTeX math stays
5 * selectable text, mermaid diagrams stay SVG, and no rasterizing library is
6 * needed. The rules below turn the two-pane app into a single flowing
7 * document: the chrome and the editor are hidden, the height and overflow
8 * constraints that make the screen layout scroll are lifted (otherwise the
9 * print would be clipped to one page), and page breaks are steered away from
10 * the middle of code blocks, tables, equations and diagrams.
11 */
13@page {
14 margin: 18mm 16mm;
15}
17@media print {
18 html,
19 body,
20 #root {
21 height: auto;
22 }
24 .topbar,
25 .splitter,
26 .pane:not(.pane-preview),
27 .code-block .copy-button {
28 display: none ;
29 }
31 .app,
32 .panes {
33 display: block;
34 height: auto;
35 min-height: 0;
36 }
38 /* The screen layout scrolls the preview inside a fixed-height pane; for
39 print the pane has to be a plain block of arbitrary height. */
40 .pane-preview {
41 display: block;
42 overflow: visible;
43 flex: none;
44 }
46 .preview {
47 max-width: none;
48 padding: 0;
49 font-size: 11pt;
50 line-height: 1.5;
51 }
53 .preview p,
54 .preview li {
55 orphans: 3;
56 widows: 3;
57 }
59 .preview h1,
60 .preview h2,
61 .preview h3,
62 .preview h4 {
63 break-after: avoid;
64 }
66 /* Long code blocks and tables are allowed to run across a page boundary,
67 the way LaTeX breaks a verbatim block or a longtable; forbidding it just
68 leaves most of a page blank. Individual rows and equations, which no
69 reader wants split, are kept whole. */
70 .preview tr,
71 .preview thead,
72 .preview .katex-display,
73 .preview img,
74 .mermaid-diagram {
75 break-inside: avoid;
76 }
78 /* A table continued on the next page repeats its header row. */
79 .preview thead {
80 display: table-header-group;
81 }
83 /* On screen these scroll sideways; on paper there is nowhere to scroll, so
84 let the content wrap or shrink to the page width instead of being cut. */
85 .preview pre {
86 white-space: pre-wrap;
87 word-break: break-word;
88 overflow-x: visible;
89 }
91 .preview .katex-display,
92 .mermaid-diagram {
93 overflow: visible;
94 }
96 .preview table {
97 display: table;
98 width: 100%;
99 overflow-x: visible;
100 }
102 .preview img,
103 .mermaid-diagram svg {
104 max-width: 100%;
105 height: auto;
106 }
108 /* Code and table shading is part of how the document reads, so ask for it
109 even when the print dialog has background graphics switched off. */
110 .preview pre,
111 .preview :not(pre) > code,
112 .preview th,
113 .preview tr:nth-child(2n) {
114 print-color-adjust: exact;
115 -webkit-print-color-adjust: exact;
116 }
118 .preview a {
119 color: inherit;
120 text-decoration: underline;
121 }
122}