Markup: PDF generation #600

gesa · 2024-06-13T19:43:58Z

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. Any changes to the primary stylesheet come from inline styles that existed in both ECMA-262 and ECMA-402.

The cover SVGs aren't really used by ecmarkup directly, but are rather to be viewed as source files for the two specifications.

michaelficarra · 2024-06-17T14:38:07Z

css/print.css

+emu-clause emu-clause emu-clause emu-clause emu-clause emu-clause h1, emu-annex emu-annex emu-annex emu-annex emu-annex emu-annex h1 {
+  -prince-bookmark-level: 6;
+}


uwu what's this

a whole lot of cascading

css/print.css

src/Spec.ts

gesa · 2024-07-02T20:56:28Z

See gesa@c6b6b9c#comments for the most important detail of this PR.

michaelficarra · 2024-07-02T21:17:08Z

@gesa Have you tested both with and without --multipage?

gesa · 2024-07-03T07:49:41Z

@michaelficarra I have, I’ve generated web versions of ecma402, ecma262 (multipage), and temporal.

css/elements.css

gesa · 2024-08-15T19:46:15Z

@syg , @michaelficarra : following up to get this merged when y’all have a chance

michaelficarra · 2024-08-15T20:05:36Z

css/elements.css

+#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%;
+}


I thought we were going to move this into ecma262

Wait why? That’s not specific to 262.

The unicode-property-table class only exists on a table in ecma262: https://github.com/tc39/ecma262/blob/815aa8a4d68ce24bec81ba6789c37d55bc87b54a/table-binary-unicode-properties.html#L3. And the metadata-block div is defined in spec.html.

metadata-block does appear in 402. I thought unicode-property-table did too, but I was mistaken. I’ll make that edit.

syg · 2024-08-21T21:40:33Z

js/print.js

