postext 1.59.1 → 1.60.0

package/dist/html-backend.js

@@ -20,7 +20,7 @@ import { measureFontBox, measureSpacedWidth, measureTextWidth, measuresOwnFace,
 import { trackedLigaturePieces } from './measure/trackedLigatures.js';
 import { cellsOf, lineWordSegmentsInOrder, sameSetWidth } from './wordPieces.js';
 import { fontFamilyOf } from './measure/vertical.js';
-import { lineHighlightsHtml, lineMarksHtml, rubyHtml, verticalLineMarksHtml, warichuHtml, sideMarkerHtml, RT_OPEN, RUBY_OPEN, rubyGroupOf, kuntenHtml, verticalKuntenTateHtml } from './htmlAnnotations.js';
+import { chipReadingsHtml, lineHighlightsHtml, lineMarksHtml, rubyHtml, verticalLineMarksHtml, warichuHtml, sideMarkerHtml, RT_OPEN, RUBY_OPEN, rubyGroupOf, kuntenHtml, verticalKuntenTateHtml } from './htmlAnnotations.js';
 import { playMarkTriangle, qrModuleRuns } from './pipeline/videoOverlay.js';
 import { isHlsMimeType, mediaFragment, videoElementAttributes, videoEmbedAllow } from './video/url.js';
 import { hasSwatchShape, swatchGeometry } from './swatchShape.js';
@@ -1310,9 +1310,11 @@ function cjkAt(char) {
  */
 function renderSegments(line, block, targets, rootDir = 'ltr', rootLang, 
 /** What a copy puts after the line (see {@link lineEndText}). */
-end = '') {
+end = '', 
+/** Where the line's inline pictures come from (#1249). */
+paint) {
     if (line.cjkComposed)
-        return renderComposedSegments(line, block, targets, rootDir, end);
+        return renderComposedSegments(line, block, targets, rootDir, end, paint);
     // The tracking after the last glyph is advance, not ink: centring and
     // right alignment leave it out (EF-153), as the canvas does.
     const tracking = (block.letterSpacing ?? 0) + (line.letterSpacing ?? 0);
@@ -1410,7 +1412,7 @@ end = '') {
             continue;
         }
         if (seg.kind === 'swatch') {
-            parts.push(renderSwatchSegment(seg.swatch, x, line.baseline - line.bbox.y, seg.width, block.color, undefined, seg.rtl === true));
+            parts.push(renderSwatchSegment(seg.swatch, x, line.baseline - line.bbox.y, seg.width, block.color, paint, seg.rtl === true));
             x += seg.width;
             continue;
         }
@@ -1463,7 +1465,7 @@ function orderedOffsets(segs, order, start, spaceWidth) {
 /** {@link renderSegments} for a line of the CJK composer: hung marks and
  *  Han–Latin spaces kept out of the justification, each segment with its
  *  own tracking, ink offset and scale, warichu notes and ruby readings. */
-function renderComposedSegments(line, block, targets, rootDir = 'ltr', end = '') {
+function renderComposedSegments(line, block, targets, rootDir = 'ltr', end = '', paint) {
     // The tracking after the last glyph is advance, not ink: centring and
     // right alignment leave it out (EF-153), as the canvas does.
     const lineTracking = (block.letterSpacing ?? 0) + (line.letterSpacing ?? 0);
@@ -1564,7 +1566,7 @@ function renderComposedSegments(line, block, targets, rootDir = 'ltr', end = '')
             continue;
         }
         if (seg.kind === 'swatch') {
-            parts.push(renderSwatchSegment(seg.swatch, x, line.baseline - line.bbox.y, seg.width, block.color, undefined, seg.rtl === true));
+            parts.push(renderSwatchSegment(seg.swatch, x, line.baseline - line.bbox.y, seg.width, block.color, paint, seg.rtl === true));
             x += seg.width;
             continue;
         }
@@ -1784,6 +1786,9 @@ rootDir = 'ltr') {
         const label = chip.blank ? ` role="img" aria-label="${esc(chip.blankLabel ?? 'blank')}"` : '';
         parts.push(`<span class="pt-ex-slot${chip.blank ? ' pt-ex-blank' : ''}"${data}${label} style="${boxGeometry}"></span>`);
     }
+    // The readings of its ruby words, over a blank too (#1244).
+    if (chip.readings && chip.runs[0])
+        parts.push(chipReadingsHtml(chip.readings, bx, inkFor(chip.runs[0]), quoteFontString));
     if (chip.blank)
         return parts.join('');
     let tx = bx + chip.borderWidth + chip.paddingX;
@@ -1931,7 +1936,9 @@ function renderLine(line, block, targets, rootDir = 'ltr', rootLang,
 next, 
 /** Markup set at the start of the line's box, before its text (a drop
  *  cap, #623). */
-lead = '') {
+lead = '', 
+/** Where the line's inline pictures come from (#1249). */
+paint) {
     const font = quoteFontString(block.fontString);
     const strikethroughDecl = block.strikethroughText ? 'text-decoration:line-through;' : '';
     // Tracking — the block's (column balancing, a runt set short) and the
@@ -1951,7 +1958,7 @@ lead = '') {
         strikethroughDecl +
         trackingDecl +
         (lineCjkDecl(line) ? cjkTextDecl(tracking !== 0) : '') +
-        `">${lineHighlightsHtml(line)}${lead}${renderSegments(line, block, targets, rootDir, rootLang, lineEndText(line, next))}</div>`);
+        `">${lineHighlightsHtml(line)}${lead}${renderSegments(line, block, targets, rootDir, rootLang, lineEndText(line, next), paint)}</div>`);
 }
 /**
  * A paragraph's drop cap (#623), as the first runs of its first line's box:
@@ -2141,7 +2148,7 @@ function verticalWordSegments(line, block, v, tracking) {
 /** A body line of a vertical page: its text segments down an upright box,
  *  its formulas, swatches and chips sideways where the canvas paints them
  *  (see the section comment). */
-function renderVerticalLine(line, block, v, targets, next) {
+function renderVerticalLine(line, block, v, targets, next, paint) {
     const lineTracking = (block.letterSpacing ?? 0) + (line.letterSpacing ?? 0);
     const trailing = lineTrailingTracking(line, lineTracking);
     const lineIndent = line.bbox.x - block.bbox.x;
@@ -2190,7 +2197,7 @@ function renderVerticalLine(line, block, v, targets, next) {
             continue;
         }
         if (seg.kind === 'swatch') {
-            sideways.push(renderSwatchSegment(seg.swatch, x, line.baseline - line.bbox.y, seg.width, block.color, undefined, seg.rtl === true));
+            sideways.push(renderSwatchSegment(seg.swatch, x, line.baseline - line.bbox.y, seg.width, block.color, paint, seg.rtl === true));
             x += seg.width;
             continue;
         }
@@ -2724,7 +2731,7 @@ function renderFigureLabelsHtml(rb, bx, by, options) {
     const n2 = (v) => String(+v.toFixed(4));
     // Their leaders first (#1057), under every label: vector lines hidden
     // from assistive technology, as design paths are.
-    const parts = figureLabelLeaderPaths(rb, bx, by).map(renderDesignPathBlock);
+    const parts = figureLabelLeaderPaths(rb, bx, by).map((p) => renderDesignPathBlock(p));
     for (const label of rb.labels ?? []) {
         let layout = label.layout;
         if (!layout)
@@ -2760,7 +2767,7 @@ function renderFigureLabelsHtml(rb, bx, by, options) {
                 id: label.id ?? '', fontString: layout.fontString, boldFontString: layout.boldFontString, italicFontString: layout.italicFontString,
                 boldItalicFontString: layout.boldItalicFontString, color: layout.color, textAlign: 'left', bbox: layout.box,
             };
-            layout.lines.forEach((line, i) => inner.push(renderVerticalLine(line, host, v, options.linkTargets, layout.lines[i + 1])));
+            layout.lines.forEach((line, i) => inner.push(renderVerticalLine(line, host, v, options.linkTargets, layout.lines[i + 1], options)));
         }
         else {
             layout.lines.forEach((line, i) => {
@@ -3095,7 +3102,7 @@ function renderDesignRuleBlock(block) {
  *  box like a rule, its outline and markers drawn in the box's own
  *  coordinates (ink past the box, a mitre, still shows). Decoration:
  *  hidden from assistive technology. */
-function renderDesignPathBlock(block) {
+function renderDesignPathBlock(block, mirrored = false) {
     const { x, y, width, height } = block.bbox;
     const parts = [];
     const stroke = block.stroke && block.stroke.widthPx > 0 ? block.stroke : undefined;
@@ -3118,7 +3125,7 @@ function renderDesignPathBlock(block) {
         parts.push(markerSvgElement(m, x, y, esc));
     if (parts.length === 0)
         return '';
-    return (`<svg aria-hidden="true" focusable="false" width="${width}" height="${height}" ` +
+    return (`<svg${mirrored ? ' class="pt-path"' : ''} aria-hidden="true" focusable="false" width="${width}" height="${height}" ` +
         `style="position:absolute;left:${x}px;top:${y}px;width:${width}px;height:${height}px;overflow:visible;">` +
         parts.join('') +
         `</svg>`);
@@ -3177,7 +3184,7 @@ function renderDesignImageBlock(block, options) {
         `background:rgba(160,160,160,0.12);border:1px solid rgba(160,160,160,0.5);box-sizing:border-box;` +
         `"></div>`);
 }
-function renderDesignBlock(block, options) {
+function renderDesignBlock(block, options, mirroredPaths = false) {
     if (block.kind === 'text')
         return renderDesignTextBlock(block, options);
     if (block.kind === 'rule')
@@ -3185,20 +3192,23 @@ function renderDesignBlock(block, options) {
     if (block.kind === 'image')
         return renderDesignImageBlock(block, options);
     if (block.kind === 'path')
-        return renderDesignPathBlock(block);
+        return renderDesignPathBlock(block, mirroredPaths);
     return renderDesignBoxBlock(block);
 }
-function renderDesignSlot(slot, options) {
+function renderDesignSlot(slot, options, mirroredPaths = false) {
     const parts = [];
     for (const block of slot.blocks)
-        parts.push(renderDesignBlock(block, options));
+        parts.push(renderDesignBlock(block, options, mirroredPaths));
     return parts.join('');
 }
 function renderBlockInner(block, options) {
     if (block.hidden)
         return '';
+    // An exercise's drawn box (a grid, an operation, a writing area) keeps
+    // its paths mirrored with a mirrored flow, as the canvas and the PDF
+    // paint it (#1244).
     if (block.designOverlay)
-        return renderDesignSlot(block.designOverlay, options);
+        return renderDesignSlot(block.designOverlay, options, !!block.callout?.styleId?.startsWith('__postext-ex'));
     // Resource embeds carry their own measured geometry (image/table + caption);
     // the block's single placeholder line renders nothing useful.
     if (block.resourceBlock)
@@ -3213,7 +3223,7 @@ function renderBlockInner(block, options) {
     block.lines.forEach((line, i) => {
         const next = block.lines[i + 1];
         const lead = i === 0 && block.dropCap && !v ? dropCapHtml(block.dropCap, line, quoteFontString(block.fontString), (block.letterSpacing ?? 0) + (line.letterSpacing ?? 0)) : '';
-        parts.push(v ? renderVerticalLine(line, block, v, options.linkTargets, next) : renderLine(line, block, options.linkTargets, options.dir, options.rootLang, next, lead));
+        parts.push(v ? renderVerticalLine(line, block, v, options.linkTargets, next, options) : renderLine(line, block, options.linkTargets, options.dir, options.rootLang, next, lead, options));
     });
     return parts.join('');
 }
@@ -3237,7 +3247,7 @@ function renderStripCaptionHtml(block, options) {
     const lines = block.lines.slice(caption.firstLine, caption.firstLine + caption.lineCount);
     lines.forEach((line, i) => {
         const next = lines[i + 1];
-        parts.push(v ? renderVerticalLine(line, block, v, options.linkTargets, next) : renderLine(line, block, options.linkTargets, options.dir, options.rootLang, next));
+        parts.push(v ? renderVerticalLine(line, block, v, options.linkTargets, next, options) : renderLine(line, block, options.linkTargets, options.dir, options.rootLang, next, '', options));
     });
     return parts.join('');
 }
@@ -3586,12 +3596,14 @@ function renderComicPageHtml(page, comic, k, options, overPanel) {
  *  mirrored layout put it. A box that sets a transform of its own (a
  *  stretched dash, a turned design picture) keeps it and stays mirrored. */
 const MIRRORED_FLOW_STYLE = '<style>.pt-flow-mirrored [style*="white-space:pre"],.pt-flow-mirrored img,' +
-    '.pt-flow-mirrored svg:not(.pt-char-grid),.pt-flow-mirrored .pt-video{transform:scaleX(-1);}' +
+    // An exercise's drawing is geometry, mirrored with the flow as the canvas
+    // and the PDF mirror it (#1244): a crossword's cells, an operation's rules.
+    '.pt-flow-mirrored svg:not(.pt-char-grid):not(.pt-path),.pt-flow-mirrored .pt-video{transform:scaleX(-1);}' +
     // A box reflected back about its body (a vertical label, #955) or a
     // vertical frame of the page placed by a matrix that includes the mirror
     // (#960): what is in it is not mirrored, so nothing is turned back.
     '.pt-flow-mirrored .pt-unmirrored [style*="white-space:pre"],.pt-flow-mirrored .pt-unmirrored img,' +
-    '.pt-flow-mirrored .pt-unmirrored svg:not(.pt-char-grid),.pt-flow-mirrored .pt-unmirrored .pt-video{transform:none;}</style>';
+    '.pt-flow-mirrored .pt-unmirrored svg:not(.pt-char-grid):not(.pt-path),.pt-flow-mirrored .pt-unmirrored .pt-video{transform:none;}</style>';
 /** The character grid (稿纸) as one SVG path over the page, under the
  *  text (see `cjkGridCells`). */
 function renderCharacterGridSvg(cells, width, height) {