Table and Figure caption styles

Updated to Ecma house style

Author: gesa

css/print.css

@@ -252,7 +252,7 @@ emu-table td,
 pre,
 h1,
 emu-production,
-emu-figure:has(> figure > img) figure,
+emu-figure,
 #metadata-block {
   break-inside: avoid;
   border: unset;
@@ -429,7 +429,7 @@ caption, table > figcaption {
   caption-side: top;
   color: #000;
   font-weight: bold;
-  margin-bottom: 1rem;
+  margin-bottom: 0.5lh;
   text-align: center;
 }
 
@@ -442,6 +442,14 @@ 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;
@@ -476,6 +484,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

@@ -82,6 +82,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

@@ -21,16 +21,16 @@ export default class Figure extends Builder {
 
     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)} ${spec._figurePrefix}${this.number}`;
 
     if (this.isInformative) {
       this.caption += ' (Informative)';
     }
 
     if (this.captionElem) {
-      this.caption += ': ' + this.captionElem.innerHTML;
+      this.caption += ' — ' + this.captionElem.innerHTML;
     } else if (node.getAttribute('caption')) {
-      this.caption += ': ' + node.getAttribute('caption');
+      this.caption += ' — ' + node.getAttribute('caption');
     }
 
     if (this.id) {

src/Spec.ts

@@ -319,6 +319,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[];
@@ -371,6 +372,7 @@ export default class Spec {
       table: 0,
       figure: 0,
     };
+    this._figurePrefix = '';
     this._xrefs = [];
     this._ntRefs = [];
     this._ntStringRefs = [];

test/baselines/generated-reference/assets-inline.html

@@ -3504,7 +3504,7 @@
 pre,
 h1,
 emu-production,
-emu-figure:has(> figure > img) figure,
+emu-figure,
 #metadata-block {
   break-inside: avoid;
   border: unset;
@@ -3681,7 +3681,7 @@
   caption-side: top;
   color: #000;
   font-weight: bold;
-  margin-bottom: 1rem;
+  margin-bottom: 0.5lh;
   text-align: center;
 }
 
@@ -3694,6 +3694,14 @@
   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;
@@ -3728,6 +3736,16 @@
   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;

test/baselines/generated-reference/duplicate-ids.html

@@ -24,7 +24,7 @@ <h1><span class="secnum">1.1</span> Sub A</h1>
 <!-- EXPECT_WARNING { "ruleId": "duplicate-id", "message": "<emu-clause> has duplicate id \"sec-a\"" } -->
 <emu-clause id="sec-a">
   <h1><span class="secnum">2</span> Section A: Extras</h1>
-  <emu-table id="table-of-stuff" caption="A Table Of Stuff" informative=""><figure><figcaption>Table 1 (Informative): A Table Of Stuff</figcaption>
+  <emu-table id="table-of-stuff" caption="A Table Of Stuff" informative=""><figure><figcaption>Table 1 (Informative) — A Table Of Stuff</figcaption>
     <table>
       <tbody><tr><th>Column 1</th><th>Column 2</th></tr>
       <tr><td>Value</td><td>Value 2</td></tr>
@@ -35,7 +35,7 @@ <h1><span class="secnum">2</span> Section A: Extras</h1>
 <emu-clause id="sec-a">
   <h1><span class="secnum">3</span> Section A: Extras</h1>
   <!-- EXPECT_WARNING { "ruleId": "duplicate-id", "message": "<emu-table> has duplicate id \"table-of-stuff\"" } -->
-  <emu-table id="table-of-stuff" caption="A Table Of Stuff" informative=""><figure><figcaption>Table 2 (Informative): A Table Of Stuff</figcaption>
+  <emu-table id="table-of-stuff" caption="A Table Of Stuff" informative=""><figure><figcaption>Table 2 (Informative) — A Table Of Stuff</figcaption>
     <table>
       <tbody><tr><th>Column 1</th><th>Column 2</th></tr>
       <tr><td>Value</td><td>Value 2</td></tr>

test/baselines/generated-reference/figure.html

@@ -16,11 +16,11 @@
 </figure></emu-figure>
 
 <!-- deprecated: caption element -->
-<emu-figure id="figure-2" informative="" caption="Informative figure"><figure><figcaption>Figure 2 (Informative): Informative figure</figcaption>
+<emu-figure id="figure-2" informative="" caption="Informative figure"><figure><figcaption>Figure 2 (Informative) — Informative figure</figcaption>
   this is a figure!
 </figure></emu-figure>
 
-<emu-table id="table-1" caption="An example table"><figure><figcaption>Table 1: An example table</figcaption>
+<emu-table id="table-1" caption="An example table"><figure><figcaption>Table 1 — An example table</figcaption>
   <table>
     <thead>
       <tr><td>Column 1</td><td>Column 2</td></tr>
@@ -32,7 +32,7 @@
   </tbody></table>
 </figure></emu-table>
 
-<emu-table id="table-2" caption="An example table 2" informative=""><figure><figcaption>Table 2 (Informative): An example table 2</figcaption>
+<emu-table id="table-2" caption="An example table 2" informative=""><figure><figcaption>Table 2 (Informative) — An example table 2</figcaption>
   <table>
     <tbody><tr><th>Column 1</th><th>Column 2</th></tr>
     <tr><td>Value</td><td>Value 2</td></tr>
@@ -42,12 +42,12 @@
   </tbody></table>
 </figure></emu-table>
 
-<emu-figure id="figure-3" informative=""><figure><figcaption>Figure 3 (Informative): This is the caption</figcaption>
+<emu-figure id="figure-3" informative=""><figure><figcaption>Figure 3 (Informative) — This is the caption</figcaption>
 
   this is a figure!
 </figure></emu-figure>
 
-<emu-table id="table-3"><figure><figcaption>Table 3: This is a table</figcaption>
+<emu-table id="table-3"><figure><figcaption>Table 3 — This is a table</figcaption>
 
   <table>
     <thead>
@@ -60,7 +60,7 @@
   </tbody></table>
 </figure></emu-table>
 
-<emu-table id="table-4" informative=""><figure><figcaption>Table 4 (Informative): This is a <b>second</b> table</figcaption>
+<emu-table id="table-4" informative=""><figure><figcaption>Table 4 (Informative) — This is a <b>second</b> table</figcaption>
 
   <table>
     <tbody><tr><th>Column 1</th><th>Column 2</th></tr>

test/baselines/generated-reference/xref.html

@@ -98,7 +98,7 @@ <h1><span class="secnum">1.1</span> AbstractOp</h1>
     this is a figure!
   </figure></emu-figure>
 
-  <emu-table id="table-1" caption="An example table"><figure><figcaption>Table 1: An example table</figcaption>
+  <emu-table id="table-1" caption="An example table"><figure><figcaption>Table 1 — An example table</figcaption>
     <table>
       <thead>
         <tr><td>Column 1</td><td>Column 2</td></tr>