diff --git a/css/elements.css b/css/elements.css
index 11b83b98..1c87a879 100644
--- a/css/elements.css
+++ b/css/elements.css
@@ -187,6 +187,10 @@ emu-alg ol.nested-lots ol {
list-style-type: lower-roman;
}
+emu-alg [aria-hidden=true] {
+ font-size: 0;
+}
+
emu-eqn {
display: block;
margin-left: 4em;
diff --git a/js/listNumbers.js b/js/listNumbers.js
index ed98b087..dfba4807 100644
--- a/js/listNumbers.js
+++ b/js/listNumbers.js
@@ -1,30 +1,120 @@
'use strict';
-let decimalBullet = Array.from({ length: 100 }, (a, i) => '' + (i + 1));
-let alphaBullet = Array.from({ length: 26 }, (a, i) => String.fromCharCode('a'.charCodeAt(0) + i));
-// prettier-ignore
-let romanBullet = ['i', 'ii', 'iii', 'iv', 'v', 'vi', 'vii', 'viii', 'ix', 'x', 'xi', 'xii', 'xiii', 'xiv', 'xv', 'xvi', 'xvii', 'xviii', 'xix', 'xx', 'xxi', 'xxii', 'xxiii', 'xxiv', 'xxv'];
-// prettier-ignore
-let bullets = [decimalBullet, alphaBullet, romanBullet, decimalBullet, alphaBullet, romanBullet];
+// Manually prefix algorithm step list items with hidden counter representations
+// corresponding with their markers so they get selected and copied with content.
+// We read list-style-type to avoid divergence with the style sheet, but
+// for efficiency assume that all lists at the same nesting depth use the same
+// style (except for those associated with replacement steps).
+// We also precompute some initial items for each supported style type.
+// https://w3c.github.io/csswg-drafts/css-counter-styles/
-function addStepNumberText(ol, parentIndex) {
- for (let i = 0; i < ol.children.length; ++i) {
- let child = ol.children[i];
- let index = parentIndex.concat([i]);
- let applicable = bullets[Math.min(index.length - 1, 5)];
- let span = document.createElement('span');
- span.textContent = (applicable[i] || '?') + '. ';
- span.style.fontSize = '0';
- span.setAttribute('aria-hidden', 'true');
- child.prepend(span);
- let sublist = child.querySelector('ol');
- if (sublist != null) {
- addStepNumberText(sublist, index);
+const lowerLetters = Array.from({ length: 26 }, (_, i) =>
+ String.fromCharCode('a'.charCodeAt(0) + i)
+);
+// Implement the lower-alpha 'alphabetic' algorithm,
+// adjusting for indexing from 0 rather than 1.
+// https://w3c.github.io/csswg-drafts/css-counter-styles/#simple-alphabetic
+// https://w3c.github.io/csswg-drafts/css-counter-styles/#alphabetic-system
+const lowerAlphaTextForIndex = i => {
+ let S = '';
+ for (const N = lowerLetters.length; i >= 0; i--) {
+ S = lowerLetters[i % N] + S;
+ i = Math.floor(i / N);
+ }
+ return S;
+};
+
+const weightedLowerRomanSymbols = Object.entries({
+ m: 1000,
+ cm: 900,
+ d: 500,
+ cd: 400,
+ c: 100,
+ xc: 90,
+ l: 50,
+ xl: 40,
+ x: 10,
+ ix: 9,
+ v: 5,
+ iv: 4,
+ i: 1,
+});
+// Implement the lower-roman 'additive' algorithm,
+// adjusting for indexing from 0 rather than 1.
+// https://w3c.github.io/csswg-drafts/css-counter-styles/#simple-numeric
+// https://w3c.github.io/csswg-drafts/css-counter-styles/#additive-system
+const lowerRomanTextForIndex = i => {
+ let value = i + 1;
+ let S = '';
+ for (const [symbol, weight] of weightedLowerRomanSymbols) {
+ if (!value) break;
+ if (weight > value) continue;
+ const reps = Math.floor(value / weight);
+ S += symbol.repeat(reps);
+ value -= weight * reps;
+ }
+ return S;
+};
+
+// Memoize pure index-to-text functions with an exposed cache for fast retrieval.
+const makeCounter = (pureGetTextForIndex, precomputeCount = 30) => {
+ const cache = Array.from({ length: precomputeCount }, (_, i) => pureGetTextForIndex(i));
+ const getTextForIndex = i => {
+ if (i >= cache.length) cache[i] = pureGetTextForIndex(i);
+ return cache[i];
+ };
+ return { getTextForIndex, cache };
+};
+
+const counterByStyle = {
+ __proto__: null,
+ decimal: makeCounter(i => String(i + 1)),
+ 'lower-alpha': makeCounter(lowerAlphaTextForIndex),
+ 'upper-alpha': makeCounter(i => lowerAlphaTextForIndex(i).toUpperCase()),
+ 'lower-roman': makeCounter(lowerRomanTextForIndex),
+ 'upper-roman': makeCounter(i => lowerRomanTextForIndex(i).toUpperCase()),
+};
+const fallbackCounter = makeCounter(() => '?');
+const counterByDepth = [];
+
+function addStepNumberText(
+ ol,
+ depth = 0,
+ special = [...ol.classList].some(c => c.startsWith('nested-'))
+) {
+ let counter = !special && counterByDepth[depth];
+ if (!counter) {
+ const counterStyle = getComputedStyle(ol)['list-style-type'];
+ counter = counterByStyle[counterStyle];
+ if (!counter) {
+ console.warn('unsupported list-style-type', {
+ ol,
+ counterStyle,
+ id: ol.closest('[id]')?.getAttribute('id'),
+ });
+ counterByStyle[counterStyle] = fallbackCounter;
+ counter = fallbackCounter;
+ }
+ if (!special) {
+ counterByDepth[depth] = counter;
}
}
+ const { cache, getTextForIndex } = counter;
+ let i = (Number(ol.getAttribute('start')) || 1) - 1;
+ for (const li of ol.children) {
+ const marker = document.createElement('span');
+ marker.textContent = `${i < cache.length ? cache[i] : getTextForIndex(i)}. `;
+ marker.setAttribute('aria-hidden', 'true');
+ li.prepend(marker);
+ for (const sublist of li.querySelectorAll(':scope > ol')) {
+ addStepNumberText(sublist, depth + 1, special);
+ }
+ i++;
+ }
}
+
document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('emu-alg > ol').forEach(ol => {
- addStepNumberText(ol, []);
+ addStepNumberText(ol);
});
});
diff --git a/test/baselines/generated-reference/multipage.html/multipage/index.html b/test/baselines/generated-reference/multipage.html/multipage/index.html
index d0f880ff..6563d2a4 100644
--- a/test/baselines/generated-reference/multipage.html/multipage/index.html
+++ b/test/baselines/generated-reference/multipage.html/multipage/index.html
@@ -1,7 +1,7 @@
-
+