+  return insideCover;
+}
+
+function generateEcmaCopyrightPage() {


Why are we generating another copyright page? Don't we already have one in the document?

The document has the original copyright but not the "alternative copyright”. Would extremely love to be proven wrong on this though, it’s quite possible I’m missing something with copyright minutae.

michaelficarra · 2024-08-30T18:33:47Z

js/print.js

+function improveToc() {
+  const tocContainer = document.getElementById('toc');
+  const toc = tocContainer.querySelector('.toc');
+
+  tocContainer.firstChild.textContent = 'Contents';
+  rebuildOl(toc);
+}
+
+/**
+ * Loops through Table of Contents list items and produces markup optimized for
+ * a PDF ToC
+ * */
+function rebuildOl(ol) {
+  Array.from(ol.querySelectorAll(':scope li')).forEach(li => {
+    rebuildLi(li);
+  });
+}
+
+/**
+ * Gathers information about a given toc item
+ * */
+function rebuildLi(li) {
+  const sublevel = li.querySelector('ol');
+
+  if (sublevel) {
+    rebuildOl(sublevel);
+  }
+
+  const anchor = li.firstChild;
+  const clauseID = anchor.getAttribute('href').slice(1);
+
+  if (li.querySelector('.secnum') === null) {
+    return;
+  }
+
+  const clauseNumber = anchor.firstChild.innerHTML;
+  const clauseTitle = anchor.getAttribute('title');
+
+  li.insertBefore(renderTocLink(clauseID, clauseNumber, clauseTitle), anchor);
+  li.removeChild(anchor);
+}
+
+/**
+ * Generates link elements for table of contents items
+ * */
+function renderTocLink(clauseID, clauseNumber, clauseTitle) {
+  const nonAnnexSections = [
+    'sec-copyright-and-software-license',
+    'sec-colophon',
+    'sec-bibliography',
+  ];
+  const link = document.createElement('a');
+  link.setAttribute('href', '#' + clauseID);
+  link.setAttribute('title', clauseTitle);
+
+  if (nonAnnexSections.includes(clauseID)) {
+    link.innerHTML = '<span class="secnum">' + clauseTitle + '</span>';
+
+    return link;
+  }
+
+  if (/^[A-Z]$/.test(clauseNumber)) {
+    const annexType = document.getElementById(clauseID).hasAttribute('normative')
+      ? 'normative'
+      : 'informative';
+    link.innerHTML =
+      '<span class="secnum">Annex ' +
+      clauseNumber +
+      ' <span class="unbold">(' +
+      annexType +
+      ')</span></span> ' +
+      clauseTitle;
+
+    return link;
+  }
+
+  if (/^[A-Z]\./.test(clauseNumber)) {
+    link.innerHTML = '<span class="secnum">Annex ' + clauseNumber + '</span> ' + clauseTitle;
+    return link;
+  }
+
+  link.innerHTML = '<span class="secnum">' + clauseNumber + '</span> ' + clauseTitle;
+  return link;
+}


I'm pretty sure we could've done all of this with print styles and an :after selector.

Which part? This function exists to gather information on sections that the links themselves don’t have (and CSS wouldn’t have access to, I don’t think?)

michaelficarra · 2024-08-30T18:49:13Z

js/print.js

+/**
+ * The emu-imports element interferes with a ton of css specificity so we just
+ * take everything out and plop it directly into the DOM
+ * */
+function removeEmuImports() {
+  const emuImports = Array.from(specContainer.getElementsByTagName('emu-import'));
+
+  emuImports.forEach(importedMarkup => {
+    while (importedMarkup.hasChildNodes()) {
+      importedMarkup.parentNode.insertBefore(importedMarkup.childNodes[0], importedMarkup);
+    }
+    importedMarkup.parentNode.removeChild(importedMarkup);
+  });
+}


I think it'd be fine to just not emit these in the first place.

I’d prefer to either leave that in your capable hands, or tackle this myself in a separate PR. Most importantly, after all the time, effort, and ecma money I dumped into producing a quality document, I want to merge what worked.

michaelficarra · 2024-08-30T18:49:56Z

js/print.js

+/**
+ * Gets rid of elements we don't need in the print version
+ * */
+function removeUnusedSections() {
+  const ecmaLogo = document.getElementById('ecma-logo');
+
+  if (ecmaLogo) specContainer.removeChild(ecmaLogo.parentNode);
+
+  document.getElementsByTagName('body')[0].removeChild(document.getElementById('shortcuts-help'));
+}


Surely this can be done with print CSS.

of course it can. getting the scripts to output what i need is a finicky thing though and I try to feed it the simplest, cleanest markup i can.

michaelficarra · 2024-08-30T18:51:50Z

js/print.js

+/**
+ * A little content rearranging specifically relevant to 262
+ * */
+function ecma262fixes() {
+  const toc = document.getElementById('toc');
+
+  // eslint-disable-next-line prettier/prettier
+  specContainer.insertBefore(document.getElementById('sec-bibliography'), document.getElementById('sec-colophon'));
+  Array.from(toc.getElementsByTagName('a')).forEach(anchor => {
+    if (anchor.getAttribute('href') === '#sec-colophon') {
+      toc.getElementsByTagName('ol')[0].appendChild(anchor.parentNode);
+    }
+  });
+}


I think it'd be fine to just rearrange these in the 262 spec document directly.

I’d like very much to address that in a separate PR as well.

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

michaelficarra · 2024-11-08T23:40:50Z

src/H1.ts

+      // const frag = spec.doc.createElement('div');
+      // frag.innerHTML = parent.getSecnumHTML() + node.innerHTML;
+      // node.prepend(...frag.children);
+      // node.innerHTML = ;
+      // const numElem = spec.doc.createElement('span');
+      // numElem.setAttribute('class', 'secnum');
+      // numElem.textContent = parent.number;
+      // node.insertBefore(spec.doc.createTextNode(' '), node.firstChild);
+      // node.insertBefore(numElem, node.firstChild);


dead comments

Suggested change

// const frag = spec.doc.createElement('div');

// frag.innerHTML = parent.getSecnumHTML() + node.innerHTML;

// node.prepend(...frag.children);

// node.innerHTML = ;

// const numElem = spec.doc.createElement('span');

// numElem.setAttribute('class', 'secnum');

// numElem.textContent = parent.number;

// node.insertBefore(spec.doc.createTextNode(' '), node.firstChild);

// node.insertBefore(numElem, node.firstChild);

michaelficarra · 2024-11-08T23:49:46Z

css/print.css

+.full-page-svg {
+  color: rgba(255, 255, 255, 0);
 }


@gesa Kevin and I couldn't figure out what this class is used for. Why have transparent white text on the front cover and inner cover? And what's with the class name?

This was referenced Jun 13, 2024

Markup: fixes discovered producing PDF standard tc39/ecma402#898

Draft

Markup: New & better graphics, remove spec css element tc39/ecma262#3352

Draft

gesa force-pushed the pdf-gen-fixes branch 2 times, most recently from 03215d3 to 0cf9b9a Compare June 14, 2024 01:22

michaelficarra reviewed Jun 17, 2024

View reviewed changes

css/print.css Outdated Show resolved Hide resolved

michaelficarra reviewed Jun 17, 2024

View reviewed changes

css/print.css Outdated Show resolved Hide resolved

michaelficarra reviewed Jun 17, 2024

View reviewed changes

css/print.css Outdated Show resolved Hide resolved

michaelficarra reviewed Jun 17, 2024

View reviewed changes

src/Spec.ts Outdated Show resolved Hide resolved

gesa force-pushed the pdf-gen-fixes branch from 0cf9b9a to 31e7d4b Compare July 2, 2024 20:39

gesa force-pushed the pdf-gen-fixes branch from aadafaa to ca59353 Compare July 2, 2024 20:57

gesa marked this pull request as ready for review July 2, 2024 20:57

gesa force-pushed the pdf-gen-fixes branch 2 times, most recently from eca8422 to 6f8014b Compare July 3, 2024 17:50

michaelficarra reviewed Jul 3, 2024

View reviewed changes

css/elements.css Outdated Show resolved Hide resolved

michaelficarra reviewed Aug 15, 2024

View reviewed changes

syg reviewed Aug 21, 2024

View reviewed changes

michaelficarra reviewed Aug 30, 2024

View reviewed changes

gesa and others added 5 commits October 30, 2024 19:49

Move css & images into css & img directories

bafbf5b

rebaseline

3029141

Update css/elements.css

c2f0042

Update baselines from colspan specificty improvement

8896890

move unicode property table to 262

bcb8986

gesa force-pushed the pdf-gen-fixes branch from 68f8db7 to bcb8986 Compare October 31, 2024 02:49

gesa requested review from michaelficarra and syg October 31, 2024 02:49

bakkot added 14 commits November 5, 2024 13:18

emu-imports are now removed during build

5a0e577

generate old toc with correct style for printing

bc8f0c2

ecma262 is reordering colophon to end already

37e4f43

breaking: rename old-toc to printable

b3e5b4a

rectify annex headers

5ae6afc

remove ecma262 logo during printable build

7f8d0c8

rebaseline and fix oldToc baseline

1bd7f5d

only annotate external links in printable builds

08c58b2

set data-year on version during build

57c5e51

allow metadata title/version to contain HTML

e084be2

generate shortname in its preferred form to begin with

a4ca63d

run formatter

79aa797

generate covers during build

aaaee72

move copyright/metadata

e2bec7a

michaelficarra reviewed Nov 8, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Markup: PDF generation #600

Markup: PDF generation #600

gesa commented Jun 13, 2024

michaelficarra Jun 17, 2024

syg Jun 21, 2024

gesa Jun 26, 2024

gesa commented Jul 2, 2024

michaelficarra commented Jul 2, 2024 •

edited

Loading

gesa commented Jul 3, 2024

gesa commented Aug 15, 2024

michaelficarra Aug 15, 2024

gesa Aug 18, 2024

michaelficarra Aug 30, 2024 •

edited

Loading

gesa Sep 10, 2024

syg Aug 21, 2024

gesa Sep 10, 2024

michaelficarra Aug 30, 2024

gesa Sep 10, 2024

michaelficarra Aug 30, 2024

gesa Sep 10, 2024

michaelficarra Aug 30, 2024

gesa Sep 10, 2024

michaelficarra Aug 30, 2024

gesa Sep 10, 2024

michaelficarra Nov 8, 2024 •

edited

Loading

michaelficarra Nov 8, 2024

Markup: PDF generation #600

Are you sure you want to change the base?

Markup: PDF generation #600

Conversation

gesa commented Jun 13, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gesa commented Jul 2, 2024

michaelficarra commented Jul 2, 2024 • edited Loading

gesa commented Jul 3, 2024

gesa commented Aug 15, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

michaelficarra Aug 30, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

michaelficarra Nov 8, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

michaelficarra commented Jul 2, 2024 •

edited

Loading

michaelficarra Aug 30, 2024 •

edited

Loading

michaelficarra Nov 8, 2024 •

edited

Loading