postext 1.8.6 → 1.9.0

package/dist/html-backend.js

@@ -2,7 +2,48 @@ import { footnoteRuleSegments } from './columnRule';
 import { tableCellFillRects, tableFrameOutline } from './vdt';
 import { dimensionToPx } from './units';
 import { documentInkHex, isSingleInkSvgUrl, singleInkColorMatrix } from './svg/singleInk';
-import { lineTrailingTracking } from './lineInk';
+import { lineInkExtent, lineTrailingTracking } from './lineInk';
+import { CHARACTER_GRID_COLOR, cjkGridCells } from './pipeline/cjkGrid';
+import { renderLangOf } from './locale';
+import { hasCJK } from './measure/cjk';
+import { DEFAULT_CENTRAL_BASELINE } from './vdt';
+import { holdsTurnedMark, segmentOrientation, verticalRuns } from './writingMode';
+import { graphemesOf } from './measure/graphemes';
+import { fontFamilyOf } from './measure/vertical';
+import { lineMarksHtml, rubyHtml, verticalLineMarksHtml, warichuHtml } from './htmlAnnotations';
+/**
+ * Declarations of every box of CJK text measured with no punctuation
+ * trimming: the browser adds and removes nothing. Chrome's
+ * `text-spacing-trim: normal` (and fonts' `chws`) would set the first of
+ * two marks that meet half width (`）》`, `”“`), and `text-autospace` would
+ * add space between Han and Latin, where the layout measured them apart
+ * (`measureTextWidth`, `markCuts`) and the CJK composer adjusted the marks
+ * itself; the renderers position what it set. Set on a line of the CJK
+ * composer (`VDTLine.cjkComposed`), on each word of another line that holds
+ * CJK text (each was measured alone), on a design text line or run and a
+ * list marker that holds CJK text. Absent from any other box, so the
+ * output of other documents is unchanged.
+ */
+const CJK_TEXT_DECL = "text-spacing-trim:space-all;text-autospace:no-autospace;font-feature-settings:'chws' 0,'halt' 0,'vchw' 0;";
+/** The part of {@link CJK_TEXT_DECL} a `font` shorthand resets: repeated
+ *  after it on an inner box in another face. */
+const CJK_FEATURES_DECL = "font-feature-settings:'chws' 0,'halt' 0,'vchw' 0;";
+/** A dash of a 破折号 stretched over its em (`VDTLineSegment.inkScale`):
+ *  scaled from its start, with the glyph the layout measured. Under
+ *  `lang="zh-Hans"` a face may swap its own Chinese form in (`locl`: Noto
+ *  Serif SC's full-width dash), which the scale was not computed for. */
+const DASH_FEATURES_DECL = "font-feature-settings:'chws' 0,'halt' 0,'vchw' 0,'locl' 0;";
+const inkScaleDecl = (scale) => `transform:scaleX(${scale.toFixed(4)});transform-origin:0 0;${DASH_FEATURES_DECL}`;
+/** Whether a line box carries {@link CJK_TEXT_DECL}: a line of the CJK
+ *  composer, which it measured character by character, or a line with no
+ *  segments (one span) holding CJK text. A word-by-word line holding CJK
+ *  text sets it on the words that hold some (`segmentCjk`). */
+function lineCjkDecl(line) {
+    return line.cjkComposed === true || ((!line.segments || line.segments.length === 0) && hasCJK(line.text));
+}
+function segmentCjk(seg, lineDecl) {
+    return lineDecl ? 'line' : hasCJK(seg.text) ? 'own' : false;
+}
 /**
  * The resources this document anchors in its HTML (`id="pt-res-<id>"`):
  * those whose embed (a first slice, for a split table) is on one of its
@@ -152,7 +193,45 @@ function renderMathSegmentSvg(seg, xPx, line, block) {
  *  which aligns on that baseline without growing or shifting the line
  *  box. A face with other vertical metrics would otherwise float its own
  *  baseline higher or lower than the surrounding text. */
