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.

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

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.

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 from ca59353 to eca8422 Compare July 3, 2024 17:48

gesa added 2 commits July 3, 2024 10:50

Move css & images into css & img directories

6f8014b

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

rebaseline

0d0e817

michaelficarra reviewed Jul 3, 2024

View reviewed changes

css/elements.css Outdated Show resolved Hide resolved

michaelficarra and others added 2 commits July 10, 2024 15:34

Update css/elements.css

96b87d8

Update baselines from colspan specificty improvement

7a101bf

michaelficarra reviewed Aug 15, 2024

View reviewed changes

syg reviewed Aug 21, 2024

View reviewed changes

michaelficarra reviewed Aug 30, 2024

View reviewed changes

move unicode property table to 262

68f8db7

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

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 commented Jul 2, 2024 •

edited

Loading

michaelficarra Aug 30, 2024 •

edited

Loading