Printable cover edits

Responding to feedback from PC.
- Add ®
- Add footer
- Generate back cover
- Capitalise "Page"

Also
- Remove unused class
- Re-generate front cover from original brand refresh in 2003

Author: gesa

css/print.css

@@ -135,55 +135,40 @@
   }
 }
 
-@page :first, :nth(2) {
-  margin: 0;
-
-  @top-left {
-    content: none;
-  }
-
-  @top-right {
-    content: none;
-  }
-
-  @bottom-left {
-    content: none;
-  }
-
-  @bottom-right {
-    content: none;
-  }
-}
-
 @page toc, copyright, intro {
   --page-number-style: lower-roman;
 }
 
-@page :blank {
-  @bottom-left {
-    content: none;
-  }
+@page front-cover {
+  background-image: url('../img/print-front-cover.svg');
+  margin: 0;
 
   @bottom-right {
     content: none;
   }
 }
 
-@page front-cover {
-  background-image: url('../img/print-front-cover.svg');
-}
-
 @page inside-cover {
   background-image: url('../img/print-inside-cover.svg');
 }
 
 @page front-cover, inside-cover {
   background-color: transparent;
-  background-position: center;
+  background-position: top center;
   background-repeat: no-repeat;
-  margin: 0;
-  padding: 0;
   page-break-after: always;
+
+  @top-left {
+    content: none;
+  }
+
+  @top-right {
+    content: none;
+  }
+
+  @bottom-left {
+    content: none;
+  }
 }
 
 html, body {
@@ -495,7 +480,7 @@ emu-figure img {
 }
 
 #toc > h2::after {
-  content: 'page';
+  content: 'Page';
   float: right;
   font-size: 10pt;
   text-align: right;
@@ -559,11 +544,12 @@ a[data-print-href]::after {
   width: auto;
 }
 
-emu-annex > h1 {
+#spec-container > emu-annex > h1 {
+  font-size: 14pt;
   text-align: center;
 }
 
-emu-annex > h1 span {
+#spec-container > emu-annex > h1 span {
   display: block;
 }
 
@@ -588,7 +574,6 @@ emu-annex > h1 .secnum {
   page: front-cover;
   position: relative;
   width: 210mm;
-  height: 297mm;
 }
 
 #front-cover h1 {
@@ -642,6 +627,16 @@ h1.version {
   page: inside-cover;
 }
 
+#back-cover {
+  float: bottom;
+  page: back-cover;
+}
+
+#back-cover hr {
+  border-width: 0.25pt;
+  margin: 0.75pt auto;
+}
+
 #toc {
   page: toc;
   counter-reset: page 1;

img/print-front-cover.svg

@@ -619,7 +619,6 @@ export default class Spec {
       // front cover
       const frontCover = document.createElement('div');
 
-      frontCover.classList.add('full-page-svg');
       frontCover.setAttribute('id', 'front-cover');
 
       const versionNode = this.doc.querySelector('h1.version');
@@ -634,10 +633,20 @@ export default class Spec {
       // inside cover
       const insideCover = document.createElement('div');
 
-      insideCover.classList.add('full-page-svg');
       insideCover.setAttribute('id', 'inside-cover');
 
       frontCover.after(insideCover);
+
+      // back cover
+      const backCover = document.createElement('div');
+
+      backCover.setAttribute('id', 'back-cover');
+      backCover.append(
+        document.createElement('hr'),
+        document.createElement('hr'),
+        document.createElement('hr'),
+      );
+      wrapper.after(backCover);
     }
 
     let commonEles: HTMLElement[] = [];

img/print-inside-cover.svg

@@ -3387,55 +3387,40 @@
   }
 }
 
-@page :first, :nth(2) {
-  margin: 0;
-
-  @top-left {
-    content: none;
-  }
-
-  @top-right {
-    content: none;
-  }
-
-  @bottom-left {
-    content: none;
-  }
-
-  @bottom-right {
-    content: none;
-  }
-}
-
 @page toc, copyright, intro {
   --page-number-style: lower-roman;
 }
 
-@page :blank {
-  @bottom-left {
-    content: none;
-  }
+@page front-cover {
+  background-image: url('../img/print-front-cover.svg');
+  margin: 0;
 
   @bottom-right {
     content: none;
   }
 }
 
-@page front-cover {
-  background-image: url('../img/print-front-cover.svg');
-}
-
 @page inside-cover {
   background-image: url('../img/print-inside-cover.svg');
 }
 
 @page front-cover, inside-cover {
   background-color: transparent;
-  background-position: center;
+  background-position: top center;
   background-repeat: no-repeat;
-  margin: 0;
-  padding: 0;
   page-break-after: always;
+
+  @top-left {
+    content: none;
+  }
+
+  @top-right {
+    content: none;
+  }
+
+  @bottom-left {
+    content: none;
+  }
 }
 
 html, body {
@@ -3747,7 +3732,7 @@
 }
 
 #toc > h2::after {
-  content: 'page';
+  content: 'Page';
   float: right;
   font-size: 10pt;
   text-align: right;
@@ -3811,11 +3796,12 @@
   width: auto;
 }
 
-emu-annex > h1 {
+#spec-container > emu-annex > h1 {
+  font-size: 14pt;
   text-align: center;
 }
 
-emu-annex > h1 span {
+#spec-container > emu-annex > h1 span {
   display: block;
 }
 
@@ -3840,7 +3826,6 @@
   page: front-cover;
   position: relative;
   width: 210mm;
-  height: 297mm;
 }
 
 #front-cover h1 {
@@ -3894,6 +3879,16 @@
   page: inside-cover;
 }
 
+#back-cover {
+  float: bottom;
+  page: back-cover;
+}
+
+#back-cover hr {
+  border-width: 0.25pt;
+  margin: 0.75pt auto;
+}
+
 #toc {
   page: toc;
   counter-reset: page 1;

src/Spec.ts

@@ -1,5 +1,5 @@
 <!doctype html>
-<head><meta name="viewport" content="width=device-width, initial-scale=1"><meta charset="utf-8"><title>Test Doc</title></head><body class=" oldtoc"><div class="full-page-svg" id="front-cover"><h1 class="title">Test Doc</h1></div><div class="full-page-svg" id="inside-cover"></div><div id="spec-container">
+<head><meta name="viewport" content="width=device-width, initial-scale=1"><meta charset="utf-8"><title>Test Doc</title></head><body class=" oldtoc"><div id="front-cover"><h1 class="title">Test Doc</h1></div><div id="inside-cover"></div><div id="spec-container">
 <div id="toc"><h2>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></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">Annex A <span class="annex-kind">(informative)</span></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">
@@ -59,4 +59,4 @@ <h1><span class="secnum">A.1</span> Sub-annex</h1>
 
   </emu-annex>
 </emu-annex>
-</div></body>
+</div><div id="back-cover"><hr><hr><hr></div></body>