implement some basic print styles (#575)

Author: michaelficarra

css/print.css

@@ -1,3 +1,28 @@
-#menu-toggle {
-  display: none;
+#toc {
+  page-break-before: always;
+  page-break-after: always;
+}
+
+body {
+  font-family: Arial;
+  font-size: 10pt;
+  color: #000;
+}
+
+.title {
+  font-family: Verdana;
+}
+
+p {
+  text-align: justify;
+}
+
+#spec-container {
+  max-width: none;
+}
+
+#spec-container > emu-clause,
+#spec-container > emu-intro,
+#spec-container > emu-annex {
+  page-break-before: always;
 }

src/Toc.ts

@@ -15,6 +15,7 @@ export default class Toc {
 
     const html = Toc.build(this.spec);
     const tocContainer = this.spec.doc.createElement('div');
+    tocContainer.setAttribute('id', 'toc');
     tocContainer.innerHTML = '<h2>Table of Contents</h2>' + html;
     const intro = this.spec.doc.querySelector('emu-intro, emu-clause, emu-annex');
     if (intro && intro.parentNode) {

test/baselines/generated-reference/clauses.html

@@ -8,7 +8,7 @@
   <li><span>Toggle pinning of the current clause</span><code>p</code></li>
   <li><span>Jump to <i>n</i>th pin</span><code>1-9</code></li>
 </ul></div><div id="spec-container">
-<div><h2>Table of Contents</h2><ol class="toc"><li><a href="#sec-intro" title="Intro">Intro</a><ol class="toc"><li><a href="#sec-intro2" title="Sub Intro">Sub Intro</a></li></ol></li><li><a href="#sec-clause" title="Clause Foo(a, b)"><span class="secnum">1</span> Clause Foo(<var>a</var>, <var>b</var>)</a><ol class="toc"><li><a href="#Foo" title="Sub Clause"><span class="secnum">1.1</span> Sub Clause</a></li></ol></li><li><a href="#sec-number" title="Explicit number"><span class="secnum">7</span> Explicit number</a><ol class="toc"><li><a href="#sec-number1" title="Automatic number inside explicit number"><span class="secnum">7.1</span> Automatic number inside explicit number</a></li><li><a href="#sec-number2" title="Nested explicit number"><span class="secnum">7.4</span> Nested explicit number</a></li><li><a href="#sec-number3" title="Automatic number after explicit number"><span class="secnum">7.5</span> Automatic number after explicit number</a></li><li><a href="#sec-number-nested" title="Multi-step explicit numbers"><span class="secnum">7.6</span> Multi-step explicit numbers</a><ol class="toc"><li><a href="#sec-number-multi-step" title="Multi-step explicit numbers"><span class="secnum">7.6.1.1</span> Multi-step explicit numbers</a></li><li><a href="#sec-number-multi-step-1" title="Automatic number after explicit number"><span class="secnum">7.6.1.2</span> Automatic number after explicit number</a><ol class="toc"><li><a href="#sec-number-multi-step-inner" title="Nested clause after explicit multi-step number"><span class="secnum">7.6.1.2.1</span> Nested clause after explicit multi-step number</a></li></ol></li><li><a href="#sec-number-multi-step-2" title="Increasing multi-step explicit numbers"><span class="secnum">7.6.2.1</span> Increasing multi-step explicit numbers</a></li></ol></li></ol></li><li><a href="#sec-annex" title="Annex"><span class="secnum">A</span> Annex</a><ol class="toc"><li><a href="#sec-annex2" title="Sub-annex"><span class="secnum">A.1</span> Sub-annex</a></li></ol></li></ol></div><emu-intro id="sec-intro">
+<div id="toc"><h2>Table of Contents</h2><ol class="toc"><li><a href="#sec-intro" title="Intro">Intro</a><ol class="toc"><li><a href="#sec-intro2" title="Sub Intro">Sub Intro</a></li></ol></li><li><a href="#sec-clause" title="Clause Foo(a, b)"><span class="secnum">1</span> Clause Foo(<var>a</var>, <var>b</var>)</a><ol class="toc"><li><a href="#Foo" title="Sub Clause"><span class="secnum">1.1</span> Sub Clause</a></li></ol></li><li><a href="#sec-number" title="Explicit number"><span class="secnum">7</span> Explicit number</a><ol class="toc"><li><a href="#sec-number1" title="Automatic number inside explicit number"><span class="secnum">7.1</span> Automatic number inside explicit number</a></li><li><a href="#sec-number2" title="Nested explicit number"><span class="secnum">7.4</span> Nested explicit number</a></li><li><a href="#sec-number3" title="Automatic number after explicit number"><span class="secnum">7.5</span> Automatic number after explicit number</a></li><li><a href="#sec-number-nested" title="Multi-step explicit numbers"><span class="secnum">7.6</span> Multi-step explicit numbers</a><ol class="toc"><li><a href="#sec-number-multi-step" title="Multi-step explicit numbers"><span class="secnum">7.6.1.1</span> Multi-step explicit numbers</a></li><li><a href="#sec-number-multi-step-1" title="Automatic number after explicit number"><span class="secnum">7.6.1.2</span> Automatic number after explicit number</a><ol class="toc"><li><a href="#sec-number-multi-step-inner" title="Nested clause after explicit multi-step number"><span class="secnum">7.6.1.2.1</span> Nested clause after explicit multi-step number</a></li></ol></li><li><a href="#sec-number-multi-step-2" title="Increasing multi-step explicit numbers"><span class="secnum">7.6.2.1</span> Increasing multi-step explicit numbers</a></li></ol></li></ol></li><li><a href="#sec-annex" title="Annex"><span class="secnum">A</span> Annex</a><ol class="toc"><li><a href="#sec-annex2" title="Sub-annex"><span class="secnum">A.1</span> Sub-annex</a></li></ol></li></ol></div><emu-intro id="sec-intro">
   <h1>Intro</h1>
   <emu-intro id="sec-intro2">
     <h1>Sub Intro</h1>