postext 1.51.1 → 1.53.0

package/dist/html-backend.js

@@ -1,36 +1,37 @@
-import { footnoteRuleSegments } from './columnRule';
-import { markerSvgElement, pathSvgData } from './design/pathBlock';
-import { leaderRuleGeometry, lineTextAlign, tableCellFillRects, tableFrameOutline } from './vdt';
-import { dimensionToPx } from './units';
-import { documentInkHex, isSingleInkSvgUrl, singleInkColorMatrix } from './svg/singleInk';
-import { inlineSvgFontsDetailedSync } from './svg/fonts';
-import { registeredFontSyncProvider } from './svg/fontRegistry';
-import { svgPictureFontWarning } from './svg/image';
-import { lineInkExtent, lineTrailingTracking } from './lineInk';
-import { CHARACTER_GRID_COLOR, cjkGridCells } from './pipeline/cjkGrid';
-import { isJapaneseLanguage, renderLangOf, shapingLanguageOf, shapingTagOf } from './locale';
-import { hasCJK } from './measure/cjk';
-import { arabicMarkNeeded, needsBidi } from './bidi';
-import { joiningScriptIn } from './measure/joining';
-import { faceReadsScript, isLetterless, rtlTextWidth, scriptContextUntracked, scriptMark, scriptTextWidth } from './measure/script';
-import { DEFAULT_CENTRAL_BASELINE, verticalFlowOf } from './vdt';
-import { holdsTurnedMark, segmentOrientation, verticalRuns } from './writingMode';
-import { graphemeCount, graphemesOf } from './measure/graphemes';
-import { measureSpacedWidth, measureTextWidth, withMeasureLanguage } from './measure/canvas';
-import { trackedLigaturePieces } from './measure/trackedLigatures';
-import { cellsOf, lineWordSegmentsInOrder, sameSetWidth } from './wordPieces';
-import { fontFamilyOf } from './measure/vertical';
-import { lineHighlightsHtml, lineMarksHtml, rubyHtml, verticalLineMarksHtml, warichuHtml, sideMarkerHtml, RT_OPEN, RUBY_OPEN, rubyGroupOf, kuntenHtml, verticalKuntenTateHtml } from './htmlAnnotations';
-import { playMarkTriangle, qrModuleRuns } from './pipeline/videoOverlay';
-import { isHlsMimeType, mediaFragment, videoElementAttributes, videoEmbedAllow } from './video/url';
-import { iconLineDash, inlineIconBox } from './measure/inlineIcon';
-import { textDots } from './textDots';
-import { renderComicHtml } from './htmlComic';
-import { comicBlockOnSheet, pageComics } from './comics/transform';
-import { altWithLabels } from './composed/labelText';
-import { figureLabelLeaderPaths, figureLabelMatrix, undrawnLabels, unmirrorLabelLayout } from './composed/labels';
-import { comicFramePaintOrder, composedFrameBlockIds, composedPaintOrder, composedReadingOrder, composedSheetClip, composedSheetClipOnSheet, decorationOver, decorationUnder, frameClips, frameContentRect, frameMatrix } from './composed/paint';
-import { taskBoxSvgBody, taskBoxText } from './taskBox';
+import { footnoteRuleSegments } from './columnRule.js';
+import { markerSvgElement, pathSvgData } from './design/pathBlock.js';
+import { leaderRuleGeometry, lineTextAlign, tableCellFillRects, tableFrameOutline } from './vdt.js';
+import { dimensionToPx } from './units.js';
+import { documentInkHex, isSingleInkSvgUrl, singleInkColorMatrix } from './svg/singleInk.js';
+import { inlineSvgFontsDetailedSync } from './svg/fonts.js';
+import { registeredFontSyncProvider } from './svg/fontRegistry.js';
+import { svgPictureFontWarning } from './svg/image.js';
+import { lineInkExtent, lineTrailingTracking } from './lineInk.js';
+import { CHARACTER_GRID_COLOR, cjkGridCells } from './pipeline/cjkGrid.js';
+import { isJapaneseLanguage, renderLangOf, shapingLanguageOf, shapingTagOf } from './locale.js';
+import { hasCJK } from './measure/cjk.js';
+import { arabicMarkNeeded, needsBidi } from './bidi.js';
+import { joiningScriptIn } from './measure/joining.js';
+import { faceReadsScript, isLetterless, rtlTextWidth, scriptContextUntracked, scriptMark, scriptTextWidth } from './measure/script.js';
+import { DEFAULT_CENTRAL_BASELINE, verticalFlowOf } from './vdt.js';
+import { holdsTurnedMark, segmentOrientation, verticalRuns } from './writingMode.js';
+import { graphemeCount, graphemesOf } from './measure/graphemes.js';
+import { measureSpacedWidth, measureTextWidth, withMeasureLanguage } from './measure/canvas.js';
+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 { playMarkTriangle, qrModuleRuns } from './pipeline/videoOverlay.js';
+import { isHlsMimeType, mediaFragment, videoElementAttributes, videoEmbedAllow } from './video/url.js';
+import { hasSwatchShape, swatchGeometry } from './swatchShape.js';
+import { iconLineDash, inlineIconBox } from './measure/inlineIcon.js';
+import { textDots } from './textDots.js';
+import { renderComicHtml } from './htmlComic.js';
+import { comicBlockOnSheet, pageComics } from './comics/transform.js';
+import { altWithLabels } from './composed/labelText.js';
+import { figureLabelLeaderPaths, figureLabelMatrix, undrawnLabels, unmirrorLabelLayout } from './composed/labels.js';
+import { comicFramePaintOrder, composedFrameBlockIds, composedPaintOrder, composedReadingOrder, composedSheetClip, composedSheetClipOnSheet, decorationOver, decorationUnder, frameClips, frameContentRect, frameMatrix } from './composed/paint.js';
+import { taskBoxSvgBody, taskBoxText } from './taskBox.js';
 /**
  * Declarations of every box of CJK text measured with no punctuation
  * trimming: the browser adds and removes nothing. Chrome's
@@ -296,7 +297,9 @@ function directedDesignRunsHtml(line, block, font, tracked) {
         const words = runFont === font && !cjkDecl && !tracked ? runWordBoxesHtml(run.text, run.fontString, run.rtl === true, run.width) : undefined;
         const text = words ?? letterlessRunHtml(run.text, run.fontString, run.rtl === true, run.width, block.letterSpacingPx ?? 0) ?? wordsHtml(run.text, trackedIn(run.fontString, block.letterSpacingPx));
         const top = run.baselineShift ? `${run.baselineShift.toFixed(3)}px` : '0';
-        const pos = `position:absolute;left:${at[i].toFixed(3)}px;top:${top};white-space:pre;${words !== undefined ? `width:${run.width.toFixed(3)}px;` : ''}${cjkDecl}`;
+        // A run in a colour of its own (a part row's leader, #1121).
+        const colorDecl = run.color ? `color:${run.color};` : '';
+        const pos = `position:absolute;left:${at[i].toFixed(3)}px;top:${top};white-space:pre;${words !== undefined ? `width:${run.width.toFixed(3)}px;` : ''}${cjkDecl}${colorDecl}`;
         // A run in another face sits on the baseline of the line's own.
         const inner = runFont !== font
             ? `<span style="font:${runFont};line-height:0;${cjkDecl ? cjkFeaturesDecl(tracked) : tracked ? ligaturesDecl() : ''}">${text}</span>`
@@ -1349,7 +1352,7 @@ end = '') {
             continue;
         }
         if (seg.kind === 'swatch') {
-            parts.push(renderSwatchSegment(seg.swatch, x, line.baseline - line.bbox.y, seg.width, block.color));
+            parts.push(renderSwatchSegment(seg.swatch, x, line.baseline - line.bbox.y, seg.width, block.color, undefined, seg.rtl === true));
             x += seg.width;
             continue;
         }
@@ -1498,7 +1501,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));
+            parts.push(renderSwatchSegment(seg.swatch, x, line.baseline - line.bbox.y, seg.width, block.color, undefined, seg.rtl === true));
             x += seg.width;
             continue;
         }
@@ -1596,8 +1599,21 @@ function renderSwatch(x, baselineOffset, side, fill, ink) {
 }
 /** A `'swatch'` segment: its inline symbol when it carries one (#1058),
  *  else the colour swatch. */
