Markup: PDF generation

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
tc39 · Jul 3, 2024 · 55a14b5 · 55a14b5
1 parent 1a619b2
commit 55a14b5
Show file tree

Hide file tree

Showing 9 changed files with 1,656 additions and 311 deletions.
diff --git a/PUBLISHING.md b/PUBLISHING.md
@@ -0,0 +1,28 @@
+# 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: 15th Edition
+date: 2024-06-25
+```
+
+To generate markup for use in PDF conversion, make sure to include the options `--assets`, `--assets-dir`, and `--old-toc`. 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 &&
+mv images out &&
+mv print.css out &&
+ecmarkup --assets external --assets-dir out --old-toc 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.
diff --git a/css/elements.css b/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;
 }
@@ -158,7 +160,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;
@@ -183,8 +185,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;
 }
@@ -251,7 +253,7 @@ var.referenced6 {
 
 emu-const {
   font-family:
-    IBM Plex Sans,
+    'IBM Plex Sans',
     sans-serif;
   font-variant: small-caps;
   text-transform: uppercase;
@@ -453,7 +455,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;
@@ -490,7 +492,7 @@ emu-params,
 emu-opt {
   margin-right: 1ex;
   font-family:
-    IBM Plex Mono,
+    'IBM Plex Mono',
     monospace;
 }
 
@@ -506,7 +508,7 @@ emu-opt {
 emu-gprose {
   font-size: 0.9em;
   font-family:
-    IBM Plex Sans,
+    'IBM Plex Sans',
     sans-serif;
 }
 
@@ -775,6 +777,10 @@ emu-table td {
   background: #fff;
 }
 
+th[colspan], td[colspan] {
+  text-align: center;
+}
+
 /* Note: the left content edges of table.lightweight-table >tbody >tr >td
    and div.display line up. */
 table.lightweight-table {
@@ -920,7 +926,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;
@@ -945,7 +951,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;
@@ -955,7 +961,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;
 }
@@ -969,7 +975,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;
@@ -1147,7 +1153,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;
@@ -1156,7 +1162,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;
@@ -1166,7 +1172,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;
@@ -1176,7 +1182,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;
@@ -1206,10 +1212,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;
@@ -1296,8 +1302,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;
@@ -1308,13 +1314,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;
@@ -1353,7 +1359,7 @@ li.menu-search-result-term:before {
   display: flex;
 }
 
-#references-pane-close:after {
+#references-pane-close::after {
   content: '\2716';
   float: right;
   cursor: pointer;
@@ -1368,10 +1374,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;
 }
@@ -1425,3 +1439,28 @@ li.menu-search-result-term:before {
   background-color: #eee;
   box-shadow: inset 0 -1px 0 #ccc;
 }
+
+#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;
+}
+
+.unicode-property-table {
+  table-layout: fixed;
+  width: 100%;
+  font-size: 80%;
+}