-function renderTextSegment(seg, x, top, fontDecl, colorDecl, color) {
+function renderTextSegment(seg, x, top, fontDecl, colorDecl, color, 
+/** The tracking the line box already carries (block + line); a segment's
+ *  own (a justified CJK line) is added to it. */
+tracking = 0, 
+/** Whether the browser's punctuation spacing is off for the segment
+ *  (see {@link CJK_TEXT_DECL}): set by its line (`'line'`) or on its own
+ *  box (`'own'`); a box in another face repeats the features either way. */
+cjk = false) {
+    const spacingDecl = seg.tracking !== undefined ? `letter-spacing:${tracking + seg.tracking}px;` : '';
+    // A compressed CJK mark is painted before its box (`inkOffset`).
+    const left = seg.inkOffset !== undefined ? x + seg.inkOffset : x;
+    const scaleDecl = seg.inkScale !== undefined ? inkScaleDecl(seg.inkScale) : '';
+    const pos = `position:absolute;left:${left.toFixed(3)}px;top:${top};white-space:pre;${spacingDecl}${cjk === 'own' ? CJK_TEXT_DECL : ''}${scaleDecl}`;
+    // Text set with emphasis dots is emphasis (#193); the dots are the
+    // line's marks.
+    const text = seg.cjkMarks?.dots ? `<em style="font-style:inherit;">${esc(seg.text)}</em>` : esc(seg.text);
+    const featuresDecl = !fontDecl ? '' : scaleDecl ? DASH_FEATURES_DECL : cjk ? CJK_FEATURES_DECL : '';
+    if (seg.refResourceId !== undefined) {
+        // Anchors carry an explicit color so the UA link blue never leaks in.
+        const inner = `<a href="${refAnchorHref(seg.refResourceId)}" style="text-decoration:none;${fontDecl}${featuresDecl}${fontDecl ? 'line-height:0;' : ''}color:${color};">${text}</a>`;
+        return `<span style="${pos}">${inner}</span>`;
+    }
+    if (fontDecl) {
+        return `<span style="${pos}"><span style="${fontDecl}${featuresDecl}line-height:0;${colorDecl}">${text}</span></span>`;
+    }
+    return `<span style="${pos}${colorDecl}">${text}</span>`;
+}
+/**
+ * {@link renderTextSegment} for a segment of a line set word by word (not
+ * `VDTLine.cjkComposed`), which carries none of the composer's fields
+ * (`tracking`, `inkOffset`, `inkScale`): the markup every such segment had
+ * before the CJK features. One that holds CJK text (`cjk`) or carries
+ * Chinese marks goes to {@link renderMarkedWordSegment}: the browser's
+ * punctuation spacing off on its own box (see {@link CJK_TEXT_DECL}), its
+ * text in `<em>` when it is set with emphasis dots.
+ */
+function renderWordTextSegment(seg, x, top, fontDecl, colorDecl, color, cjk) {
+    if (cjk || seg.cjkMarks)
+        return renderMarkedWordSegment(seg, x, top, fontDecl, colorDecl, color, cjk);
     const pos = `position:absolute;left:${x.toFixed(3)}px;top:${top};white-space:pre;`;
     const text = esc(seg.text);
     if (seg.refResourceId !== undefined) {
@@ -165,6 +244,24 @@ function renderTextSegment(seg, x, top, fontDecl, colorDecl, color) {
     }
     return `<span style="${pos}${colorDecl}">${text}</span>`;
 }
+/** {@link renderWordTextSegment} for a segment that holds CJK text (`cjk`)
+ *  or carries Chinese marks. */
+function renderMarkedWordSegment(seg, x, top, fontDecl, colorDecl, color, cjk) {
+    const pos = `position:absolute;left:${x.toFixed(3)}px;top:${top};white-space:pre;${cjk ? CJK_TEXT_DECL : ''}`;
+    // Text set with emphasis dots is emphasis (#193); the dots are the
+    // line's marks.
+    const text = seg.cjkMarks?.dots ? `<em style="font-style:inherit;">${esc(seg.text)}</em>` : esc(seg.text);
+    const featuresDecl = fontDecl && cjk ? CJK_FEATURES_DECL : '';
+    if (seg.refResourceId !== undefined) {
+        // Anchors carry an explicit color so the UA link blue never leaks in.
+        const inner = `<a href="${refAnchorHref(seg.refResourceId)}" style="text-decoration:none;${fontDecl}${featuresDecl}${fontDecl ? 'line-height:0;' : ''}color:${color};">${text}</a>`;
+        return `<span style="${pos}">${inner}</span>`;
+    }
+    if (fontDecl) {
+        return `<span style="${pos}"><span style="${fontDecl}${featuresDecl}line-height:0;${colorDecl}">${text}</span></span>`;
+    }
+    return `<span style="${pos}${colorDecl}">${text}</span>`;
+}
 /** A `:ref` painted as several runs (a label in small capitals: one run per
  *  case) from `segs[start]` on. Every run is placed as measured, and all of
  *  them sit in one anchor, so the reference stays one link. `paint` renders
@@ -212,7 +309,20 @@ function linkRuns() {
 function segmentHref(seg) {
     return seg.refResourceId === undefined ? seg.href : undefined;
 }
+/**
+ * The segments of a horizontal line. A line of the CJK composer goes to
+ * {@link renderComposedSegments}. Any other line was set word by word and
+ * carries none of the composer's fields (a segment's `tracking`,
+ * `inkOffset`, `inkScale`, `hangs`, `autospace`, `ruby`, `warichu`): its
+ * markup is the one every line had before the CJK features, the browser's
+ * punctuation spacing turned off on each segment that holds CJK text. Only
+ * a line whose text holds CJK characters has its segments looked into: the
+ * line's `text` holds the text of every segment, except the leader of a
+ * contents entry (`tocEntry`).
+ */
 function renderSegments(line, block, targets) {
+    if (line.cjkComposed)
+        return renderComposedSegments(line, block, targets);
     // The tracking after the last glyph is advance, not ink: centring and
     // right alignment leave it out (EF-153), as the canvas does.
     const trailing = lineTrailingTracking(line, (block.letterSpacing ?? 0) + (line.letterSpacing ?? 0));
@@ -255,13 +365,14 @@ function renderSegments(line, block, targets) {
     const links = linkRuns();
     let x = leadingGap;
     const segs = line.segments;
+    const cjk = block.tocEntry !== undefined || hasCJK(line.text);
     const paintText = (seg, at, inLink = false) => {
         const font = quoteFontString(pickSegmentFont(seg, block));
         const color = pickSegmentColor(seg, block);
         const fontDecl = font !== quoteFontString(block.fontString) ? `font:${font};` : '';
         const colorDecl = color !== block.color ? `color:${color};` : '';
         const top = seg.baselineShift ? `${seg.baselineShift.toFixed(3)}px` : '0';
-        return renderTextSegment(inLink ? { ...seg, refResourceId: undefined } : seg, at, top, fontDecl, colorDecl, color);
+        return renderWordTextSegment(inLink ? { ...seg, refResourceId: undefined } : seg, at, top, fontDecl, colorDecl, color, cjk && hasCJK(seg.text));
     };
     for (let i = 0; i < segs.length; i++) {
         const seg = segs[i];
@@ -296,6 +407,116 @@ function renderSegments(line, block, targets) {
         x += seg.width;
     }
     parts.push(links.end());
+    // Emphasis dots, proper-name and book-title lines (#193).
+    if (line.marks)
+        parts.push(lineMarksHtml(line, block.color));
+    return parts.join('');
+}
+/** {@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) {
+    // 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);
+    const trailing = lineTrailingTracking(line, lineTracking);
+    if (!line.segments || line.segments.length === 0) {
+        const plainIndent = line.bbox.x - block.bbox.x;
+        const plainWidth = line.bbox.width - trailing;
+        const plainLeft = block.textAlign === 'right'
+            ? Math.max(0, block.bbox.width - plainIndent - plainWidth)
+            : block.textAlign === 'center'
+                ? Math.max(0, (block.bbox.width - plainIndent - plainWidth) / 2)
+                : 0;
+        return `<span style="position:absolute;left:${plainLeft.toFixed(3)}px;top:0;white-space:pre;">${esc(line.text)}</span>`;
+    }
+    // Match canvas justification: stretch inter-word spaces to fill effective width.
+    const lineIndent = line.bbox.x - block.bbox.x;
+    const effectiveWidth = block.bbox.width - lineIndent;
+    let wordWidth = 0;
+    let spaceCount = 0;
+    for (const seg of line.segments) {
+        // A hung mark is outside the measure; a Han–Latin space keeps its
+        // width.
+        if (seg.hangs)
+            continue;
+        if (seg.kind === 'space' && !seg.autospace)
+            spaceCount++;
+        else
+            wordWidth += seg.width;
+    }
+    const contentWidth = lineInkExtent(line, 0).width;
+    // Last lines render ragged at natural width — except when overfull:
+    // Knuth-Plass may accept a final line wider than the measure on the
+    // assumption that its inter-word glue shrinks (TeX glue-setting semantics),
+    // so honor that by compressing the spaces to fit the measure exactly.
+    const useJustify = block.textAlign === 'justify' && spaceCount > 0 &&
+        ((!line.isLastLine && !line.ragged) || contentWidth > effectiveWidth);
+    const justifiedSpaceWidth = useJustify
+        ? (effectiveWidth - wordWidth) / spaceCount
+        : 0;
+    // Centred / right alignment — math display blocks, ragged-left paragraph
+    // styles. Distribute the leading gap.
+    const slack = Math.max(0, effectiveWidth - (contentWidth - trailing));
+    const leadingGap = block.textAlign === 'center' ? slack / 2 : block.textAlign === 'right' ? slack : 0;
+    const parts = [];
+    const links = linkRuns();
+    let x = leadingGap;
+    const segs = line.segments;
+    const lineDecl = lineCjkDecl(line);
+    const paintText = (seg, at, inLink = false) => {
+        const font = quoteFontString(pickSegmentFont(seg, block));
+        const color = pickSegmentColor(seg, block);
+        const fontDecl = font !== quoteFontString(block.fontString) ? `font:${font};` : '';
+        const colorDecl = color !== block.color ? `color:${color};` : '';
+        const top = seg.baselineShift ? `${seg.baselineShift.toFixed(3)}px` : '0';
+        return renderTextSegment(inLink ? { ...seg, refResourceId: undefined } : seg, at, top, fontDecl, colorDecl, color, lineTracking, segmentCjk(seg, lineDecl));
+    };
+    for (let i = 0; i < segs.length; i++) {
+        const seg = segs[i];
+        if (seg.kind === 'space') {
+            x += useJustify && !seg.autospace ? justifiedSpaceWidth : seg.width;
+            continue;
+        }
+        parts.push(links.at(segmentHref(seg)));
+        if (seg.kind === 'math') {
+            parts.push(renderMathSegmentSvg(seg, x, line, block));
+            x += seg.width;
+            continue;
+        }
+        if (seg.kind === 'swatch') {
+            parts.push(renderSwatch(x, line.baseline - line.bbox.y, seg.width, seg.swatch?.color, block.color));
+            x += seg.width;
+            continue;
+        }
+        if (seg.chip) {
+            parts.push(renderChip(seg.chip, x, line.baseline - line.bbox.y, quoteFontString(block.fontString), block.color, (run) => pickSegmentColor({ kind: 'text', text: run.text, width: run.width, bold: run.bold, italic: run.italic }, block)));
+            x += seg.width;
+            continue;
+        }
+        if (seg.warichu) {
+            // A warichu note's part: its two rows (#195).
+            parts.push(warichuHtml(seg.warichu, x, pickSegmentColor(seg, block), quoteFontString));
+            x += seg.width;
+            continue;
+        }
+        if (seg.refResourceId !== undefined && segs[i + 1]?.refContinues) {
+            const group = renderRefRuns(segs, i, x, pickSegmentColor(seg, block), (run, at) => paintText(run, at, true), refLinks(seg.refResourceId, targets));
+            parts.push(group.html);
+            x = group.x;
+            i = group.end - 1;
+            continue;
+        }
+        parts.push(paintText(seg, x, seg.refResourceId !== undefined && !refLinks(seg.refResourceId, targets)));
+        // A ruby base's reading (#194).
+        if (seg.ruby)
+            parts.push(rubyHtml(seg.ruby, x, pickSegmentColor(seg, block), quoteFontString));
+        x += seg.width;
+    }
+    parts.push(links.end());
+    // Emphasis dots, proper-name and book-title lines (#193).
+    if (line.marks)
+        parts.push(lineMarksHtml(line, block.color));
     return parts.join('');
 }
 /** Inline colour swatch (`:swatch{…}`): a square of `side` px on the line's
@@ -330,7 +551,8 @@ function renderChip(chip, x, baselineOffset, lineFont, lineColor, inkFor) {
         const fontDecl = font !== lineFont ? `font:${font};` : '';
         const colorDecl = color !== lineColor ? `color:${color};` : '';
         const top = run.baselineShift ? `${run.baselineShift.toFixed(3)}px` : '0';
-        parts.push(renderTextSegment({ kind: 'text', text: run.text, width: run.width }, tx, top, fontDecl, colorDecl, color));
+        // A chip's runs were measured one by one, as a whole each.
+        parts.push(renderTextSegment({ kind: 'text', text: run.text, width: run.width }, tx, top, fontDecl, colorDecl, color, 0, hasCJK(run.text) ? 'own' : false));
         tx += run.width;
     }
     return parts.join('');
@@ -367,14 +589,20 @@ function renderBullet(block) {
         `font:${onBaseline ? lineFont : font};` +
         `color:${color};` +
         `white-space:pre;` +
+        (hasCJK(text) ? CJK_TEXT_DECL : '') +
         (onBaseline
-            ? `"><span style="font:${font};line-height:0;">${esc(text)}</span></div>`
+            ? `"><span style="font:${font};${hasCJK(text) ? CJK_FEATURES_DECL : ''}line-height:0;">${esc(text)}</span></div>`
             : `">${esc(text)}</div>`);
     let html = markerDiv('pt-bullet', block.bulletOffsetX, bulletFont, bulletColor, block.bulletText);
     // Ordered-list separator styled apart from the number (own font/colour).
     if (block.separatorText && block.separatorX !== undefined) {
         const separatorFont = quoteFontString(block.separatorFontString ?? block.bulletFontString ?? block.fontString);
         const separatorColor = block.separatorColor ?? bulletColor;
+        // The prefix run before the number, in the separator's style, first in
+        // the markup so a copy reads （一）.
+        if (block.prefixText && block.prefixX !== undefined) {
+            html = markerDiv('pt-separator', block.prefixX, separatorFont, separatorColor, block.prefixText) + html;
+        }
         html += markerDiv('pt-separator', block.separatorX, separatorFont, separatorColor, block.separatorText);
     }
     return html;
@@ -396,8 +624,278 @@ function renderLine(line, block, targets) {
         `color:${block.color};` +
         strikethroughDecl +
         trackingDecl +
+        (lineCjkDecl(line) ? CJK_TEXT_DECL : '') +
         `">${renderSegments(line, block, targets)}</div>`);
 }
+// ---------------------------------------------------------------------------
+// Vertical text (`VDTPage.flow`)
+//
+// A vertical page's flow is rendered in a box turned a quarter turn
+// clockwise (`pt-flow`, see `renderPageDetailed`), so boxes, rules,
+// pictures, turned resource blocks and everything else of the flow land on
+// the sheet as the canvas paints them. Each text line is turned back
+// upright inside it — one box per line, the line's physical rectangle — and
+// set with `writing-mode: vertical-rl`: the browser stands Chinese
+// characters upright, takes the fonts' vertical forms and sets Latin words
+// sideways. Every segment is placed where the layout put it along the line
+// (`top`), its em boxes centred on the column's central axis; tate-chu-yoko
+// cells are `text-combine-upright: all`, `:upright` and `:sideways` runs
+// `text-orientation`.
+// ---------------------------------------------------------------------------
+/** The central axis of a font (em above the baseline). */
+function centralOf(v, fontString) {
+    return v.axes?.[fontFamilyOf(fontString)] ?? DEFAULT_CENTRAL_BASELINE;
+}
+/** Escaped text of a vertical run, with its tate-chu-yoko cells, the
+ *  orientation its author forced, and each turned mark in a box of its
+ *  cell ({@link turnedCellHtml}). `font` is the run's font string (whose
+ *  family's `dashes` stretch a dash) and `tracking` the letter spacing it
+ *  is set with, px, which follows each cell. */
+function verticalTextHtml(text, v, orient, font, tracking = 0) {
+    if (orient === 'tcy')
+        return `<span style="text-combine-upright:all;">${esc(text)}</span>`;
+    if (orient === 'upright')
+        return `<span style="text-orientation:upright;">${esc(text)}</span>`;
+    if (orient === 'sideways')
+        return `<span style="text-orientation:sideways;">${esc(text)}</span>`;
+    const digits = v.uprightDigits > 0 && /[0-9]/.test(text);
+    if (!digits && !holdsTurnedMark(text))
+        return esc(text);
+    const runs = verticalRuns(graphemesOf(text), v.region, v.uprightDigits);
+    if (!runs.some((r) => r.glyph.orient === 'tcy' || r.glyph.orient === 'rotate'))
+        return esc(text);
+    const advances = font !== undefined ? v.dashes?.[fontFamilyOf(font)] : undefined;
+    // A number in one cell combined upright; a turned mark in its cell.
+    return runs.map((r) => (r.glyph.orient === 'tcy'
+        ? `<span style="text-combine-upright:all;">${esc(r.text)}</span>`
+        : r.glyph.orient === 'rotate' ? turnedCellHtml(r, advances?.[r.text], tracking) : esc(r.text))).join('');
+}
+/**
+ * A mark a vertical line turns in a cell of its own (`rotate`: a dash, an
+ * ellipsis, an interpunct, a wave dash). The browser sets it sideways at
+ * its horizontal advance (Noto's · is a third of an em), where the layout
+ * gave it its cell (one em; half an em for the mainland interpunct), as
+ * the canvas and the PDF paint it: so it stands in a box the cell's
+ * length, centred in it, with the line's tracking after the box as after
+ * any cell. A dash is stretched to fill its cell, as they stretch it: by
+ * its advance the layout measured (`advance`, ems), with the glyph it
+ * measured (the face's Chinese form off, see {@link DASH_FEATURES_DECL});
+ * with no measured advance, in the font's full-width form (Noto's —).
+ */
+function turnedCellHtml(run, advance, tracking) {
+    const cell = run.cell ?? 1;
+    let inner = esc(run.text);
+    if (run.glyph.stretch) {
+        inner = advance !== undefined && advance > 0
+            ? `<span style="${advance < cell ? `transform:scaleY(${(cell / advance).toFixed(4)});` : ''}${DASH_FEATURES_DECL}">${inner}</span>`
+            : `<span style="font-variant-east-asian:full-width;">${inner}</span>`;
+    }
+    return `<span style="display:inline-flex;justify-content:center;inline-size:${cell}em;letter-spacing:0;${tracking !== 0 ? `margin-inline-end:${tracking}px;` : ''}">${inner}</span>`;
+}
+/**
+ * A box of the turned flow (`left`, `top`, `width` along the line,
+ * `height` across it) holding a box turned back upright, set vertically:
+ * `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 = '') {
+    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) +
+        `</div>`);
+}
+/** The box of {@link uprightBox} turned back upright: `height` wide on the
+ *  sheet, `width` tall, set vertically. */
+function uprightInner(width, height, decl, content) {
+    return (`<div style="position:absolute;left:0;top:0;width:${height.toFixed(3)}px;height:${Math.max(0, width).toFixed(3)}px;` +
+        `transform:translate(0,${height.toFixed(3)}px) rotate(-90deg);transform-origin:0 0;` +
+        `writing-mode:vertical-rl;text-orientation:mixed;${decl}">${content}</div>`);
+}
+/** A run of vertical text at `at` along its box, its em boxes centred
+ *  `axis` px from the box's flow top (the physical right edge). The
+ *  line height that centres them comes after `decl`: a `font` shorthand
+ *  in it resets `line-height` to `normal`. */
+function verticalSpan(at, axis, inner, decl = '') {
+    const lh = Math.max(0, 2 * axis);
+    return `<span style="position:absolute;top:${at.toFixed(3)}px;right:0;white-space:pre;${decl}line-height:${lh.toFixed(3)}px;">${inner}</span>`;
+}
+/** A run of vertical text whose em boxes are centred `axis` px from the
+ *  box's flow top, on either side of it (a ruby reading or a warichu row
+ *  sits outside the line's own box). */
+function verticalSpanAt(at, axis, size, inner, decl = '') {
+    const lh = Math.max(1, 2 * size);
+    return `<span aria-hidden="true" style="position:absolute;top:${at.toFixed(3)}px;right:${(axis - lh / 2).toFixed(3)}px;white-space:pre;${decl}line-height:${lh.toFixed(3)}px;">${inner}</span>`;
+}
+/** Annotation runs of a vertical line (a ruby reading, a warichu note's
+ *  rows, #194, #195) from `x` along it: set down the column in their own
+ *  face, centred across it on their baseline (`dy`) less their face's
+ *  axis, a zhuyin tone mark standing upright (`VDTAnnotationRun.upright`). */
+function verticalAnnotationRuns(runs, x, color, v, axisOf) {
+    return runs.map((run) => {
+        const decl = `font:${quoteFontString(run.fontString)};color:${run.color ?? color};letter-spacing:0;`;
+        return verticalSpanAt(x + run.dx, axisOf(run.fontString, run.dy), extractFontSizePx(run.fontString), verticalTextHtml(run.text, v, run.upright ? 'upright' : undefined, run.fontString), decl);
+    }).join('');
+}
+/** 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) {
+    const lineTracking = (block.letterSpacing ?? 0) + (line.letterSpacing ?? 0);
+    const trailing = lineTrailingTracking(line, lineTracking);
+    const lineIndent = line.bbox.x - block.bbox.x;
+    const effectiveWidth = block.bbox.width - lineIndent;
+    const baseline = line.baseline - line.bbox.y;
+    const blockFont = quoteFontString(block.fontString);
+    const axisOf = (fontString, shift = 0) => baseline + shift - centralOf(v, fontString) * extractFontSizePx(fontString);
+    const inner = [];
+    const sideways = [];
+    const segs = line.segments && line.segments.length > 0
+        ? line.segments
+        : [{ kind: 'text', text: line.text, width: line.bbox.width }];
+    let wordWidth = 0;
+    let spaceCount = 0;
+    for (const seg of segs) {
+        if (seg.hangs)
+            continue;
+        if (seg.kind === 'space' && !seg.autospace)
+            spaceCount++;
+        else
+            wordWidth += seg.width;
+    }
+    const contentWidth = line.segments && line.segments.length > 0 ? lineInkExtent(line, 0).width : line.bbox.width;
+    const useJustify = block.textAlign === 'justify' && spaceCount > 0
+        && ((!line.isLastLine && !line.ragged) || contentWidth > effectiveWidth);
+    const justifiedSpaceWidth = useJustify ? (effectiveWidth - wordWidth) / spaceCount : 0;
+    const slack = Math.max(0, effectiveWidth - (contentWidth - trailing));
+    let x = block.textAlign === 'center' ? slack / 2 : block.textAlign === 'right' ? slack : 0;
+    for (const seg of segs) {
+        if (seg.kind === 'space') {
+            x += useJustify && !seg.autospace ? justifiedSpaceWidth : seg.width;
+            continue;
+        }
+        if (seg.kind === 'math') {
+            sideways.push(renderMathSegmentSvg(seg, x, line, block));
+            x += seg.width;
+            continue;
+        }
+        if (seg.kind === 'swatch') {
+            sideways.push(renderSwatch(x, line.baseline - line.bbox.y, seg.width, seg.swatch?.color, block.color));
+            x += seg.width;
+            continue;
+        }
+        if (seg.chip) {
+            sideways.push(renderChip(seg.chip, x, line.baseline - line.bbox.y, blockFont, block.color, (run) => pickSegmentColor({ kind: 'text', text: run.text, width: run.width, bold: run.bold, italic: run.italic }, block)));
+            x += seg.width;
+            continue;
+        }
+        if (seg.warichu) {
+            // A warichu note's part: its two rows down the column, the upper
+            // row the right one, read once (#195).
+            const w = seg.warichu;
+            inner.push(`<span role="note" aria-label="${esc(w.upper + w.lower)}">${verticalAnnotationRuns(w.runs, x, w.color ?? pickSegmentColor(seg, block), v, axisOf)}</span>`);
+            x += seg.width;
+            continue;
+        }
+        const fontString = pickSegmentFont(seg, block);
+        const font = quoteFontString(fontString);
+        const color = pickSegmentColor(seg, block);
+        // A dash of a 破折号 (`inkScale`): turned with the flow (sideways) and
+        // stretched down the column from where the layout put its glyph, the
+        // face's own Chinese form off, as the canvas and the PDF paint it.
+        const stretched = seg.inkScale !== undefined;
+        const decl = (font !== blockFont ? `font:${font};` : '')
+            + (color !== block.color ? `color:${color};` : '')
+            + (seg.tracking !== undefined ? `letter-spacing:${lineTracking + seg.tracking}px;` : '')
+            + (stretched ? `transform:scaleY(${seg.inkScale.toFixed(4)});transform-origin:0 0;${DASH_FEATURES_DECL}` : '');
+        const segTracking = seg.tracking !== undefined ? lineTracking + seg.tracking : lineTracking;
+        let text = verticalTextHtml(seg.text, v, stretched ? 'sideways' : segmentOrientation(seg), fontString, segTracking);
+        // Text set with emphasis dots is emphasis (#193); the dots are the
+        // line's marks.
+        if (seg.cjkMarks?.dots)
+            text = `<em style="font-style:inherit;">${text}</em>`;
+        const href = seg.refResourceId !== undefined
+            ? (refLinks(seg.refResourceId, targets) ? refAnchorHref(seg.refResourceId) : undefined)
+            : seg.href;
+        if (href !== undefined)
+            text = `<a href="${esc(href)}" style="color:inherit;text-decoration:none;"${seg.href !== undefined && seg.refResourceId === undefined ? ' rel="noopener noreferrer"' : ''}>${text}</a>`;
+        inner.push(verticalSpan(x + (seg.inkOffset ?? 0), axisOf(fontString, seg.baselineShift ?? 0), text, decl));
+        // A ruby base's reading, beside the base (#194).
+        if (seg.ruby)
+            inner.push(verticalAnnotationRuns(seg.ruby.runs, x, seg.ruby.color ?? color, v, axisOf));
+        x += seg.width;
+    }
+    // Emphasis dots, proper-name and book-title lines (#193), in the turned
+    // flow with the line's box.
+    if (line.marks)
+        sideways.push(verticalLineMarksHtml(line, block.color));
+    const width = Math.max(line.bbox.width, effectiveWidth);
+    const decl = `font:${blockFont};color:${block.color};`
+        + (block.strikethroughText ? 'text-decoration:line-through;' : '')
+        + (lineTracking !== 0 ? `letter-spacing:${lineTracking}px;` : '')
+        + (lineCjkDecl(line) || hasCJK(line.text) ? CJK_TEXT_DECL : '');
+    return (`<div class="pt-line" data-block="${esc(block.id)}" style="position:absolute;left:${line.bbox.x}px;top:${line.bbox.y}px;width:${width}px;height:${line.bbox.height}px;">` +
+        uprightInner(width, line.bbox.height, decl, inner.join('')) +
+        sideways.join('') +
+        `</div>`);
+}
+/** A list marker of a vertical line (the bullet, the number, its prefix
+ *  and separator), set down the column from `x`. */
+function renderVerticalMarker(cls, x, block, v, fontString, color, text) {
+    const line = block.lines[0];
+    const size = extractFontSizePx(fontString);
+    const lineTop = line.bbox.y;
+    const h = line.bbox.height;
+    // A marker set as text sits on its baseline; a bullet is centred on
+    // `bulletY` (its axis).
+    const axis = block.bulletBaselineY !== undefined
+        ? block.bulletBaselineY - lineTop - centralOf(v, fontString) * size
+        : (block.bulletY ?? line.baseline) - lineTop;
+    const width = size * graphemesOf(text).length;
+    const decl = `font:${quoteFontString(fontString)};color:${color};${hasCJK(text) ? CJK_TEXT_DECL : ''}`;
+    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.bulletText || block.bulletOffsetX === undefined || !block.lines[0])
+        return '';
+    const bulletFont = block.bulletFontString ?? block.fontString;
+    const bulletColor = block.bulletColor ?? block.color;
+    let html = renderVerticalMarker('pt-bullet', block.bulletOffsetX, block, v, bulletFont, bulletColor, block.bulletText);
+    if (block.separatorText && block.separatorX !== undefined) {
+        const sepFont = block.separatorFontString ?? bulletFont;
+        const sepColor = block.separatorColor ?? bulletColor;
+        if (block.prefixText && block.prefixX !== undefined)
+            html = renderVerticalMarker('pt-separator', block.prefixX, block, v, sepFont, sepColor, block.prefixText) + html;
+        html += renderVerticalMarker('pt-separator', block.separatorX, block, v, sepFont, sepColor, block.separatorText);
+    }
+    return html;
+}
+/** The lines of a design text set vertically: in the flow of a vertical
+ *  page (an opener, a box title), or on its own (a running head set down
+ *  the fore-edge, `VDTDesignTextBlock.writingMode`) inside the block's own
+ *  turned frame. Each line's box runs from its baseline's line top. */
+function verticalDesignLines(block, v, originX, originY) {
+    const size = extractFontSizePx(block.fontString);
+    const font = quoteFontString(block.fontString);
+    const parts = [];
+    const h = size * 2;
+    for (const line of block.lines) {
+        const top = line.baselineY - size * 1.5;
+        const axisOf = (fontString, shift = 0) => size * 1.5 + shift - centralOf(v, fontString) * extractFontSizePx(fontString);
+        const runs = line.runs ?? [{ text: line.text, fontString: block.fontString, width: line.width }];
+        let x = 0;
+        const inner = [];
+        for (const run of runs) {
+            const runFont = quoteFontString(run.fontString);
+            const decl = runFont !== font ? `font:${runFont};` : '';
+            inner.push(verticalSpan(x, axisOf(run.fontString, run.baselineShift ?? 0), verticalTextHtml(run.text, v, segmentOrientation(run), run.fontString, block.letterSpacingPx ?? 0), decl));
+            x += run.width;
+        }
+        const width = Math.max(line.width, x);
+        const decl = `font:${font};color:${block.color};${hasCJK(line.text) ? CJK_TEXT_DECL : ''}`
+            + (line.wordSpacingPx ? `word-spacing:${line.wordSpacingPx.toFixed(3)}px;` : '');
+        parts.push(uprightBox(originX + line.xOffset, originY + top, width, h, decl, inner.join('')));
+    }
+    return parts.join('');
+}
 function pickResourceFont(seg, fonts) {
     if (seg.fontString)
         return seg.fontString;
@@ -416,8 +914,11 @@ function pickResourceFont(seg, fonts) {
 function renderResourceLine(line, fonts, color, linkColor, labelColor = color, targets) {
     const baseFont = quoteFontString(fonts.normal);
     const parts = [];
+    const lineDecl = lineCjkDecl(line);
     if (line.segments && line.segments.length > 0) {
         const segs = line.segments;
+        const composed = line.cjkComposed === true;
+        const cjk = !composed && hasCJK(line.text);
         const segColorOf = (seg) => (seg.refResourceId !== undefined
             ? linkColor
             : seg.captionLabel
@@ -429,7 +930,11 @@ function renderResourceLine(line, fonts, color, linkColor, labelColor = color, t
             const fontDecl = font !== baseFont ? `font:${font};` : '';
             const colorDecl = segColor !== color ? `color:${segColor};` : '';
             const top = seg.baselineShift ? `${seg.baselineShift.toFixed(3)}px` : '0';
-            return renderTextSegment(inLink ? { ...seg, refResourceId: undefined } : seg, at, top, fontDecl, colorDecl, segColor);
+            // A line set word by word as every line was before the CJK
+            // features (see `renderSegments`).
+            return composed
+                ? renderTextSegment(inLink ? { ...seg, refResourceId: undefined } : seg, at, top, fontDecl, colorDecl, segColor, line.letterSpacing ?? 0, segmentCjk(seg, lineDecl))
+                : renderWordTextSegment(inLink ? { ...seg, refResourceId: undefined } : seg, at, top, fontDecl, colorDecl, segColor, cjk && hasCJK(seg.text));
         };
         const links = linkRuns();
         let x = 0;
@@ -475,6 +980,7 @@ function renderResourceLine(line, fonts, color, linkColor, labelColor = color, t
         // A tracked line (a table header set with `headerLetterSpacing`) was
         // measured with the tracking in its widths.
         (line.letterSpacing ? `letter-spacing:${line.letterSpacing}px;` : '') +
+        (lineDecl ? CJK_TEXT_DECL : '') +
         `">${parts.join('')}</div>`);
 }
 /** An image fitted to a box: `<img>` from `resourceImageUrl`, or the neutral
@@ -593,10 +1099,13 @@ function renderResourceTable(rb, bx, by, options) {
     }
     return parts.join('');
 }
-function renderResourceBlockHtml(block, options) {
+function renderResourceBlockHtml(block, paint) {
     const rb = block.resourceBlock;
     if (!rb)
         return '';
+    // Its caption, notes and cells are horizontal text, in its own frame
+    // (upright on a vertical page).
+    const options = paint.vertical ? { ...paint, vertical: undefined } : paint;
     const parts = [];
     // A rotated block: its geometry is in the upright frame, emitted inside a
     // wrapper turned a quarter turn about the frame's origin on the page.
@@ -677,10 +1186,14 @@ function renderBoxAt(bbox, style) {
         boxStyleDecls(style) +
         `"></div>`);
 }
-function renderDesignTextBlock(block) {
+function renderDesignTextBlock(block, options) {
     const parts = [];
     if (block.box)
         parts.push(renderBoxAt(block.bbox, block.box));
+    if (options?.vertical)
+        return parts.join('') + renderVerticalDesignText(block, options.vertical);
+    if (block.vertical)
+        return parts.join('') + renderTurnedDesignText(block);
     const font = quoteFontString(block.fontString);
     const fontSize = extractFontSizePx(block.fontString);
     const lineParts = [];
@@ -690,17 +1203,21 @@ function renderDesignTextBlock(block) {
         // in its own font; a script is shifted off the baseline. Of a subscript
         // and a superscript set over each other, the first sits in a box that
         // takes no room and the second in one as wide as the pair (EF-80).
+        // Each run was measured whole, and so was a line without runs: the
+        // browser's punctuation trimming is off on those that hold CJK text.
         const inner = line.runs
             ? line.runs.map((run, i) => {
                 const runFont = quoteFontString(run.fontString);
+                const cjkDecl = hasCJK(run.text) ? CJK_TEXT_DECL : '';
                 const fontDecl = runFont !== font ? `font:${runFont};` : '';
                 const stackDecl = run.stacked
                     ? 'display:inline-block;width:0;'
                     : line.runs[i - 1]?.stacked ? `display:inline-block;min-width:${run.width.toFixed(3)}px;` : '';
                 const shiftDecl = run.baselineShift ? `position:relative;top:${run.baselineShift.toFixed(3)}px;` : '';
-                return fontDecl || stackDecl || shiftDecl ? `<span style="${fontDecl}${stackDecl}${shiftDecl}">${esc(run.text)}</span>` : esc(run.text);
+                return fontDecl || cjkDecl || stackDecl || shiftDecl ? `<span style="${fontDecl}${cjkDecl}${stackDecl}${shiftDecl}">${esc(run.text)}</span>` : esc(run.text);
             }).join('')
             : esc(line.text);
+        const lineDecl = !line.runs && hasCJK(line.text) ? CJK_TEXT_DECL : '';
         // A justified line: its word spaces widened as the canvas and the PDF
         // advance its runs (EF-109).
         const wordSpacingDecl = line.wordSpacingPx ? `word-spacing:${line.wordSpacingPx.toFixed(3)}px;` : '';
@@ -710,6 +1227,7 @@ function renderDesignTextBlock(block) {
             `top:${top.toFixed(3)}px;` +
             `line-height:1;white-space:pre;` +
             wordSpacingDecl +
+            lineDecl +
             `">${inner}</span>`);
     }
     const clipDecl = block.clip ? 'overflow:hidden;' : '';
@@ -732,6 +1250,40 @@ function renderDesignTextBlock(block) {
         `">${lineParts.join('')}</div>`);
     return parts.join('');
 }
+/** A design text of a vertical page's flow: its lines set down the
+ *  column, clipped, tracked and outlined as a horizontal one. A line's
+ *  `xOffset` is from the block's own edge (as in `renderDesignTextBlock`),
+ *  its `baselineY` in the flow: only the latter is taken back to the box. */
+function renderVerticalDesignText(block, v) {
+    const clipDecl = block.clip ? 'overflow:hidden;' : '';
+    const trackingDecl = block.letterSpacingPx ? `letter-spacing:${block.letterSpacingPx}px;` : '';
+    const strokeDecl = block.stroke && block.stroke.widthPx > 0
+        ? `-webkit-text-stroke:${block.stroke.widthPx}px ${block.stroke.color};` + (block.stroke.hollow ? '-webkit-text-fill-color:transparent;' : '')
+        : '';
+    const hidden = block.artifact ? ' aria-hidden="true"' : '';
+    return (`<div${hidden} style="position:absolute;left:${block.bbox.x}px;top:${block.bbox.y}px;width:${block.bbox.width}px;height:${block.bbox.height}px;${clipDecl}${trackingDecl}${strokeDecl}">` +
+        verticalDesignLines(block, v, 0, -block.bbox.y) +
+        `</div>`);
+}
+/** A design text set vertically on a page or slot whose text is
+ *  horizontal (`VDTDesignTextBlock.vertical`): its lines in the block's own
+ *  frame, turned a quarter turn clockwise about the box's top right corner,
+ *  each line turned back upright and set vertically. */
+function renderTurnedDesignText(block) {
+    const vt = block.vertical;
+    const v = { region: vt.region, uprightDigits: vt.uprightDigits, axes: vt.centralBaselines };
+    const clipDecl = block.clip ? 'overflow:hidden;' : '';
+    const trackingDecl = block.letterSpacingPx ? `letter-spacing:${block.letterSpacingPx}px;` : '';
+    const strokeDecl = block.stroke && block.stroke.widthPx > 0
+        ? `-webkit-text-stroke:${block.stroke.widthPx}px ${block.stroke.color};` + (block.stroke.hollow ? '-webkit-text-fill-color:transparent;' : '')
+        : '';
+    const hidden = block.artifact ? ' aria-hidden="true"' : '';
+    const { x, y, width, height } = block.bbox;
+    return (`<div${hidden} style="position:absolute;left:${x}px;top:${y}px;width:${width}px;height:${height}px;${clipDecl}${trackingDecl}${strokeDecl}">` +
+        `<div style="position:absolute;left:${width}px;top:0;width:${height}px;height:${width}px;transform:rotate(90deg);transform-origin:0 0;">` +
+        verticalDesignLines(block, v, 0, 0) +
+        `</div></div>`);
+}
 function renderDesignRuleBlock(block) {
     const w = block.direction === 'vertical' ? block.thicknessPx : block.bbox.width;
     const h = block.direction === 'vertical' ? block.bbox.height : block.thicknessPx;
@@ -747,8 +1299,11 @@ function renderDesignBoxBlock(block) {
     // A callout stripe on a rounded frame: clipped to the frame's outline.
     return block.clip ? clipToOutline(html, block.clip) : html;
 }
-/** Image block (e.g. a callout icon): `<img>` from `resourceImageUrl`, or a
- *  neutral placeholder box when the host cannot supply the image. */
+/** Image block (a callout icon, a picture a design draws): `<img>` from
+ *  `resourceImageUrl` — with its alternative text when it is content
+ *  (`VDTDesignImageBlock.altText`), else `alt=""` and
+ *  `role="presentation"` — or a neutral placeholder box when the host
+ *  cannot supply the image. */
 function renderDesignImageBlock(block, options) {
     const { x, y, width, height } = block.bbox;
     if (width <= 0 || height <= 0)
@@ -757,7 +1312,22 @@ function renderDesignImageBlock(block, options) {
     if (url) {
         const svg = block.imageKind === undefined ? undefined : block.imageKind === 'svg';
         const filter = options ? inkFilterDecl(options, svg, url) : '';
-        return (`<img src="${esc(url)}" alt="" style="position:absolute;` +
+        const alt = block.altText ? `alt="${esc(block.altText)}"` : 'alt="" role="presentation"';
+        if (options?.vertical) {
+            // A picture of a vertical page's flow stands upright on the sheet:
+            // turned back inside its box, which runs `width` down the sheet and
+            // `height` across it (sized for that when `upright`, else fitted
+            // keeping its proportions, as the canvas draws it).
+            const k = block.upright ? 1 : Math.min(height / width, width / height);
+            const dw = block.upright ? height : width * k;
+            const dh = block.upright ? width : height * k;
+            const ox = block.upright ? 0 : (height - dw) / 2;
+            const oy = block.upright ? 0 : (width - dh) / 2;
+            return (`<div style="position:absolute;left:${x}px;top:${y}px;width:${width}px;height:${height}px;">` +
+                `<img src="${esc(url)}" ${alt} style="position:absolute;left:0;top:0;width:${dw}px;height:${dh}px;` +
+                `transform:translate(0,${height}px) rotate(-90deg) translate(${ox}px,${oy}px);transform-origin:0 0;${filter}" /></div>`);
+        }
+        return (`<img src="${esc(url)}" ${alt} style="position:absolute;` +
             `left:${x}px;top:${y}px;width:${width}px;height:${height}px;${filter}" />`);
     }
     return (`<div aria-hidden="true" style="position:absolute;` +
@@ -767,7 +1337,7 @@ function renderDesignImageBlock(block, options) {
 }
 function renderDesignBlock(block, options) {
     if (block.kind === 'text')
-        return renderDesignTextBlock(block);
+        return renderDesignTextBlock(block, options);
     if (block.kind === 'rule')
         return renderDesignRuleBlock(block);
     if (block.kind === 'image')
@@ -790,9 +1360,10 @@ function renderBlockInner(block, options) {
     if (block.resourceBlock)
         return renderResourceBlockHtml(block, options);
     const parts = [];
-    parts.push(renderBullet(block));
+    const v = options.vertical;
+    parts.push(v ? renderVerticalBullet(block, v) : renderBullet(block));
     for (const line of block.lines) {
-        parts.push(renderLine(line, block, options.linkTargets));
+        parts.push(v ? renderVerticalLine(line, block, v, options.linkTargets) : renderLine(line, block, options.linkTargets));
     }
     return parts.join('');
 }
@@ -811,7 +1382,11 @@ function renderBlock(block, options) {
 function renderPageDetailed(page, background, pageOptions, ink = null, 
 /** With cut lines, how far the bleed box lies inside the sheet (px); 0
  *  without them. */
-bleedInset = 0) {
+bleedInset = 0, 
+/** The character grid drawn over the type area (`cjk.grid.show`). */
+gridCells, 
+/** `cjk.region` and `cjk.uprightDigits`, for a vertical page. */
+verticalRegion, verticalDigits) {
     const bgDecl = background && background !== 'transparent' ? `background:${background};` : '';
     // With cut lines nothing the page paints shows past the bleed box, as on
     // the canvas and in the PDF (EF-133).
@@ -819,9 +1394,13 @@ bleedInset = 0) {
     // A filter id local to the page and its ink, so every page is
     // self-contained (a patcher may replace pages one by one) and two
     // documents on one page never share a filter.
-    const options = ink
+    const inked = ink
         ? { ...pageOptions, ink: { id: `pt-ink-${ink.hex.replace(/[^0-9a-z]/gi, '')}-${page.index}`, matrix: ink.matrix } }
         : pageOptions;
+    // A vertical page's flow sets its text down the column.
+    const options = page.flow
+        ? { ...inked, vertical: { region: verticalRegion ?? 'mainland', uprightDigits: verticalDigits ?? 2, ...(page.flow.centralBaselines ? { axes: page.flow.centralBaselines } : {}), ...(page.flow.dashAdvances ? { dashes: page.flow.dashAdvances } : {}) } }
+        : inked;
     const blocks = [];
     for (const col of page.columns) {
         for (const block of col.blocks) {
@@ -838,18 +1417,26 @@ bleedInset = 0) {
     // under the body (a part page's full-bleed background must not cover its
     // chapter list); header and footer paint on top.
     const openerHtml = page.openerBand ? renderDesignSlot(page.openerBand, options) : '';
+    // Running heads and folios stay on the sheet, horizontal.
+    const sheetOptions = options.vertical ? { ...options, vertical: undefined } : options;
     const slotParts = [];
     if (page.header)
-        slotParts.push(renderDesignSlot(page.header, options));
+        slotParts.push(renderDesignSlot(page.header, sheetOptions));
     if (page.footer)
-        slotParts.push(renderDesignSlot(page.footer, options));
+        slotParts.push(renderDesignSlot(page.footer, sheetOptions));
     // Whether or not a picture on the page uses it: a host patching blocks
     // one by one may bring in an SVG image the first render did not have.
     const defsHtml = options.ink ? inkFilterDefs(options.ink) : '';
     // The separators above the footnotes of the columns.
     const footnoteRulesHtml = footnoteRuleSegments(page).map((r) => `<div class="pt-footnote-rule" style="position:absolute;left:${r.x}px;top:${r.y - r.lineWidthPx / 2}px;width:${r.width}px;height:${r.lineWidthPx}px;background:${r.color};"></div>`).join('');
-    const decorationHtml = defsHtml + openerHtml + footnoteRulesHtml + slotParts.join('');
-    const innerHtml = defsHtml + openerHtml + blocksHtml + footnoteRulesHtml + slotParts.join('');
+    const gridHtml = gridCells ? renderCharacterGridSvg(gridCells, page.flow ? page.height : page.width, page.flow ? page.width : page.height) : '';
+    const decorationHtml = defsHtml + gridHtml + openerHtml + footnoteRulesHtml + slotParts.join('');
+    // A vertical page's flow: one box turned a quarter turn clockwise, its
+    // text lines turned back and set vertically (see `renderVerticalLine`).
+    const flowHtml = gridHtml + openerHtml + blocksHtml + footnoteRulesHtml;
+    const innerHtml = defsHtml + (page.flow
+        ? `<div class="pt-flow" style="position:absolute;left:0;top:0;width:${page.height}px;height:${page.width}px;transform:translate(${page.width}px,0) rotate(90deg);transform-origin:0 0;">${flowHtml}</div>`
+        : flowHtml) + slotParts.join('');
     const outerHtml = `<div class="pt-page" data-page="${page.index}" style="` +
         `position:relative;` +
         `width:${page.width}px;` +
@@ -860,6 +1447,24 @@ bleedInset = 0) {
         `">${innerHtml}</div>`;
     return { outerHtml, innerHtml, blocks, decorationHtml };
 }
+/** The character grid (稿纸) as one SVG path over the page, under the
+ *  text (see `cjkGridCells`). */
+function renderCharacterGridSvg(cells, width, height) {
+    const { cell } = cells;
+    const d = [];
+    const n = (v) => String(Math.round(v * 1000) / 1000);
+    cells.columns.forEach((x0, c) => {
+        const chars = cells.columnChars[c] ?? cells.chars;
+        const w = chars * cell;
+        for (const y of cells.rows) {
+            d.push(`M${n(x0)} ${n(y)}h${n(w)}M${n(x0)} ${n(y + cell)}h${n(w)}`);
+            for (let i = 0; i <= chars; i++)
+                d.push(`M${n(x0 + i * cell)} ${n(y)}v${n(cell)}`);
+        }
+    });
+    return `<svg class="pt-char-grid" aria-hidden="true" width="${width}" height="${height}" style="position:absolute;left:0;top:0;pointer-events:none;">` +
+        `<path d="${d.join('')}" fill="none" stroke="${CHARACTER_GRID_COLOR}" stroke-width="0.5"/></svg>`;
+}
 /**
  * CSS declarations (a `prop:value;` list) that reset the inherited text
  * properties to the values the engine measured with. Every line of the
@@ -889,8 +1494,9 @@ export function renderToHtmlIndexed(doc, options = {}) {
     const gap = options.columnGap ?? 24;
     const padding = options.padding ?? 24;
     const background = options.background ?? doc.config.page.backgroundColor.hex ?? 'transparent';
+    // A right-bound book lays its pages out right to left in a row.
     const docStyle = mode === 'multi'
-        ? `display:flex;flex-direction:row;gap:${gap}px;align-items:flex-start;padding:${padding}px;box-sizing:border-box;width:max-content;`
+        ? `display:flex;flex-direction:${doc.binding === 'right' ? 'row-reverse' : 'row'};gap:${gap}px;align-items:flex-start;padding:${padding}px;box-sizing:border-box;width:max-content;`
         : `display:flex;flex-direction:column;align-items:center;padding:${padding}px 0;box-sizing:border-box;`;
     // Single-ink diagrams: SVG pictures are filtered to the ink when the host
     // asks (its URLs are not recoloured already).
@@ -921,7 +1527,8 @@ export function renderToHtmlIndexed(doc, options = {}) {
                 },
             }
             : { ...options, linkTargets };
-        const detail = renderPageDetailed(p, background, pageOptions, ink, bleedInset);
+        const gridCells = doc.config.cjk?.grid?.show ? cjkGridCells(doc.config, p.contentArea, doc.baselineGrid, p.columns, p.flow) : undefined;
+        const detail = renderPageDetailed(p, background, pageOptions, ink, bleedInset, gridCells, doc.config.cjk?.region, doc.config.cjk?.uprightDigits);
         pageHtmlParts.push(detail.outerHtml);
         indexedPages.push({
             index: p.index,
@@ -932,8 +1539,11 @@ export function renderToHtmlIndexed(doc, options = {}) {
             decorationHtml: detail.decorationHtml,
         });
     }
-    // The host's inherited text properties are reset first (EF-96).
-    const html = `<div class="pt-doc" data-mode="${mode}" style="${HTML_TEXT_RESET}${docStyle}">` +
+    // The host's inherited text properties are reset first (EF-96). A
+    // Chinese, Japanese or Korean document declares its language, so the
+    // browser picks the region's glyph forms (see `renderLangOf`).
+    const docLang = renderLangOf(doc.config);
+    const html = `<div class="pt-doc"${docLang ? ` lang="${docLang}"` : ''} data-mode="${mode}" style="${HTML_TEXT_RESET}${docStyle}">` +
         pageHtmlParts.join('') +
         `</div>`;
     return { html, mode, pages: indexedPages };