Table and Figure caption styles

css/print.css

@@ -269,7 +269,7 @@ emu-table td,
 pre,
 h1,
 emu-production,
-emu-figure:has(> figure > img) figure,
+emu-figure,
 #metadata-block {
   break-inside: avoid;
   border: unset;
@@ -476,7 +476,7 @@ table > figcaption {
   caption-side: top;
   color: #000;
   font-weight: bold;
-  margin-bottom: 1rem;
+  margin-bottom: 0.5lh;
   text-align: center;
 }
 
@@ -489,6 +489,15 @@ table:not(:has(tr:nth-of-type(5))) {
   break-inside: avoid-page;
 }
 
+table tr:first-of-type,
+table tr:nth-of-type(2) {
+  break-after: avoid;
+}
+
+table tr:last-of-type {
+  break-before: avoid;
+}
+
 /* This inheritance looks weird—it's due to how Prince manages continuity in tables across pages */
 table > figcaption {
   display: table-caption;
@@ -523,6 +532,16 @@ emu-figure img {
   height: auto;
 }
 
+figure figcaption {
+  color: var(--black);
+  text-align: center;
+}
+
+emu-figure figcaption,
+emu-table figcaption {
+  margin-bottom: 0.5lh;
+}
+
 .attributes-tag {
   break-before: avoid-page;
   break-after: avoid-page;

src/Clause.ts

@@ -111,6 +111,13 @@ export default class Clause extends Builder {
       parentNamespace = parent.namespace;
     }
 
+    // Reset figure numbering for each Annex
+    if (this.isAnnex && !this.parentClause) {
+      spec._figureCounts.figure = 0;
+      spec._figureCounts.table = 0;
+      spec._figurePrefix = `${number}.`;
+    }
+
     if (node.hasAttribute('namespace')) {
       this.namespace = node.getAttribute('namespace')!;
       spec.biblio.createNamespace(this.namespace, parentNamespace);

src/Figure.ts

@@ -5,7 +5,7 @@ import Builder from './Builder';
 
 export default class Figure extends Builder {
   type: string;
-  number: number;
+  number: number | string;
   id: string | null;
   isInformative: boolean;
   captionElem: HTMLElement | null;
@@ -16,21 +16,21 @@ export default class Figure extends Builder {
   constructor(spec: Spec, node: HTMLElement) {
     super(spec, node);
     this.type = node.nodeName.split('-')[1].toLowerCase();
-    this.number = ++spec._figureCounts[this.type];
+    this.number = `${spec._figurePrefix}${++spec._figureCounts[this.type]}`;
     this.id = node.getAttribute('id');
 
     this.isInformative = node.hasAttribute('informative');
     this.captionElem = node.querySelector('emu-caption');
-    this.caption = this.type.charAt(0).toUpperCase() + this.type.slice(1) + ' ' + this.number;
+    this.caption = `${this.type.charAt(0).toUpperCase()}${this.type.slice(1)} ${this.number}`;
 
     if (this.isInformative) {
       this.caption += ' (Informative)';
     }
 
     if (this.captionElem) {
-      this.caption += ': ' + this.captionElem.innerHTML;
+      this.caption += ' \u2014 ' + this.captionElem.innerHTML;
     } else if (node.getAttribute('caption')) {
-      this.caption += ': ' + node.getAttribute('caption');
+      this.caption += ' \u2014 ' + node.getAttribute('caption');
     }
 
     if (this.id) {
@@ -60,6 +60,12 @@ export default class Figure extends Builder {
 
     const captionElem = spec.doc.createElement('figcaption');
     captionElem.innerHTML = figure.caption;
-    node.childNodes[0].insertBefore(captionElem, node.childNodes[0].firstChild);
+
+    // Captions go below figures but above tables etc. (per Ecma house style)
+    if (node.nodeName === 'EMU-FIGURE') {
+      ele.appendChild(captionElem);
+    } else {
+      ele.insertBefore(captionElem, ele.firstChild);
+    }
   }
 }

src/Spec.ts

@@ -324,6 +324,7 @@ export default class Spec {
   readonly log: (msg: string) => void;
   readonly warn: (err: Warning) => void | undefined;
 
+  /** @internal */ _figurePrefix: string;
   /** @internal */ _figureCounts: { [type: string]: number };
   /** @internal */ _xrefs: Xref[];
   /** @internal */ _ntRefs: NonTerminal[];
@@ -377,6 +378,7 @@ export default class Spec {
       table: 0,
       figure: 0,
     };
+    this._figurePrefix = '';
     this._xrefs = [];
     this._ntRefs = [];
     this._ntStringRefs = [];