-function renderSwatchSegment(swatch, x, baselineOffset, width, ink, paint) {
-    return swatch?.icon ? renderInlineIconHtml(swatch.icon, x, baselineOffset, ink, paint) : renderSwatch(x, baselineOffset, width, swatch?.color, ink);
+function renderSwatchSegment(swatch, x, baselineOffset, width, ink, paint, rtl = false) {
+    if (swatch?.icon)
+        return renderInlineIconHtml(swatch.icon, x, baselineOffset, ink, paint);
+    if (swatch && hasSwatchShape(swatch))
+        return renderShapedSwatch(swatchGeometry(swatch, x, baselineOffset, width, rtl), swatch.color, swatch.borderColor ?? ink);
+    return renderSwatch(x, baselineOffset, width, swatch?.color, ink);
+}
+/** A swatch with a shape of its own (#1104): the square of `g` (from the
+ *  line top), its outline inside the edge, its corners rounded. */
+function renderShapedSwatch(g, fill, ink) {
+    const border = g.stroke > 0 ? `border:${g.stroke.toFixed(2)}px solid ${ink};` : '';
+    const radius = g.radius > 0 ? `border-radius:${g.radius.toFixed(3)}px;` : '';
+    return (`<span aria-hidden="true" style="position:absolute;left:${g.x.toFixed(3)}px;top:${g.y.toFixed(3)}px;` +
+        `width:${g.side.toFixed(3)}px;height:${g.side.toFixed(3)}px;box-sizing:border-box;` +
+        `${border}${radius}${fill ? `background:${fill};` : ''}"></span>`);
 }
 /**
  * An inline symbol (`:icon[alt]{…}`, #1058) on its line, its box standing
@@ -1669,7 +1685,7 @@ function designTextDotsHtml(block, dots) {
         let x = line.xOffset;
         for (const i of order) {
             const run = runs[i];
-            if (!run.leader) {
+            if (!run.leader && !run.chip) {
                 const svg = textDotsSvg(run.text, run.fontString, dots, block.color, x + (run.inkOffset ?? 0), baseline + (run.baselineShift ?? 0), block.letterSpacingPx ?? 0, run.rtl === true);
                 if (svg === null)
                     return null;
@@ -1935,9 +1951,11 @@ function turnedCellHtml(run, advance, tracking) {
  * `content` is placed inside that one with physical `top` (along the line)
  * and `right` (from the box's physical right edge, the flow's top).
  */
-function uprightBox(left, top, width, height, decl, content, attrs = '') {
+function uprightBox(left, top, width, height, decl, content, attrs = '', sideways = '') {
     return (`<div${attrs ? ` ${attrs}` : ''} style="position:absolute;left:${left.toFixed(3)}px;top:${top.toFixed(3)}px;width:${Math.max(0, width).toFixed(3)}px;height:${height.toFixed(3)}px;">` +
         uprightInner(width, height, decl, content) +
+        // What is set in the turned flow itself (a chip, #1162): sideways.
+        sideways +
         `</div>`);
 }
 /** The box of {@link uprightBox} turned back upright: `height` wide on the
@@ -2065,7 +2083,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));
+            sideways.push(renderSwatchSegment(seg.swatch, x, line.baseline - line.bbox.y, seg.width, block.color, undefined, seg.rtl === true));
             x += seg.width;
             continue;
         }
@@ -2203,7 +2221,18 @@ function verticalDesignLines(block, v, originX, originY) {
         const runs = line.runs ?? [{ text: line.text, fontString: block.fontString, width: line.width }];
         let x = 0;
         const inner = [];
+        const sideways = [];
         for (const run of runs) {
+            // A heading title's chip (#1162): turned with the column, as the
+            // canvas and the PDF paint it, its baseline the line's (0.8 of the
+            // size under the top of a box one line high).
+            if (run.chip) {
+                sideways.push(`<span style="position:absolute;left:0;top:${(line.baselineY - top - size * 0.8).toFixed(3)}px;font:${font};line-height:1;color:${block.color};">`
+                    + renderChip(run.chip, x + (run.inkOffset ?? 0), size * 0.8, font, block.color, () => block.color)
+                    + '</span>');
+                x += run.width;
+                continue;
+            }
             const runFont = quoteFontString(run.fontString);
             // A dash of a 破折号 (`inkScale`, #652): turned with the flow and
             // stretched down the column, as a body segment's is.
@@ -2218,7 +2247,7 @@ function verticalDesignLines(block, v, originX, originY) {
         const width = Math.max(line.width, x);
         const decl = `font:${font};color:${block.color};${hasCJK(line.text) ? cjkTextDecl(tracked) : tracked ? ligaturesDecl() : ''}`
             + (line.wordSpacingPx ? `word-spacing:${line.wordSpacingPx.toFixed(3)}px;` : '');
-        parts.push(uprightBox(originX + line.xOffset, originY + top, width, h, decl, inner.join('')));
+        parts.push(uprightBox(originX + line.xOffset, originY + top, width, h, decl, inner.join(''), '', sideways.join('')));
     }
     return parts.join('');
 }
@@ -2299,7 +2328,7 @@ paint) {
                 continue;
             }
             if (seg.kind === 'swatch') {
-                parts.push(renderSwatchSegment(seg.swatch, x, line.baseline - line.bbox.y, seg.width, color, paint));
+                parts.push(renderSwatchSegment(seg.swatch, x, line.baseline - line.bbox.y, seg.width, color, paint, seg.rtl === true));
                 x += seg.width;
                 continue;
             }
@@ -2762,7 +2791,7 @@ function renderBoxAt(bbox, style) {
 function isPlainRun(line, block) {
     const run = line.runs?.length === 1 ? line.runs[0] : undefined;
     return run !== undefined && line.order === undefined && run.text === line.text && run.fontString === block.fontString && !hasCJK(run.text)
-        && !run.baselineShift && !run.stacked && !run.tcy && !run.orientation && !run.rtl && run.inkOffset === undefined && run.inkScale === undefined;
+        && !run.baselineShift && !run.stacked && !run.tcy && !run.orientation && !run.rtl && run.inkOffset === undefined && run.inkScale === undefined && !run.chip;
 }
 function renderDesignTextBlock(block, options) {
     const parts = [];
@@ -2799,6 +2828,16 @@ function renderDesignTextBlock(block, options) {
         const inner = words !== undefined ? words
             : line.runs
                 ? line.runs.map((run, i) => {
+                    // A heading title's chip (#1162): a box as wide as its advance
+                    // at the top of the line, holding the chip's box and words where
+                    // the line's baseline is (0.8 of the size down, as the line is
+                    // placed).
+                    if (run.chip) {
+                        const indent = run.inkOffset ? run.inkOffset : 0;
+                        return `<span style="display:inline-block;vertical-align:top;position:relative;width:${run.width.toFixed(3)}px;height:1em;">`
+                            + renderChip(run.chip, indent, fontSize * 0.8, font, block.color, () => block.color, options?.dir ?? 'ltr')
+                            + '</span>';
+                    }
                     const runFont = quoteFontString(run.fontString);
                     const cjkDecl = hasCJK(run.text) ? cjkTextDecl(tracked) : '';
                     // The `font` shorthand resets `line-height` to `normal`: a run in
@@ -2832,7 +2871,9 @@ function renderDesignTextBlock(block, options) {
                     // A contents part row's leader (#889): painted, hidden from
                     // assistive technology, as an entry row's is.
                     const hidden = run.leader ? ' aria-hidden="true"' : '';
-                    return fontDecl || cjkDecl || stackDecl || shiftDecl || boxDecl || hidden ? `<span${hidden} style="${fontDecl}${cjkDecl}${cellsDecl}${stackDecl}${shiftDecl}${boxDecl}">${text}</span>` : text;
+                    // In a colour of its own when the contents give it one (#1121).
+                    const colorDecl = run.color ? `color:${run.color};` : '';
+                    return fontDecl || cjkDecl || stackDecl || shiftDecl || boxDecl || hidden || colorDecl ? `<span${hidden} style="${fontDecl}${cjkDecl}${cellsDecl}${stackDecl}${shiftDecl}${boxDecl}${colorDecl}">${text}</span>` : text;
                 }).join('')
                 : letterlessRunHtml(line.text, block.fontString, false, line.width, block.letterSpacingPx ?? 0) ?? wordsHtml(line.text, trackedIn(block.fontString, block.letterSpacingPx));
         // A line that carries directions (an order, a right-to-left run): a box
@@ -2840,7 +2881,7 @@ function renderDesignTextBlock(block, options) {
         // than as its text at its advance (a stacked script, a box of the CJK
         // composer).
         const apartable = line.runs !== undefined
-            && line.runs.every((run) => !run.stacked && run.inkOffset === undefined && run.inkScale === undefined && !run.tcy && !run.orientation);
+            && line.runs.every((run) => !run.stacked && run.inkOffset === undefined && run.inkScale === undefined && !run.tcy && !run.orientation && !run.chip);
         // So is a line of several runs with no CJK text, in a document shaped
         // in its own language: the canvas starts each run where the widths
         // before it end, and inline every run, every space in its box and