inline the print css

Author: bakkot

PUBLISHING.md

@@ -9,12 +9,12 @@ version: 15th Edition
 date: 2024-06-25
 ```
 
-Use the package script `build-for-pdf`. Importantly, you want to make sure your image directory and print.css file wind up in the same output directory as your markup, i.e.  your `ecmarkup` command should include the options `--assets external`, `--assets-dir out`, and `--old-toc`.
+Use the package script `build-for-pdf`. Importantly, you want to make sure your image directory files wind up in the same output directory as your markup. Your `ecmarkup` command should include the options `--assets external`, `--assets-dir out`, and `--printable`.
 
 Then, run `prince` to generate your PDF.
 
 ```shell
 prince --script ./node_modules/ecmarkup/js/print.js out/index.html -o path/to/output.pdf
 ```
 
-Spend 5-10 minutes double-checking the PDF for egregious layout issues. That means quickly skimming all 800+ pages looking for whitespace or content split in a confusing manner. Tinker with `print.css` only as needed. Compare cover & table of contents to previous years.
+Spend 5-10 minutes double-checking the PDF for egregious layout issues. That means quickly skimming all 800+ pages looking for whitespace or content split in a confusing manner. Tinker with print-only styles only as needed. Compare cover & table of contents to previous years.

package.json

@@ -9,7 +9,7 @@
     "prebuild-only": "npm run clean && mkdir out && cp -R img out",
     "build-only": "ecmarkup --verbose spec.html --multipage out",
     "build": "npm run build-head",
-    "build-for-pdf": "npm run prebuild-only && cp print.css out && ecmarkup --verbose spec.html out/index.html --assets external --assets-dir out --old-toc --lint-spec --strict",
+    "build-for-pdf": "npm run prebuild-only && ecmarkup --verbose spec.html out/index.html --assets external --assets-dir out --old-toc --lint-spec --strict",
     "pdf": "npm run build-for-pdf && prince --script ./node_modules/ecmarkup/js/print.js out/index.html -o out/ECMA-262.pdf",
     "prebuild-snapshot": "npm run clean",
     "build-snapshot": "npm run build-head && node scripts/insert_snapshot_warning.js",

print.css

@@ -8,9 +8,150 @@
     width: 100%;
     font-size: 80%;
   }
+
+  #metadata-block {
+    margin: 4em 0;
+    padding: 10px;
+    border: 1px solid #ee8421;
+  }
+  #metadata-block h1 {
+    font-size: 1.5em;
+    margin-top: 0;
+  }
+  #metadata-block > ul {
+    list-style-type: none;
+    margin: 0; padding: 0;
+  }
+
+  #ecma-logo {
+    width: 500px;
+  }
+
+  .corner-cell {
+    position: relative;
+    height: 2lh;
+  }
+  .corner-cell .slash {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(to bottom left, transparent calc(50% - 1px), gray, transparent calc(50% + 1px));
+  }
+  .corner-cell > .column {
+    position: absolute;
+    bottom: 0.4em;
+    left: 1em;
+  }
+  .corner-cell > .row {
+    position: absolute;
+    top: 0.4em;
+    right: 1em;
+  }
 </style>
-<link rel="stylesheet" href="./print.css" media="print">
 <style media="print">
+  /**
+  * ECMA-262-specific hacks. Shouldn't require a ton of maintenance; audit if
+  * visual inspection results in unexpected page breaks.
+  */
+  /* 2.2 Examples of legacy/normative-optional are small enough to be aggressive against breaks */
+  #sec-conformance [example],
+
+  /* 8.3.3 avoid breaking in small alg lists */
+  #sec-static-semantics-containsundefinedcontinuetarget li,
+
+  /* 16.2.1.5.4 many tables */
+  #table-module-graph-cycle-async-fields-1 table,
+  #table-module-graph-cycle-async-fields-9 table {
+    break-inside: avoid-page;
+  }
+
+  /* 12.10.1 long note can break wherever it wants */
+  #sec-rules-of-automatic-semicolon-insertion > emu-note {
+    break-before: initial;
+    break-inside: initial;
+  }
+
+  /* 12.10.2, 12.10.3, 12.10.3.2 Sections start with an <em> not inside a <p> */
+  #sec-examples-of-automatic-semicolon-insertion > em,
+  #sec-interesting-cases-of-automatic-semicolon-insertion > em,
+  #sec-asi-cases-with-no-lineterminator-here > em {
+    display: block;
+    margin-top: 1.25ex;
+  }
+
+  /* 15.1.2 bad spacing between intro and first emu-grammar */
+  #sec-static-semantics-containsexpression > emu-grammar:first-of-type {
+    margin-top: 2ex;
+  }
+
+  /* 15.3 A very long term combined with inline-block, nowrap, and justified text resulting in weird punctuation */
+  #sec-arrow-function-definitions > p > emu-grammar {
+    text-align: left;
+  }
+
+  /* 16.2.1.5.4 squish margins on graphics so table 46 fits on one page */
+  #sec-example-cyclic-module-record-graphs figure:has(> img),
+  #sec-example-cyclic-module-record-graphs figure > img {
+    margin: 0;
+  }
+  #sec-example-cyclic-module-record-graphs figure:has(> img) > figcaption {
+    margin-bottom: 1ex;
+  }
+  #sec-example-cyclic-module-record-graphs emu-figure:has(> figure > img) + p {
+    margin-top: 1ex;
+  }
+
+  /* 16.2.1.5.4 table 51 & 54 are too narrow for caption */
+  #table-module-graph-cycle-async-fields-6 table {
+    width: 110mm;
+  }
+  #table-module-graph-cycle-async-fields-9 table {
+    width: 135mm;
+  }
+
+  /* 20.1.3.7 legacy title */
+  #sec-object\.prototype\.__proto__ > .attributes-tag {
+    break-before: avoid-page;
+    break-after: avoid-page;
+  }
+
+  /* 21.4.1.22 Table 61 middle column is too narrow */
+  #table-time-zone-identifier-record-fields > figure > table th:nth-of-type(2) {
+    width: 15%;
+  }
+
+  /* 21.4.4.41.2 These tables are way too narrow for their captions */
+  #sec-todatestring-day-names table,
+  #sec-todatestring-month-names table {
+    width: 100mm;
+  }
+
+  /* 27.2.6 squeeze to make more room for figure-2.svg */
+  #table-internal-slots-of-promise-instances > figure {
+    margin-bottom: 0;
+  }
+
+  /* 27.3 fit generator objects relationships diagram */
+  #sec-generatorfunction-objects,
+  #sec-generatorfunction-objects h1 {
+    margin-top: 1.5ex;
+  }
+
+  /* 27.3 `figure-2.svg` is just a tiny bit too big to fit on the page, results in weird white space */
+  #figure-2 figure {
+    margin: 1ex 0;
+  }
+  #figure-2 > figure > img {
+    width: 97%;
+  }
+
+  /* 29.11 extremely long note */
+  #sec-shared-memory-guidelines > emu-note {
+    break-inside: auto;
+  }
+
   .unicode-property-table {
     table-layout: initial;
     width: auto;