postext 1.28.5 → 1.29.0

package/dist/html-backend.js

@@ -7,7 +7,7 @@ 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 } from './locale';
+import { isJapaneseLanguage, renderLangOf, shapingLanguageOf } from './locale';
 import { hasCJK } from './measure/cjk';
 import { markerRuns } from './bidi';
 import { joiningScriptIn } from './measure/joining';
@@ -21,6 +21,7 @@ import { playMarkTriangle, qrModuleRuns } from './pipeline/videoOverlay';
 import { isHlsMimeType, mediaFragment, videoElementAttributes, videoEmbedAllow } from './video/url';
 import { renderComicHtml } from './htmlComic';
 import { comicBlockOnSheet, pageComics } from './comics/transform';
+import { taskBoxSvgBody, taskBoxText } from './taskBox';
 /**
  * Declarations of every box of CJK text measured with no punctuation
  * trimming: the browser adds and removes nothing. Chrome's
@@ -1073,7 +1074,34 @@ function arabicMarkNeeded(text) {
     const arabic = markerRuns(text, 'rtl-arabic');
     return plain.length !== arabic.length || plain.some((r, i) => r.text !== arabic[i].text);
 }
+/**
+ * The box of a task item (`VDTBlock.bulletBox`, #765): an inline SVG the
+ * size of the box, from `bulletOffsetX` and centred on `bulletY`, in the
+ * marker's colour. Its holder is an image named ☐ or ☑, which is what
+ * assistive technology reads, and holds that character as text of no
+ * size, so a selection copies it as it copied the character the box
+ * stands for. On a vertical page the tick is drawn turned back
+ * (`vertical`); on a right-to-left one the flow's own rule turns every
+ * `svg` back.
+ */
+function renderTaskBox(block, vertical = false) {
+    const box = block.bulletBox;
+    const firstLine = block.lines[0];
+    if (!box || block.bulletOffsetX === undefined || !firstLine)
+        return '';
+    const { side, stroke, checked } = box;
+    const top = (block.bulletY ?? firstLine.baseline) - side / 2;
+    const mark = esc(taskBoxText(checked));
+    return (`<div class="pt-bullet pt-task-box" role="img" aria-label="${mark}" style="position:absolute;` +
+        `left:${block.bulletOffsetX}px;top:${top}px;width:${side}px;height:${side}px;` +
+        `color:${block.bulletColor ?? block.color};font-size:0;">` +
+        `<svg aria-hidden="true" focusable="false" viewBox="0 0 100 100" width="${side}" height="${side}" style="position:absolute;left:0;top:0;">` +
+        taskBoxSvgBody(stroke / side, checked, vertical ? 'vertical' : undefined) +
+        `</svg>${mark}</div>`);
+}
 function renderBullet(block, rootDir = 'ltr') {
+    if (block.type === 'listItem' && block.bulletBox)
+        return renderTaskBox(block);
     if (block.type !== 'listItem' ||
         !block.bulletText ||
         block.bulletOffsetX === undefined) {
@@ -1448,6 +1476,8 @@ function renderVerticalMarker(cls, x, block, v, fontString, color, text) {
     return uprightBox(x, lineTop, width, h, decl, verticalSpan(0, axis, verticalTextHtml(text, v, undefined, fontString)), `class="${cls}" aria-hidden="true"`);
 }
 function renderVerticalBullet(block, v) {
+    if (block.type === 'listItem' && block.bulletBox)
+        return renderTaskBox(block, true);
     if (block.type !== 'listItem' || !block.bulletText || block.bulletOffsetX === undefined || !block.lines[0])
         return '';
     const bulletFont = block.bulletFontString ?? block.fontString;
@@ -2307,7 +2337,7 @@ verticalRegion, verticalDigits) {
     // that mounts them apart from the document's root (#379); so do a
     // Japanese document's, whose glyph forms (a pan-CJK face's `locl`) and
     // vertical forms the browser picks by language (#428).
-    const pageAttrs = (options.dir === 'rtl' ? ' dir="rtl"' : '') + (options.lang ? ` lang="${options.lang}"` : '');
+    const pageAttrs = (options.dir === 'rtl' ? ' dir="rtl"' : '') + (options.lang !== undefined ? ` lang="${options.lang}"` : '');
     const outerHtml = `<div class="pt-page" id="${pageElementId((options.pageIndexOffset ?? 0) + page.index)}" data-page="${page.index}"${pageAttrs} style="` +
         `position:relative;` +
         `width:${page.width}px;` +
@@ -2396,7 +2426,13 @@ export function renderToHtmlIndexed(doc, options = {}) {
     // browser resolves the text of every box in that direction unless the
     // box declares its own (see `dirAttr`).
     const rtl = doc.config.direction === 'rtl';
-    const docLang = renderLangOf(doc.config);
+    // The language the document was measured in is the one its HTML
+    // declares (#764): the browser shapes the text in it, on a page in any
+    // other. A document with no language to name (`shapingLanguageOf` gives
+    // the empty tag) says `lang=""`, no language, as it was measured; one
+    // shaped in the host's declares what it did up to postext 1.28.
+    const shapedIn = shapingLanguageOf(doc.config);
+    const docLang = shapedIn ?? renderLangOf(doc.config);
     // A right-bound book lays its pages out right to left in a row: a row
     // already runs that way in a right-to-left root.
     const reversed = (doc.binding === 'right') !== rtl;
@@ -2421,7 +2457,11 @@ export function renderToHtmlIndexed(doc, options = {}) {
         ...(doc.anchors ? { anchors: doc.anchors } : {}),
         pageIndexOffset: doc.pageIndexOffset ?? 0,
         ...(docLang ? { rootLang: docLang } : {}),
-        ...(rtl ? { dir: 'rtl', ...(docLang ? { lang: docLang } : {}) } : isJapaneseLanguage(docLang) ? { lang: docLang } : {}),
+        // Every page says its language, for a host that mounts it apart from
+        // the document's root; up to postext 1.28 only a right-to-left and a
+        // Japanese one did.
+        ...(rtl ? { dir: 'rtl' } : {}),
+        ...(docLang !== undefined && (shapedIn !== undefined || rtl || isJapaneseLanguage(docLang)) ? { lang: docLang } : {}),
     };
     const bleedInset = doc.trimOffset > 0
         ? Math.max(0, doc.trimOffset - dimensionToPx(doc.config.page.cutLines.bleed, doc.config.page.dpi))
@@ -2460,7 +2500,7 @@ export function renderToHtmlIndexed(doc, options = {}) {
     // browser picks the region's glyph forms, and so does a right-to-left one,
     // with its direction (see `renderLangOf`).
     const reset = rtl ? HTML_TEXT_RESET.replace('direction:ltr;', 'direction:rtl;') : HTML_TEXT_RESET;
-    const html = `<div class="pt-doc"${docLang ? ` lang="${docLang}"` : ''}${rtl ? ' dir="rtl"' : ''} data-mode="${mode}" style="${reset}${docStyle}">` +
+    const html = `<div class="pt-doc"${docLang !== undefined ? ` lang="${docLang}"` : ''}${rtl ? ' dir="rtl"' : ''} data-mode="${mode}" style="${reset}${docStyle}">` +
         pageHtmlParts.join('') +
         `</div>`;
     return { html, mode, pages: indexedPages };