Skip to content

Table and Figure caption styles #664

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Table and Figure caption styles #664

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ab9a7b8
Table and Figure caption styles
gesa Oct 8, 2025
9204506
clarify em dash in figure captions
gesa Nov 13, 2025
6624c60
Position emu-figure captions _below_ figures
gesa Nov 13, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 20 additions & 2 deletions css/print.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
}

Expand All @@ -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;
Expand Down Expand Up @@ -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;
Expand Down
7 changes: 7 additions & 0 deletions src/Clause.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
13 changes: 9 additions & 4 deletions src/Figure.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 += ' \u2014 ' + this.captionElem.innerHTML;
} else if (node.getAttribute('caption')) {
this.caption += ': ' + node.getAttribute('caption');
this.caption += ' \u2014 ' + node.getAttribute('caption');
}

if (this.id) {
Expand All @@ -56,6 +56,11 @@ 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);

if (node.nodeName.split('-')[1] === 'FIGURE') {
node.firstElementChild?.appendChild(captionElem);
} else {
node.childNodes[0].insertBefore(captionElem, node.childNodes[0].firstChild);
}
}
}
2 changes: 2 additions & 0 deletions src/Spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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[];
Expand Down Expand Up @@ -371,6 +372,7 @@ export default class Spec {
table: 0,
figure: 0,
};
this._figurePrefix = '';
this._xrefs = [];
this._ntRefs = [];
this._ntStringRefs = [];
Expand Down
22 changes: 20 additions & 2 deletions test/baselines/generated-reference/assets-inline.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3504,7 +3504,7 @@
pre,
h1,
emu-production,
emu-figure:has(> figure > img) figure,
emu-figure,
#metadata-block {
break-inside: avoid;
border: unset;
Expand Down Expand Up @@ -3681,7 +3681,7 @@
caption-side: top;
color: #000;
font-weight: bold;
margin-bottom: 1rem;
margin-bottom: 0.5lh;
text-align: center;
}

Expand All @@ -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;
Expand Down Expand Up @@ -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;
Expand Down
4 changes: 2 additions & 2 deletions test/baselines/generated-reference/duplicate-ids.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down
20 changes: 10 additions & 10 deletions test/baselines/generated-reference/figure.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,16 +11,16 @@
<li><span>Jump to the most recent link target</span><code>`</code></li>
</ul></div><div id="spec-container">
<link rel="stylesheet" href="css/elements.css">
<emu-figure id="figure-1"><figure><figcaption>Figure 1</figcaption>
<emu-figure id="figure-1"><figure>
this is a figure!
</figure></emu-figure>
<figcaption>Figure 1</figcaption></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>
this is a figure!
</figure></emu-figure>
<figcaption>Figure 2 (Informative) — Informative figure</figcaption></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>
Expand All @@ -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>
Expand All @@ -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>

this is a figure!
</figure></emu-figure>
<figcaption>Figure 3 (Informative) — This is the caption</figcaption></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>
Expand All @@ -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>
Expand Down
6 changes: 3 additions & 3 deletions test/baselines/generated-reference/xref.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,11 +94,11 @@ <h1><span class="secnum">1.1</span> AbstractOp</h1>
<p>And a third!</p>
</div></emu-note>

<emu-figure id="figure-1"><figure><figcaption>Figure 1</figcaption>
<emu-figure id="figure-1"><figure>
this is a figure!
</figure></emu-figure>
<figcaption>Figure 1</figcaption></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>
Expand Down