Markup: PDF generation (#600)

Tried to keep the css together but it doesn't feel super logically grouped so I wound up rearranging everything. Sorry future git-blamer. Units of measurements are all over the place, here's what defines them:

- mm for page-related units
- pt for text-related units
- em for horizontal units
- ex for vertical units

Highly specific rules come from a loyalty to the Ecma specification template first, previous years' standards second. There should be no changes that impact screen rendering; changes to the primary stylesheet come from inline styles that existed in both ECMA-262 and ECMA-402.

- Remove print css from Spec file
- Remove styles from inline assets test
- Add publishing instructions
- Small tweaks to allow ecmarkup to generate print-friendly PDFs beyond just 262 & 402
- Use font-face to make sure all the characters are rendered as we wish, including 0 with slash, double-stroke F, and infinity
- Dynamically generate PDF covers based on frontmatter (TODO: Ecma-endorsed proposal cover?)
- Make sure year is being properly inserted into footers

Author: gesa

PUBLISHING.md

@@ -0,0 +1,27 @@
+# Generating a PDF from ecmarkup
+
+In order to produce a PDF, the front matter `title`, `shortname`, `version`, and `date` are **mandatory**. If generating a final annual edition, date should reflect the date of the Ecma GA which will ratify the Standard. For example:
+
+```
+title: ECMAScript® 2024 Language Specification
+shortname: ECMA-262
+version: 15<sup>th</sup> Edition
+date: 2024-06-25
+```
+
+To generate markup for use in PDF conversion, make sure to include the options `--assets`, `--assets-dir`, and `--printable`. If you have images and styles to include, make sure to move them into your assets directory before running `ecmarkup`. For example:
+
+```shell
+mkdir -p out &&
+cp -R images out &&
+ecmarkup --assets external --assets-dir out --printable spec.html out/index.html
+```
+
+Then, from your spec's working directory, run [`prince`](https://www.princexml.com/) to generate your PDF.
+
+```shell
+cd path/to/spec
+prince --script ./node_modules/ecmarkup/js/print.js out/index.html -o path/to/output.pdf
+```
+
+This has been extensively tested with Prince 15. Earlier and later editions not guaranteed.

css/elements.css

@@ -100,7 +100,7 @@ body {
   font-size: 18px;
   line-height: 1.5;
   font-family:
-    IBM Plex Serif,
+    'IBM Plex Serif',
     serif;
   font-variant-numeric: slashed-zero;
   padding: 0;
@@ -119,6 +119,8 @@ body {
   padding-bottom: 1em;
 }
 
+h1.shortname { display: none; }
+
 body.oldtoc {
   margin: 0 auto;
 }
@@ -159,7 +161,7 @@ span.e-user-code::before {
   vertical-align: middle;
   text-transform: uppercase;
   font-family:
-    IBM Plex Sans,
+    'IBM Plex Sans',
     sans-serif;
   font-weight: 900;
   font-size: x-small;
@@ -184,8 +186,8 @@ span.e-user-code::before {
 code {
   font-weight: bold;
   font-family:
-    Comic Code,
-    IBM Plex Mono,
+    'Comic Code',
+    'IBM Plex Mono',
     monospace;
   white-space: pre;
 }
@@ -256,7 +258,7 @@ var.referenced6 {
 
 emu-const {
   font-family:
-    IBM Plex Sans,
+    'IBM Plex Sans',
     sans-serif;
   font-variant: small-caps;
   text-transform: uppercase;
@@ -458,7 +460,7 @@ emu-rhs emu-nt {
 emu-t {
   display: inline-block;
   font-family:
-    IBM Plex Mono,
+    'IBM Plex Mono',
     monospace;
   font-weight: bold;
   white-space: nowrap;
@@ -495,7 +497,7 @@ emu-params,
 emu-opt {
   margin-right: 1ex;
   font-family:
-    IBM Plex Mono,
+    'IBM Plex Mono',
     monospace;
 }
 
@@ -511,7 +513,7 @@ emu-opt {
 emu-gprose {
   font-size: 0.9em;
   font-family:
-    IBM Plex Sans,
+    'IBM Plex Sans',
     sans-serif;
 }
 
@@ -780,6 +782,10 @@ emu-table td {
   background: #fff;
 }
 
+td[colspan]:not([colspan="1"]), th[colspan]:not([colspan="1"]) {
+  text-align: center;
+}
+
 /* Note: the left content edges of table.lightweight-table >tbody >tr >td
    and div.display line up. */
 table.lightweight-table {
@@ -925,7 +931,7 @@ tr.del > td {
   height: 18px;
   font-size: 12px;
   margin: 0 5px 0 10px;
-  font-family: IBM Plex Sans;
+  font-family: 'IBM Plex Sans', sans-serif;
 }
 #menu-pins .unpin-all:hover {
   background: #ddd;
@@ -950,7 +956,7 @@ tr.del > td {
   align-self: center;
 }
 
-#menu-pins-list > li:before,
+#menu-pins-list > li::before,
 #menu-pins-list > li > .unpin {
   flex-shrink: 0;
   flex-grow: 0;
@@ -960,7 +966,7 @@ tr.del > td {
   background: none;
   border: none;
 }
-#menu-pins-list > li:before,
+#menu-pins-list > li::before,
 #menu-pins-list > li > .unpin:hover {
   background: #ccc;
 }
@@ -974,7 +980,7 @@ tr.del > td {
   color: #bb1212;
 }
 
-#menu-pins-list > li:before {
+#menu-pins-list > li::before {
   content: counter(pins-counter);
   counter-increment: pins-counter;
   font-size: 16px;
@@ -1152,7 +1158,7 @@ a.menu-pane-header-production {
   overflow-y: auto;
 }
 
-li.menu-search-result-clause:before {
+li.menu-search-result-clause::before {
   content: 'clause';
   width: 40px;
   display: inline-block;
@@ -1161,7 +1167,7 @@ li.menu-search-result-clause:before {
   color: #666;
   font-size: 75%;
 }
-li.menu-search-result-op:before {
+li.menu-search-result-op::before {
   content: 'op';
   width: 40px;
   display: inline-block;
@@ -1171,7 +1177,7 @@ li.menu-search-result-op:before {
   font-size: 75%;
 }
 
-li.menu-search-result-prod:before {
+li.menu-search-result-prod::before {
   content: 'prod';
   width: 40px;
   display: inline-block;
@@ -1181,7 +1187,7 @@ li.menu-search-result-prod:before {
   font-size: 75%;
 }
 
-li.menu-search-result-term:before {
+li.menu-search-result-term::before {
   content: 'term';
   width: 40px;
   display: inline-block;
@@ -1211,10 +1217,10 @@ li.menu-search-result-term:before {
   white-space: nowrap;
 }
 
-#menu-trace-list li .secnum:after {
+#menu-trace-list li .secnum::after {
   content: ' ';
 }
-#menu-trace-list li:before {
+#menu-trace-list li::before {
   content: counter(item) ' ';
   background-color: #222;
   counter-increment: item;
@@ -1301,8 +1307,8 @@ li.menu-search-result-term:before {
   text-decoration: underline;
 }
 
-.toolbox:after,
-.toolbox:before {
+.toolbox::after,
+.toolbox::before {
   top: 100%;
   left: 15px;
   border: solid transparent;
@@ -1313,13 +1319,13 @@ li.menu-search-result-term:before {
   pointer-events: none;
 }
 
-.toolbox:after {
+.toolbox::after {
   border-color: rgba(0, 0, 0, 0);
   border-top-color: #ddd;
   border-width: 10px;
   margin-left: -10px;
 }
-.toolbox:before {
+.toolbox::before {
   border-color: rgba(204, 204, 204, 0);
   border-top-color: #aaa;
   border-width: 12px;
@@ -1358,7 +1364,7 @@ li.menu-search-result-term:before {
   display: flex;
 }
 
-#references-pane-close:after {
+#references-pane-close::after {
   content: '\2716';
   float: right;
   cursor: pointer;
@@ -1373,10 +1379,18 @@ li.menu-search-result-term:before {
   padding-right: 5px;
 }
 
+emu-normative-optional::before {
+  display: block;
+  color: #884400;
+  content: "NORMATIVE OPTIONAL";
+}
+
+emu-normative-optional,
 [normative-optional],
 [deprecated],
 [legacy] {
   border-left: 5px solid #ff6600;
+  display: block;
   padding: 0.5em;
   background: #ffeedd;
 }