rapier-markdown-kit 1.1.98 → 1.1.101

package/dist/kit/render.mjs

@@ -1,6 +1,73 @@
 // SPDX-License-Identifier: MIT
+import {htmlImageRecord, mountHtmlBlocks} from '../spec/html-blocks.mjs';
 import {finish, finishAsync, cloneTree, cleanTree, serializeTree, encodeUtf8Steps, pause} from './render-work.mjs';
+import {formatFontOpen, fontFamilyCss, FONT_CLOSE} from '../spec/md-marks.mjs';
+import {readFontAssets, documentFontsCss} from '../spec/document-fonts.mjs';
+import {fontRequests, requireDocumentFonts} from './export-fonts.mjs';
+import {documentLanguage, documentSettingsFonts} from '../spec/document-settings.mjs';
+import {createTypography} from '../layout/typography.mjs';
+import {createLineMeasurer, linesHeight} from '../layout/model.mjs';
+import {markPrintCapitals, createPrintCapitals, followingPrintProse} from './print-capitals.mjs';
+import {freezePublishedInk} from './render-ink.mjs';
 // The document's renderer. DOM, codecs and host state are explicit inputs.
+// Rapier generates attribute selectors for dark paper. Project those owned rules onto their
+// SVG elements before export removes stylesheets; the inert host and the editor share this pass.
+export function presentNativeDiagram(drawing) {
+  const winners=new Map();
+  for(const style of drawing.querySelectorAll('style')){
+    const media=/^\s*@media\s*\(\s*prefers-color-scheme\s*:\s*dark\s*\)\s*\{([\s\S]*)\}\s*$/.exec(style.textContent);
+    if(media)for(const rule of media[1].matchAll(/([^{}]+)\{([^{}]*)\}/g)){
+      // The browser's CSS sanitizer serializes owned hex colours as rgb()/rgba().
+      const properties=[...rule[2].matchAll(/(?:^|;)\s*(fill|stroke|color|stop-color)\s*:\s*(#[\da-f]{3,8}|rgba?\([\d.,%/\s]+\)|none)\s*(?:!important)?(?=;|$)/gi)];
+      for(const selector of rule[1].split(',')){
+        // Draw's selectors contain only attributes, descendants and immediate children.
+        if(!/^\s*\[[^\[\]{};]+\](?:\s*(?:>\s*)?\[[^\[\]{};]+\])*\s*$/.test(selector))continue;
+        const rank=(selector.match(/\[/g)||[]).length;
+        for(const element of [...(drawing.matches(selector)?[drawing]:[]),...drawing.querySelectorAll(selector)]){
+          let paints=winners.get(element);if(!paints)winners.set(element,paints=new Map());
+          for(const [,property,dark] of properties){const light=element.getAttribute(property);
+            if(light&&(paints.get(property)?.rank??-1)<=rank)paints.set(property,{light,dark,rank});}
+        }
+      }
+    }
+    style.remove();
+  }
+  for(const [element,paints] of winners)for(const [property,{light,dark}] of paints)
+    element.style.setProperty(property,'light-dark('+light+', '+dark+')','important');
+  drawing.classList.add('rapier-native-flowchart');drawing.setAttribute('role','img');
+  drawing.setAttribute('aria-roledescription',drawing.getAttribute('data-rapier-diagram-kind')||'flowchart');
+  const width=Number(drawing.getAttribute('width')),
+    sizes=[...drawing.querySelectorAll('text[font-size]')].map(text=>Number(text.getAttribute('font-size'))).filter(size=>Number.isFinite(size)&&size>0),
+    minimum=sizes.reduce((smallest,size)=>Math.min(smallest,size),Infinity);
+  if(Number.isFinite(width)&&width>0){
+    const readable=Math.ceil(width*14/(Number.isFinite(minimum)?minimum:14)*1000)/1000;
+    drawing.style.width='clamp('+readable+'px, 100%, '+width+'px)';
+  }
+  drawing.style.maxWidth='none';
+}
+
+// Set the first view once. Subsequent rendering keeps the person's horizontal position.
+export function positionNativeDiagram(drawing) {
+  const surface=drawing?.closest?.('.diagram-block,.diagram-live-preview');
+  if(!surface?.clientWidth)return;
+  if(surface._rapierDiagramScroll){
+    surface.scrollLeft=surface._rapierDiagramScroll.left;
+    surface.scrollTop=surface._rapierDiagramScroll.top;
+    delete surface._rapierDiagramScroll;
+    surface._rapierDiagramPositioned=true;
+    return;
+  }
+  if(surface._rapierDiagramPositioned)return;
+  surface._rapierDiagramPositioned=true;
+  if(surface.scrollLeft||!drawing.hasAttribute('data-rapier-diagram-start-x'))return;
+  const start=Number(drawing.getAttribute('data-rapier-diagram-start-x')),
+    view=(drawing.getAttribute('viewBox')||'').trim().split(/[\s,]+/).map(Number);
+  if(!Number.isFinite(start)||view.length!==4||!(view[2]>0))return;
+  const bounds=drawing.getBoundingClientRect(),host=surface.getBoundingClientRect(),
+    left=bounds.left-host.left+(start-view[0])*bounds.width/view[2]-surface.clientWidth/2;
+  surface.scrollLeft=Math.max(0,Math.min(surface.scrollWidth-surface.clientWidth,left));
+}
+
 function createRenderer(runtime) {
   const {RAPIER_COLOR_CLOSE, RapierLedgerCarried, RapierPageReturnAddress, RapierTextCodec, _rapierArtifactHighlight, _rapierArtifactPreference, _rapierArtifactStyles, _rapierBlobDataUrl, _rapierBuildInterchangeContext, _rapierDocumentNameIsAdmissible, _rapierLedgerParts, _rapierDrawReadSVGRecipe, _rapierDrawShapeProfileFor, _rapierExportFontCss, _rapierFillDiagram, _rapierFinalizeExportCode, _rapierFormatColorOpen, _rapierLanguageClass, _rapierLineStartOffsets, _rapierMarkdownEnvironment, _rapierPortableHtml, _rapierPrepareInterchangeContext, _rapierProjectPortableRoot, _rapierProviders, _rapierSourceCharEscaped, _rapierSourceLineSpan, crypto, document, escapeRapierHtmlText, globalThis, rapierConfirm, sanitizeRapierHtml} = runtime;
   let md = runtime.md;
@@ -9,7 +76,9 @@ function createRenderer(runtime) {
     const filename = options.filename || 'document.md';
     if (typeof filename !== 'string' || !filename || /[\\/\u0000-\u001f\u007f]/.test(filename)) throw new TypeError('Invalid document filename');
     const bom = source.charCodeAt(0) === 0xfeff;
-    const canonical = RapierTextCodec.normalizeDocument(source);
+    let canonical = RapierTextCodec.normalizeDocument(source);
+    if ((!options.docKind || options.docKind === 'markdown') && runtime.materializeDocumentFonts)
+      canonical = await runtime.materializeDocumentFonts(canonical, {parser: md});
     const captured = {canonical, metadata: {filename, docKind: options.docKind || 'markdown', codeLang: options.codeLang || '', bom}, baseName: filename.replace(/\.[^.]*$/, '') || 'document'};
     const written = await _rapierBuildSharedPage(captured);
     return {html: await written.blob.text(), filename: written.filename};
@@ -20,14 +89,36 @@ async function _rapierBuildArtifact(options, providedContext) {
 	const metadata = context.metadata;
 	const base = context.baseName;
 	const work = context.work || opts.work;
+	const completePage = opts.kind === 'standalone' || opts.kind === 'page';
+	const settings = _rapierDocumentSettingsOf(context.canonical);
+	const language = documentLanguage(settings, globalThis.navigator?.language);
+	const fontIndex = metadata.docKind === 'markdown' ? readFontAssets(context.canonical, md) : null;
+	const fontAssets = fontIndex?.assets || [];
+	const fontCss = documentFontsCss(fontAssets);
 
 	if (opts.kind === 'publishing' || opts.kind === 'fragment') {
 		for (const diagram of context.semanticRoot.querySelectorAll('.diagram-block[data-diagram-native]'))
 			await _rapierFillDiagram(diagram, true);
 		const portableRoot = work ? await runtime._rapierProjectPortableRootAsync(context.semanticRoot, {baseName: base, keepDiagrams: true, work})
 			: _rapierProjectPortableRoot(context.semanticRoot, { baseName: base, keepDiagrams: true });
+		for (const element of portableRoot.children) if (!element.hasAttribute('lang')) element.setAttribute('lang', language);
+		if (fontCss || settings?.defaultfont) {
+			// Keep authored font scopes inside this fragment; no page wrapper or global settings rules.
+			const {main, sans: heading, mono: code} = documentSettingsFonts(settings), body = main || heading;
+			if (body) for (const element of portableRoot.children)
+				if (!element.matches('pre,code,kbd,samp,svg,math') && !element.style.fontFamily)
+					element.style.fontFamily = body.css || fontFamilyCss(body.family);
+			if (heading) for (const element of portableRoot.querySelectorAll('h1,h2,h3,h4,h5,h6'))
+				element.style.fontFamily = heading.css || fontFamilyCss(heading.family);
+			if (code) for (const element of portableRoot.querySelectorAll('pre,code,kbd,samp'))
+				element.style.fontFamily = code.css || fontFamilyCss(code.family);
+		}
+		if (fontIndex) await requireDocumentFonts(context.canonical, {parser: md, index: fontIndex, root: portableRoot, settings, fontCss, validateFont: runtime.validateFont,
+			css: _rapierArtifactStyles('system', false, false, false, '') + '\n' + _rapierDocumentSettingsCss(settings)});
+		const html = work ? await runtime._rapierPortableHtmlAsync(portableRoot, work) : _rapierPortableHtml(portableRoot);
 		return {
-			html: work ? await runtime._rapierPortableHtmlAsync(portableRoot, work) : _rapierPortableHtml(portableRoot),
+			// Only validated data-font rules bypass the content sanitizer, which still rejects authored styles.
+			html: (fontCss ? '<style>' + fontCss + '</style>\n' : '') + html,
 			filename: base + '-publishing.html',
 			metadata,
 		};
@@ -35,46 +126,53 @@ async function _rapierBuildArtifact(options, providedContext) {
 
 	// The semantic export root is detached and has never entered the live visibility queue.
 	// Await the same materialization owner before any projection clones or serializes it.
-	for (const diagram of opts.kind === 'page' ? [] : context.semanticRoot.querySelectorAll('.diagram-block[data-diagram-src]')) {
-		await _rapierFillDiagram(diagram, true);
-		if (opts.kind !== 'standalone' || diagram.hasAttribute('data-diagram-unclosed')) continue;
-		const state = diagram.getAttribute('data-diagram-state');
+	const unavailable = plugin => Object.assign(new Error('Offline web page not written; install the ' + plugin + ' plug-in before exporting this document.'),
+		{code: 'offline_plugin_unavailable', plugin});
+	if (completePage && context.semanticRoot.querySelector('.math-placeholder[data-rapier-math-source]')) throw unavailable('math');
+	for (const diagram of context.semanticRoot.querySelectorAll('.diagram-block[data-diagram-src]')) {
+		const retained = diagram.getAttribute('data-diagram-state') === 'ready' && diagram.querySelector('.diagram-cache')?.querySelector('svg');
+		if (!(completePage && retained && _rapierProviders?.mermaid?.status !== 'ready')) await _rapierFillDiagram(diagram, true);
+		if (!completePage || diagram.hasAttribute('data-diagram-unclosed')) continue;
+		if (diagram.getAttribute('data-diagram-state') === 'absent') throw unavailable('mermaid');
 		// A completed diagram must have its drawing. Syntax and renderer failures both refuse
 		// the file; an unclosed fence above is still authored source, not a completed diagram.
-		if (state !== 'ready' || !diagram.querySelector('.diagram-cache svg'))
+		if (diagram.getAttribute('data-diagram-state') !== 'ready' || !diagram.querySelector('.diagram-cache svg'))
 			throw Object.assign(new Error('Web page not written; a required diagram could not be rendered'), {code: 'EXPORT_DIAGRAM_UNAVAILABLE'});
 	}
 
-	if (opts.kind === 'standalone') {
-		if (context.semanticRoot.querySelector('.math-placeholder'))
-			throw new Error('Web page not written; the math plug-in is required to include its equations');
+	if (completePage) {
 		// Invalid TeX renders as a static error SVG. A source-only span means
 		// rendering itself failed, so publishing it would silently omit the equation.
 		if (context.semanticRoot.querySelector('span[data-rapier-math-source]'))
 			throw new Error('Web page not written; a required equation could not be rendered');
+		await _rapierRequireOfflinePageImages(context.semanticRoot);
+	}
+	if (!completePage) for (const image of context.semanticRoot.querySelectorAll('svg image')) {
+		const href = image.getAttribute('data-rapier-remote-src') || image.getAttribute('href') || image.getAttribute('xlink:href') || '';
+		if (!globalThis.RapierImageAssets.dataImage(href)) throw new Error('Embed the diagram picture before exporting an offline page: ' + href);
 	}
-	if (opts.kind === 'standalone' || opts.kind === 'page') await _rapierRequireOfflinePageImages(context.semanticRoot);
 
-	const styledOptions = {metadata, print: !!opts.print, sourceCode: opts.kind === 'page', baseName: base, work};
+	const styledOptions = {metadata, print: !!opts.print, baseName: base, work};
 	const styledRoot = work ? await _rapierProjectStyledRootAsync(context.semanticRoot, styledOptions)
 		: _rapierProjectStyledRoot(context.semanticRoot, styledOptions);
-	if (opts.kind === 'standalone' && typeof _rapierFinalizeExportCode === 'function') await _rapierFinalizeExportCode(styledRoot);
+	styledRoot.setAttribute('lang', language);
+	if (completePage && typeof _rapierFinalizeExportCode === 'function') await _rapierFinalizeExportCode(styledRoot);
 	// _rapierProjectStyledRoot already returns the sanitized projection.
 	// Print never emits the layout reflow script (see below), so a print artifact has no use for
 	// this annotation -- skip it there rather than pay the cost for numbers nothing will read.
-	if (!opts.print && opts.kind !== 'page') _rapierAnnotateExportBoxPolygons(styledRoot);
-	// Share adds its nearest-side no-script float and long-code cap here. Offline-image
-	// admission above and the page policy below belong to this common writer, not its callers.
+	if (!opts.print) _rapierAnnotateExportBoxPolygons(styledRoot);
+	if (completePage && !opts.print) {
+		if (work) {
+			await finishAsync(_rapierSharedPageLayoutSteps(styledRoot), work);
+			await finishAsync(_rapierShareCapLongCodeBlocksSteps(styledRoot), work);
+		} else { _rapierSharedPageLayout(styledRoot); _rapierShareCapLongCodeBlocks(styledRoot); }
+	}
 	if (typeof opts.afterRoot === 'function') await opts.afterRoot(styledRoot);
-	const carrier = opts.kind === 'standalone' ? await _rapierSharedSourceCarrier(context, styledRoot) : '';
-	const bodyHtml = opts.kind === 'page' ? _rapierPageHtml(styledRoot) : work
-		? await finishAsync(serializeTree(styledRoot), work) : styledRoot.innerHTML;
-	if (work) await pause(work, .95);
+	markPrintCapitals(styledRoot);
 	const theme = opts.print
 		? 'light'
-		: opts.kind === 'page' ? 'system'
 		: _rapierArtifactPreference('theme', ['system', 'light', 'dark']);
-	const highlights = opts.kind === 'page' ? 'standard' : _rapierArtifactPreference('highlights', ['accent', 'standard']);
+	const highlights = _rapierArtifactPreference('highlights', ['accent', 'standard']);
 	const versionMeta = document.querySelector('meta[name="rapier-version"]');
 	const version = versionMeta && versionMeta.content ? versionMeta.content.trim() : '0.0.0';
 	const bodyClass = theme === 'light' ? 'light' : '';
@@ -85,23 +183,41 @@ async function _rapierBuildArtifact(options, providedContext) {
 	// .md-render set and the highlight rules, so a numbered list, a checkbox, a callout and a
 	// table are drawn in an exported page exactly as they are drawn here. The one caller with
 	// rules of its own -- Share, for the no-script float it alone writes -- appends them.
-	const includeFonts = !!opts.print || opts.kind === 'standalone';
+	// Print retains its existing factory resources. HTML adds only the optional small Sans subset below.
+	const includeFonts = !!opts.print;
 	const zenFontCss = opts.print && styledRoot.querySelector('svg[aria-roledescription="zenuml"]')
 		? (_rapierProviders?.mermaid?.exportFontCss?.() || '') : '';
 	const willFont = opts.print && opts.willFont ? opts.willFont : null;
-	const settings = _rapierDocumentSettingsOf(context.canonical);
 	const settingsCss = _rapierDocumentSettingsCss(settings);
+	const refined = styledRoot.querySelector('p[data-md-hyphens="auto"],p[data-md-lines],p[data-md-caps="small"],p[data-md-hanging="on"],img[data-rapier-print-lines]');
+	const printMargin = settings?.geometry ? settings.geometry.twips / 15 : 14 * 96 / 25.4;
+	const printWidth = settings?.papersize ? settings.papersize.width / 15 - 2 * printMargin : null;
+	const typographyPrintCss = refined ? '@media print{.md-render{--rapier-print-margin-left:' + printMargin + 'px;--rapier-print-margin-right:' + printMargin + 'px'
+		+ (printWidth > 0 ? ';--rapier-print-width:' + printWidth + 'px' : '') + '}'
+		+ (printWidth > 0 ? '.rapier-page.md-render{width:' + printWidth + 'px!important}' : '') + '}' : '';
 	const pageTitle = settings && settings.title ? globalThis.RapierMarkdownSpec.documentTitle(settings) : metadata.filename;
-	let css = _rapierArtifactStyles(theme, includeFonts, !!opts.print || opts.kind === 'standalone', opts.kind === 'page', opts.kind === 'standalone' ? '' : null)
-		+ (zenFontCss ? '\n\n' + zenFontCss : '')
+	let css = _rapierArtifactStyles(theme, includeFonts, !!opts.print || completePage, false, opts.print && opts.kind === 'standalone' ? '' : null)
+		+ (completePage ? '\n\n' + _rapierSharedPageFallbackCss() : '')
 		+ (opts.extraCss ? '\n\n' + opts.extraCss : '')
 		+ (willFont ? '\n\n@font-face{font-family:' + willFont.family + ';src:url(' + await _rapierBlobDataUrl(new Blob([willFont.bytes], { type: 'font/ttf' })) + ') format("truetype")}' : '')
-		+ (settingsCss ? '\n' + settingsCss : '');
-	// Match the document's measured faces with only the glyphs this immutable page uses.
-	if (opts.kind === 'standalone') {
+		+ (settingsCss ? '\n' + settingsCss : '')
+		+ (typographyPrintCss ? '\n' + typographyPrintCss : '');
+	let factoryFontCss = '';
+	if (!opts.print) {
+		if (fontIndex) await requireDocumentFonts(context.canonical, {parser: md, index: fontIndex, root: styledRoot, settings, css, fontCss, validateFont: runtime.validateFont});
+		if (typeof _rapierExportFontCss === 'function')
+			factoryFontCss = await _rapierExportFontCss(styledRoot, {settings, css, theme, portableFactory: true, customFontCss: fontCss});
+		if (factoryFontCss) css += '\n' + factoryFontCss;
+	} else if (opts.kind === 'standalone') {
 		const fonts = await _rapierExportFontCss(styledRoot, {settings, css, theme});
 		if (fonts) css += '\n' + fonts;
 	}
+	if (fontCss) css += '\n' + fontCss;
+	if (typeof opts.afterFonts === 'function') await opts.afterFonts(styledRoot, {css, fontCss, settings, language, theme});
+	const carrier = completePage ? await _rapierSharedSourceCarrier(context, styledRoot) : '';
+	const bodyHtml = work
+		? await finishAsync(serializeTree(styledRoot), work) : styledRoot.innerHTML;
+	if (work) await pause(work, .95);
 	// Every written page is offline. Only the writer's nonce script may run; it, pictures,
 	// styles and other page resources get no network authority. Following an ordinary link
 	// is the reader's navigation, with no Referer, not a background resource request.
@@ -109,10 +225,12 @@ async function _rapierBuildArtifact(options, providedContext) {
 	// The reflow script is written first, because whether it exists decides the policy. A page that carries no script says so: script-src 'none' refuses every
 	// script outright. Declaring a nonce a page has no use for is a widening, small but real -- anything that could inject markup into the file could read the
 	// nonce out of it and be admitted.
-	const layoutScript = !opts.print && opts.kind !== 'page' ? _rapierArtifactLayoutScript(styledRoot, nonce) : '';
-	const inkScript = !opts.print && opts.kind !== 'page' ? _rapierArtifactInkScript(styledRoot, nonce) : '';
+	const layoutScript = !opts.print && opts.scripts !== false ? _rapierArtifactLayoutScript(styledRoot, nonce) : '';
+	const inkScript = !opts.print && opts.scripts !== false ? _rapierArtifactInkScript(styledRoot, nonce) : '';
+	const typographyScript = opts.scripts !== false ? _rapierArtifactTypographyScript(styledRoot, nonce) : '';
+	const htmlScript = opts.scripts !== false && styledRoot.querySelector('[data-rapier-html]') ? '<script nonce="' + nonce + '">(' + mountHtmlBlocks.toString().replace(/<\/script/gi, '<\\/script') + ')(document);</script>' : '';
 	const page = '<!DOCTYPE html>\n'
-		+ '<html lang="en" data-rapier-theme="' + theme + '" data-highlights="' + highlights + '">\n'
+		+ '<html lang="' + escapeRapierHtmlText(language) + '" data-rapier-theme="' + theme + '" data-highlights="' + highlights + '">\n'
 		+ '<head>\n<meta charset="UTF-8">\n' + (carrier ? RapierPageReturnAddress.PAGE_SEED + '\n' : '')
 		+ '<meta name="viewport" content="width=device-width, initial-scale=1">\n'
 		// Chrome 154's responsively sized frames: a host frame styled `frame-sizing: content-height` sizes
@@ -120,42 +238,45 @@ async function _rapierBuildArtifact(options, providedContext) {
 		// someone's page shows whole, with no inner scroll. Any origin may read the height: the page is the
 		// document, published by the person who exported it.
 		+ '<meta name="responsive-embedded-sizing" content="allow-origins=*">\n'
-		+ '<meta http-equiv="Content-Security-Policy" content="' + _rapierExportedPageCsp(layoutScript || inkScript ? nonce : '', includeFonts) + '">\n'
+		+ '<meta http-equiv="Content-Security-Policy" content="' + _rapierExportedPageCsp(layoutScript || inkScript || typographyScript || htmlScript ? nonce : '', includeFonts || !!fontCss || !!factoryFontCss) + '">\n'
 		+ '<meta name="referrer" content="no-referrer">\n'
 		+ '<link rel="icon" href="data:,">\n'
 		+ '<meta name="generator" content="Rapier ' + escapeRapierHtmlText(version) + '">\n'
 		+ '<title>' + escapeRapierHtmlText(pageTitle) + '</title>\n'
 		+ '<style>' + css + '</style>\n</head>\n'
-		+ '<body class="' + bodyClass + '"><main class="' + docClass + '" data-md-theme="' + theme + '">'
-		+ bodyHtml + '</main>' + carrier + layoutScript + inkScript + '</body>\n</html>';
+		+ '<body class="' + bodyClass + '"><main class="' + docClass + '" data-md-theme="' + theme + '"' + (settings?.space ? ' data-md-space' : '') + '>'
+		+ bodyHtml + '</main>' + carrier + layoutScript + inkScript + typographyScript + htmlScript + '</body>\n</html>';
 
 	return {
 		html: page,
 		filename: base + '.html',
 		bodyHtml,
 		css,
+		fontCss,
+		fontRequests: fontCss ? fontRequests(styledRoot, {settings, css, fontCss}) : [],
+		settings,
 		docClass,
+		language,
 		metadata,
 		documentTitle: settings && settings.title ? pageTitle : '',
 	};
 }
 
-// Page files have one byte representation across native and inert DOM hosts. Attribute
-// insertion order and a host's optional entity escapes are not document content.
-function _rapierPageHtml(root) {
-	const voidTags = new Set(['area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'link', 'meta', 'param', 'source', 'track', 'wbr']);
-	const children = node => Array.from(node.childNodes || [], write).join('');
-	function write(node) {
-		if (node.nodeType === 3) return escapeRapierHtmlText(node.nodeValue || '');
-		if (node.nodeType !== 1) return '';
-		// This writer emits text/html; the HTML reader restores SVG's camel-cased names.
-		const tag = node.localName.toLowerCase();
-		const attributes = Array.from(node.attributes).sort((a, b) => a.name < b.name ? -1 : a.name > b.name ? 1 : 0)
-			.map(attribute => ' ' + attribute.name + '="' + escapeRapierHtmlText(attribute.value) + '"').join('');
-		const open = '<' + tag + attributes + '>';
-		return voidTags.has(tag) ? open : open + children(node) + '</' + tag + '>';
-	}
-	return children(root);
+async function _rapierBuildPublishedPage(context) {
+	if (typeof context?.canonical !== 'string' || !context.semanticRoot)
+		throw new TypeError('Publishing requires a captured document.');
+	// Public readers receive only the current document. The editing session's previous
+	// source and attribution ledger never acquire public custody through an export option.
+	const current = {...context, ledger: null, carried: 'none', comparisonBase: null};
+	return _rapierBuildArtifact({
+		kind: 'standalone', scripts: false, extraCss: _rapierSharedPageFallbackCss(),
+		async afterRoot(root) {
+			if (current.work) await finishAsync(_rapierSharedPageLayoutSteps(root), current.work);
+			else _rapierSharedPageLayout(root);
+		},
+		afterFonts: (root, style) => freezePublishedInk(root, {...style, document, work: current.work,
+			spec: globalThis.RapierMarkdownSpec, ink: globalThis.RapierInk, draw: globalThis.RapierInkDraw}),
+	}, current);
 }
 
 function _rapierProjectStyledRoot(semanticRoot, options) { return finish(_rapierProjectStyledRootSteps(semanticRoot, options)); }
@@ -177,12 +298,55 @@ function* _rapierProjectStyledRootSteps(semanticRoot, options) {
 		if (code) {
 			const lang = _rapierLanguageClass(code) || String(metadata.codeLang || '');
 			code.classList.add('artifact-code');
-			if (metadata.docKind === 'code' && !opts.sourceCode) _rapierPaintCode(code, _rapierArtifactHighlight(code.textContent || '', lang));
+			if (metadata.docKind === 'code') _rapierPaintCode(code, _rapierArtifactHighlight(code.textContent || '', lang));
 			if (lang) code.classList.add('language-' + String(lang).replace(/[^a-z0-9_-]/gi, ''));
 		}
 	} else {
+		if (root.hasAttribute('data-md-space')) {
+			// One raw HTML token may have several siblings. Its authored heights stay inside one line-sized box.
+			for (let element = root.firstElementChild; element;) {
+				const group = element.getAttribute('data-md-html-block');
+				if (group === null) { element = element.nextElementSibling; continue; }
+				let first = element;
+				// Sanitizing a container or repairing a table can leave its text before the first surviving tag.
+				while (first.previousSibling && first.previousSibling.nodeType !== 1) { first = first.previousSibling; yield; }
+				const wrap = document.createElement('div');
+				wrap.className = 'md-space-block';
+				root.insertBefore(wrap, first);
+				let node = first;
+				while (node && (node.nodeType !== 1 || node.getAttribute('data-md-html-block') === group)) {
+					const next = node.nextSibling;
+					wrap.appendChild(node);
+					node = next;
+					yield;
+				}
+				element = wrap.nextElementSibling;
+			}
+			// A removed raw container can leave only text. Reserve that surviving content in this projection.
+			for (let first = root.firstChild; first;) {
+				if (first.nodeType === 1) { first = first.nextSibling; continue; }
+				let end = first, hasText = false;
+				while (end && end.nodeType !== 1) {
+					if (end.nodeType === 3 && end.nodeValue.trim()) hasText = true;
+					end = end.nextSibling;
+					yield;
+				}
+				if (hasText) {
+					const wrap = document.createElement('div');
+					wrap.className = 'md-space-block';
+					root.insertBefore(wrap, first);
+					for (let node = first; node !== end;) {
+						const next = node.nextSibling;
+						wrap.appendChild(node);
+						node = next;
+						yield;
+					}
+				}
+				first = end;
+			}
+		}
 		for (const code of root.querySelectorAll('pre > code')) { yield;
-			if (opts.sourceCode || code.parentElement?.classList.contains('diagram-source') &&
+			if (code.parentElement?.classList.contains('diagram-source') &&
 					code.closest('.diagram-block')?.getAttribute('data-diagram-state') === 'ready') continue;
 			const lang = _rapierLanguageClass(code) || 'text';
 			_rapierPaintCode(code, _rapierArtifactHighlight(code.textContent || '', lang));
@@ -206,6 +370,11 @@ function* _rapierProjectStyledRootSteps(semanticRoot, options) {
 
 		for (const input of root.querySelectorAll('input[type="checkbox"]')) { yield;
 			const item = input.closest('.task-list-item');
+			if (item) {
+				const label = item.cloneNode(true);
+				for (const node of label.querySelectorAll('input,ul,ol')) { yield; node.remove(); }
+				input.setAttribute('aria-label', String(label.textContent || '').replace(/\s+/g, ' ').trim() || 'Task');
+			}
 			input.disabled = !!opts.print || !item;
 			if (input.disabled) { input.setAttribute('aria-disabled', 'true'); continue; }
 			// Native checked state changes this reader's view, never the carried source or disk.
@@ -213,9 +382,6 @@ function* _rapierProjectStyledRootSteps(semanticRoot, options) {
 			input.removeAttribute('aria-checked');
 			input.setAttribute('autocomplete', 'off');
 			input.setAttribute('title', 'Ticks change this view, not the saved file.');
-			const label = item.cloneNode(true);
-			for (const node of label.querySelectorAll('input,ul,ol')) { yield;node.remove();}
-			input.setAttribute('aria-label', String(label.textContent || '').replace(/\s+/g, ' ').trim() || 'Task');
 		}
 
 		if (opts.print) for (const details of root.querySelectorAll('details')) { yield; details.open = true; }
@@ -223,7 +389,74 @@ function* _rapierProjectStyledRootSteps(semanticRoot, options) {
 
 	yield* _rapierPrefixPortableAnchorsSteps(root, opts.baseName || metadata.filename || 'document');
 
-	return yield* cleanTree(root, sanitizeRapierHtml, opts.sourceCode ? 'source' : 'export');
+	return yield* cleanTree(root, sanitizeRapierHtml, 'export');
+}
+
+function _rapierDocxRenderStyles(root) {
+	// The semantic root is detached and its code is normalized text. Use the same
+	// highlighter and light reference sheet that paint a page, then retain native run facts.
+	const codes = Array.from(root.querySelectorAll('pre > code'));
+	for (const code of codes) {
+		const lang = _rapierLanguageClass(code);
+		if (lang) _rapierPaintCode(code, _rapierArtifactHighlight(code.textContent || '', lang));
+	}
+	const coloured = codes.filter(code => code.querySelector('span'));
+	const quotes = Array.from(root.querySelectorAll('blockquote'));
+	if (!coloured.length && !quotes.length) return;
+	const frame = document.createElement('iframe');
+	frame.setAttribute('aria-hidden', 'true');
+	frame.style.cssText = 'position:fixed;left:-100000px;top:0;width:1px;height:1px;border:0;pointer-events:none';
+	document.body.appendChild(frame);
+	try {
+		const into = frame.contentDocument;
+		if (!into?.body) throw new Error('Word text styles could not be read.');
+		into.open(); into.write('<!doctype html><html><head></head><body></body></html>'); into.close();
+		into.documentElement.setAttribute('data-rapier-theme', 'light');
+		into.documentElement.setAttribute('data-highlights', _rapierArtifactPreference('highlights', ['accent', 'standard']));
+		into.body.className = 'light';
+		const sheet = into.createElement('style');
+		sheet.textContent = _rapierArtifactStyles('light', false, false);
+		into.head.appendChild(sheet);
+		const surface = into.createElement('div'); surface.className = 'md-render'; into.body.appendChild(surface);
+		const canvas = into.createElement('canvas'); canvas.width = canvas.height = 1;
+		const paint = canvas.getContext('2d'), colours = new Map();
+		if (!paint) throw new Error('Word text colours could not be read.');
+		const hex = colour => {
+			if (!colours.has(colour)) {
+				// CSS may resolve an accent to oklch/color-mix. The browser supplies its
+				// sRGB paper colour; the writer does not invent a second colour parser.
+				paint.fillStyle = '#ffffff'; paint.fillRect(0, 0, 1, 1);
+				paint.fillStyle = colour; paint.fillRect(0, 0, 1, 1);
+				colours.set(colour, '#' + Array.from(paint.getImageData(0, 0, 1, 1).data).slice(0, 3)
+					.map(byte => byte.toString(16).padStart(2, '0')).join(''));
+			}
+			return colours.get(colour);
+		};
+		for (const code of coloured) {
+			const pre = into.createElement('pre'), probe = into.importNode(code, true);
+			pre.appendChild(probe); surface.appendChild(pre);
+			const originals = Array.from(code.querySelectorAll('span'));
+			Array.from(probe.querySelectorAll('span')).forEach((span, index) => {
+				const style = into.defaultView.getComputedStyle(span), target = originals[index];
+				target.style.color = hex(style.color);
+				// Carry generated syntax emphasis as Word's semantic bold slot.
+				target.style.fontWeight ||= style.fontWeight === style.getPropertyValue('--md-fw-semibold').trim() ? 'bold' : style.fontWeight;
+				target.style.fontStyle = style.fontStyle;
+			});
+			pre.remove();
+		}
+		const quoteProbes = new Map();
+		for (const quote of quotes) {
+			const probe = into.createElement('blockquote'); probe.className = quote.className;
+			probe.style.borderInlineStartColor = quote.style.borderInlineStartColor;
+			// Nested quotes have their own reference border colour. Preserve the quote
+			// ancestry without cloning the document's pictures or other resources.
+			const parent = quoteProbes.get(quote.parentElement?.closest('blockquote')) || surface;
+			parent.appendChild(probe); quoteProbes.set(quote, probe);
+		}
+		for (const [quote, probe] of quoteProbes)
+			quote.style.borderInlineStartColor = hex(into.defaultView.getComputedStyle(probe).borderInlineStartColor);
+	} finally { frame.remove(); }
 }
 
 function _rapierPaintCode(el, html) {
@@ -335,7 +568,7 @@ function _rapierDocumentSettingsCss(settings) {
 }
 
 function _rapierExportedPageCsp(nonce, fonts) {
-	return "default-src 'none'; connect-src 'none'; img-src data:; style-src 'unsafe-inline'; "
+	return "default-src 'none'; connect-src 'none'; frame-src 'self'; img-src data:; style-src 'unsafe-inline'; "
 		+ (fonts ? "font-src data:; " : '')
 		+ "script-src " + (nonce ? "'nonce-" + nonce + "'" : "'none'") + "; base-uri 'none'; form-action 'none'";
 }
@@ -394,12 +627,12 @@ async function _rapierSharedSourceHash(source, work = null) {
 	return Array.from(hash, byte => byte.toString(16).padStart(2, '0')).join('');
 }
 
-function _rapierSharedSourceForms(source, root, substitutions) { return finish(_rapierSharedSourceFormsSteps(source, root, substitutions)); }
-async function _rapierSharedSourceFormsAsync(source, root, substitutions, work) {
+function _rapierSharedSourceForms(source, root) { return finish(_rapierSharedSourceFormsSteps(source, root)); }
+async function _rapierSharedSourceFormsAsync(source, root, work) {
 	const destinations = await _rapierDataImageDestinationsAsync(source, work);
-	return finishAsync(_rapierSharedSourceFormsSteps(source, root, substitutions, destinations), work);
+	return finishAsync(_rapierSharedSourceFormsSteps(source, root, destinations), work);
 }
-function* _rapierSharedSourceFormsSteps(source, root, substitutions, preparedDestinations = null) {
+function* _rapierSharedSourceFormsSteps(source, root, preparedDestinations = null) {
 	const assets = globalThis.RapierImageAssets;
 	const destinations = (preparedDestinations || _rapierImageDestinations(source, url => !!assets.dataImage(url))).sort((a, b) => b.start - a.start);
 	const byUrl = new Map(), ids = new Map(), labels = new Map();
@@ -410,14 +643,14 @@ function* _rapierSharedSourceFormsSteps(source, root, substitutions, preparedDes
 		if (!assets.dataImage(url) || byUrl.has(url)) continue;
 		byUrl.set(url, image);
 	}
-	let resolved = source;
 	const carrierEdits = [];
 	const used = [], definitions = [];
 	for (const row of destinations) {
 		yield;
-		const shownUrl = substitutions?.get(row.destination) || row.destination;
-		const image = byUrl.get(shownUrl);
-		if (!image) { if (shownUrl !== row.destination) { resolved = resolved.slice(0, row.start) + shownUrl + resolved.slice(row.end); carrierEdits.push({start: row.start, end: row.end, text: _rapierSharedEncode(shownUrl)}); } continue; }
+		// Share can display a converted picture. Only identical authored bytes can be
+		// borrowed from that picture; otherwise the source keeps its own data URL.
+		const image = byUrl.get(row.destination);
+		if (!image) continue;
 		let id = image.id;
 		if (!id || ids.get(id) !== 1 || !_RAPIER_SHARED_ID.test(id)) {
 			const label = labels.get(row.destination);
@@ -428,7 +661,6 @@ function* _rapierSharedSourceFormsSteps(source, root, substitutions, preparedDes
 		}
 		if (!used.includes(id)) used.push(id);
 		if (row.reference && !definitions.includes(row.reference)) definitions.push(row.reference);
-		resolved = resolved.slice(0, row.start) + shownUrl + resolved.slice(row.end);
 		carrierEdits.push({start: row.start, end: row.end, text: '#' + id});
 	}
 	let carried = '', cursor = source.length;
@@ -438,13 +670,13 @@ function* _rapierSharedSourceFormsSteps(source, root, substitutions, preparedDes
 		cursor = edit.start;
 	}
 	carried = (yield* _rapierSharedEncodeSteps(source.slice(0, cursor))) + carried;
-	return { resolved, carried, ids: used, definitions };
+	return { resolved: source, carried, ids: used, definitions };
 }
 
 async function _rapierSharedSourceCarrier(context, root) {
 	const source = (context.metadata.bom ? '\uFEFF' : '') + context.canonical;
-	const forms = context.work ? await _rapierSharedSourceFormsAsync(source, root, context.imageSubstitutions, context.work)
-		: _rapierSharedSourceForms(source, root, context.imageSubstitutions);
+	const forms = context.work ? await _rapierSharedSourceFormsAsync(source, root, context.work)
+		: _rapierSharedSourceForms(source, root);
 	const esc = escapeRapierHtmlText;
 	return '<script type="' + _RAPIER_SHARED_SOURCE_TYPE + '" data-filename="' + esc(context.metadata.filename) +
 		'" data-kind="' + esc(context.metadata.docKind) + '" data-sha256="' + await _rapierSharedSourceHash(forms.resolved, context.work) +
@@ -740,12 +972,32 @@ async function _rapierRequireOfflinePageImages(root) {
 		if (!source || source.startsWith('#') || embedded(source)) return;
 		missing.push(label + ': ' + (source.startsWith('data:') ? '(unsupported embedded resource)' : source));
 	};
-	for (const [index, image] of [...root.querySelectorAll('img,[data-rapier-remote-src]')].entries()) {
-		const src = image.getAttribute('data-rapier-remote-src') ?? image.getAttribute('src') ?? '';
-		if (embedded(src)) continue;
+	for (const [index, image] of [...root.querySelectorAll('img,[data-rapier-remote-src],image,source[srcset]')].entries()) {
+		const tag = image.tagName.toLowerCase();
+		const src = image.getAttribute('data-rapier-remote-src') ?? image.getAttribute(tag === 'image' ? 'href' : 'src') ?? image.getAttribute('xlink:href') ?? '';
+		const srcset = image.getAttribute('srcset') || '';
+		const sources = [];
+		const picture = image.parentElement?.tagName.toLowerCase() === 'picture' && image.parentElement;
+		const alternative = picture && [...picture.querySelectorAll('source[srcset]')].some(source => source.getAttribute('srcset').trim());
+		if (tag !== 'source' && (src || !srcset && !alternative)) sources.push(src);
+		// A data URL contains its own comma. Read each URL before its optional
+		// density/width descriptor, as HTML's image candidate list does.
+		for (let at = 0; at < srcset.length;) {
+			while (at < srcset.length && /[\t\n\f\r ,]/.test(srcset[at])) at++;
+			const start = at;
+			while (at < srcset.length && !/[\t\n\f\r ]/.test(srcset[at])) at++;
+			const candidate = srcset.slice(start, at);
+			if (!candidate) break;
+			sources.push(candidate.replace(/,+$/, ''));
+			if (candidate.endsWith(',')) continue;
+			while (at < srcset.length && srcset[at++] !== ',') {}
+		}
 		const alt = image.getAttribute('data-rapier-remote-alt') ?? image.getAttribute('alt') ?? '';
-		const destination = /^data:/i.test(src) ? '(unsupported embedded image)' : src || '(missing image source)';
-		missing.push('Picture ' + (index + 1) + (alt ? ' — ' + alt : '') + ': ' + destination);
+		for (const source of new Set(sources)) {
+			if (globalThis.RapierImageAssets.dataImage(source)) continue;
+			const destination = /^data:/i.test(source) ? '(unsupported embedded image)' : source || '(missing image source)';
+			missing.push('Picture ' + (index + 1) + (alt ? ' — ' + alt : '') + ': ' + destination);
+		}
 	}
 	// A source candidate or an SVG/CSS picture is still an automatic resource. Inspect
 	// the retained data; ordinary links remain navigation and local fragment references stay local.
@@ -758,8 +1010,6 @@ async function _rapierRequireOfflinePageImages(root) {
 		if (tag === 'object') requireResource(element.getAttribute('data'), 'object source');
 		if (tag === 'link' || element.namespaceURI === 'http://www.w3.org/2000/svg' && tag !== 'a')
 			for (const attribute of ['href', 'xlink:href']) requireResource(element.getAttribute(attribute), tag + ' ' + attribute);
-		if (tag === 'img' || tag === 'source') for (const source of _rapierSrcsetUrls(element.getAttribute('srcset') || ''))
-			requireResource(source, tag + ' source candidate');
 		for (const attribute of element.attributes || []) if (cssAttributes.has(attribute.name.toLowerCase())) {
 			const urls = _rapierCssValueUrls(attribute.value);
 			if (urls === null) missing.push(tag + ' ' + attribute.name + ': (unresolved CSS resource)');
@@ -767,39 +1017,9 @@ async function _rapierRequireOfflinePageImages(root) {
 		}
 	}
 	if (!missing.length) return;
-	// An acknowledged, scrollable sheet, not a disappearing toast or a partial-file opt-in.
-	// Both Close and Cancel below refuse; neither can authorize a page with missing pictures.
-	if (typeof rapierConfirm === 'function') await rapierConfirm({
-		title: 'pictures not included',
-		message: 'No web page was written. Embed these pictures before exporting or sharing an offline page. '
-			+ 'Your document is unchanged. ' + missing.join('; '),
-		confirmLabel: 'close',
-	});
-	throw Object.assign(new Error('Web page not written; embed the listed pictures and try again'), {code: 'EXPORT_IMAGE_UNAVAILABLE'});
-}
-
-function _rapierSrcsetUrls(value) {
-	const urls = [];
-	let at = 0;
-	while (at < value.length) {
-		while (at < value.length && /[\t\n\f\r ,]/.test(value[at])) at++;
-		const start = at;
-		while (at < value.length && !/[\t\n\f\r ]/.test(value[at])) at++;
-		const source = value.slice(start, at);
-		if (!source) break;
-		// A data URL's comma belongs to its URL. Only trailing separators or the
-		// comma after a descriptor finish a candidate.
-		if (source.endsWith(',')) { urls.push(source.replace(/,+$/, '')); continue; }
-		urls.push(source);
-		let parentheses = 0;
-		while (at < value.length) {
-			const char = value[at++];
-			if (char === '(') parentheses++;
-			else if (char === ')' && parentheses) parentheses--;
-			else if (char === ',' && !parentheses) break;
-		}
-	}
-	return urls;
+	// The writer refuses immediately; interactive callers own any explanatory sheet.
+	throw Object.assign(new Error('Web page not written; embed these pictures and try again. ' + missing.join('; ')),
+		{code: 'offline_image_unavailable'});
 }
 
 // Shared by live CSS admission and offline resource admission. Quoted strings are
@@ -879,27 +1099,8 @@ function _rapierCssValueUrls(value) {
 
 async function _rapierBuildSharedPage(captured) {
 	const context = await _rapierPrepareInterchangeContext({kind: 'share'}, captured);
-	// One owner for every HTML file Rapier writes, including offline-image admission and CSP.
-	// Share adds only the nearest-side no-script float and the long-code treatment.
-	const artifact = await _rapierBuildArtifact({
-		kind: 'standalone',
-		extraCss: _rapierSharedPageFallbackCss(),
-		async afterRoot(root) {
-			/* Unlike TXT/DOCX (which route through _rapierProjectPortableRoot and have no
-				 native disclosure widget to fall back on), the shared page is a real HTML
-				 document a real browser renders — the same styled root the standalone HTML
-				 export already leaves untouched (_rapierBuildArtifact never flattens
-				 details for kind:'standalone'). <details>/<summary> pass the 'export'
-				 sanitize profile unchanged (only <form> is forbidden), so flattening here
-				 only threw away a native, JS-free expand/collapse the architecture's own
-				 fidelity table promises ("Complete shared/styled HTML: Exact recoverable
-				 source"). Leave it as authored, exactly like standalone HTML export. */
-			if (context.work) {
-				await finishAsync(_rapierSharedPageLayoutSteps(root), context.work);
-				await finishAsync(_rapierShareCapLongCodeBlocksSteps(root), context.work);
-			} else { _rapierSharedPageLayout(root); _rapierShareCapLongCodeBlocks(root); }
-		},
-	}, context);
+	// Share and Export write the same complete page, including native disclosures.
+	const artifact = await _rapierBuildArtifact({kind: 'standalone'}, context);
 	// No cap and no warning: the page is as large as the document is. A page over the editor's own 25
 	// MiB open limit still opens in any browser.
 	const blob = new Blob([artifact.html], {type: 'text/html;charset=utf-8'});
@@ -1004,6 +1205,7 @@ function _rapierImageDestinations(source, accepts) {
 
 function _rapierScanMarkdownImages(raw, parsedTokens = null) {
 	const source = String(raw || '');
+	const html = htmlImageRecord(source); if (html) return [html];
 	const found = [];
 
 	if (source.indexOf('![') < 0) return found;
@@ -1185,6 +1387,11 @@ function _rapierImageOpenRunsList(tokens) {
 				continue;
 			}
 			if (token.type === 'rapier_color_close') { stack.pop(); continue; }
+			if (token.type === 'rapier_font_open') {
+				stack.push({open: token.meta?.mdFont?.source || formatFontOpen(token.attrGet('data-md-font')), close: FONT_CLOSE});
+				continue;
+			}
+			if (token.type === 'rapier_font_close') { stack.pop(); continue; }
 			if (token.type === 'strong_open' || token.type === 'em_open' || token.type === 's_open') {
 				stack.push({open: token.markup, close: token.markup});
 				continue;
@@ -1512,7 +1719,7 @@ function _rapierProjectArtifactLayout(root, metadata, geometry, pretext) {
       restore();
 
       if (!root.isConnected || printing || view.matchMedia?.('print').matches) return;
-      const children = [...root.children];
+      const children = [...root.children].filter(element => !element.hasAttribute('data-rapier-html-preview'));
       if (children.length > 8192) return;
       // behind/front collapse and place like around/box but are never obstacles.
       const outOfFlow = value => value?.wrap === 'behind' || value?.wrap === 'front';
@@ -1546,6 +1753,12 @@ function _rapierProjectArtifactLayout(root, metadata, geometry, pretext) {
           const lines = layout.lines != null ? geometry.lineMetrics(element) : null;
           const unrotated = geometry.imageBox(width, image.naturalWidth, image.naturalHeight, layout, imageWidth, lines);
           if (!unrotated) { restore(); return; }
+          if (image.hasAttribute('data-rapier-html')) {
+            const attrs = JSON.parse(decodeURIComponent(image.getAttribute('data-rapier-html'))).attrs;
+            const line = parseFloat(computed.lineHeight) || (parseFloat(computed.fontSize) || 16) * 1.6;
+            unrotated.height = !attrs.height || attrs.height === 'auto'
+              ? Number(image.dataset.rapierNaturalHeight) || box(image).height : Number(attrs.height) * line;
+          }
           // rasterReserved (layout/model.mjs).
           const rasterRad = (layout.rotate || 0) * Math.PI / 180;
           const fit = geometry.rasterReserved(width, unrotated, rasterRad);
@@ -1618,6 +1831,7 @@ function _rapierProjectArtifactLayout(root, metadata, geometry, pretext) {
   observer?.observe(root);
   root.addEventListener('load', schedule, true);
   root.addEventListener('error', schedule, true);
+  root.addEventListener('rapier-html-resize', schedule);
   root.addEventListener('toggle', schedule, true);
   view.addEventListener('resize', schedule);
   view.addEventListener('pageshow', schedule);
@@ -1632,6 +1846,7 @@ function _rapierProjectArtifactLayout(root, metadata, geometry, pretext) {
     observer?.disconnect(); restore();
     root.removeEventListener('load', schedule, true);
     root.removeEventListener('error', schedule, true);
+    root.removeEventListener('rapier-html-resize', schedule);
     root.removeEventListener('toggle', schedule, true);
     view.removeEventListener('resize', schedule);
     view.removeEventListener('pageshow', schedule);
@@ -1668,6 +1883,23 @@ function _rapierArtifactInkScript(root, nonce = '') {
   return '<script' + (nonce ? ' nonce="' + nonce + '"' : '') + '>\n' + script.replace(/<\/script/gi, '<\\/script') + '\n</script>';
 }
 
-  return {_rapierDataImageDestinationsAsync, _rapierSharedSourceFormsAsync, _rapierPrefixPortableAnchorsSteps, _rapierProjectStyledRootAsync, _rapierBuildArtifact, _rapierProjectStyledRoot, _rapierPaintCode, _rapierPrefixPortableAnchors, _rapierDocumentSettingsOf, _rapierDocumentSettingsCss, _rapierExportedPageCsp, _rapierArtifactNonce, _rapierAnnotateExportBoxPolygons, _rapierSharedSourceHash, _rapierSharedSourceForms, _rapierSharedSourceCarrier, _rapierSharedResolve, _rapierReadSharedDocument, _rapierSharedPageFallbackCss, _rapierShareWrapKind, _rapierSharePictureParagraph, _rapierSharedPageLayout, _rapierShareCapLongCodeBlocks, _rapierRequireOfflinePageImages, _rapierCssValueUrls, _rapierBuildSharedPage, _rapierImageSources, _rapierImageDestinations, _rapierScanMarkdownImages, _rapierParseMarkdownImageDestination, _rapierImageOpenRunsList, _rapierArtifactFactoryModules, _rapierProjectArtifactLayout, _rapierArtifactLayoutScript, _rapierArtifactInkScript , render};
+function _rapierArtifactTypographyScript(root, nonce = '') {
+  const pictures = root.querySelector('img[data-rapier-print-lines]');
+  if (!pictures && !root.querySelector('p[data-md-hyphens="auto"],p[data-md-lines],p[data-md-caps="small"],p[data-md-hanging="on"]')) return '';
+  const script = '(() => {\nconst typography = (' + createTypography.toString() + ')();\n' +
+    (pictures ? 'const capitals = (' + createPrintCapitals.toString() + ')((' + createLineMeasurer.toString() + ')(),(' + linesHeight.toString() + '),(' + followingPrintProse.toString() + '));\n' : '') +
+    'const root = document.querySelector("main.rapier-page"); let frame = 0, width = -1, printing = matchMedia("print").matches;\n' +
+    'const apply = () => { frame = 0; ' + (pictures ? 'if (printing) capitals.apply(root); else capitals.clear(root); ' : '') + 'typography.apply(root, {all:true}); };\n' +
+    'const schedule = () => { if (!frame) frame = requestAnimationFrame(apply); };\n' +
+    'globalThis.__RAPIER_EXPORT_READY__ = Promise.all([document.fonts?.ready, ...Array.from(root.querySelectorAll("img"), image => image.decode?.().catch(() => {}))]).then(() => new Promise(resolve => requestAnimationFrame(() => { apply(); resolve(); })));\n' +
+    'addEventListener("resize", schedule); addEventListener("beforeprint", () => { printing = true; apply(); });\n' +
+    'addEventListener("afterprint", () => { printing = false; ' + (pictures ? 'capitals.clear(root); ' : '') + 'schedule(); });\n' +
+    'root.addEventListener("load", schedule, true);\n' +
+    'if (typeof ResizeObserver === "function") new ResizeObserver(() => { const next = root.getBoundingClientRect().width; if (next !== width) { width = next; schedule(); } }).observe(root);\n' +
+    '})();';
+  return '<script' + (nonce ? ' nonce="' + nonce + '"' : '') + '>\n' + script.replace(/<\/script/gi, '<\\/script') + '\n</script>';
+}
+
+  return {_rapierDataImageDestinationsAsync, _rapierSharedSourceFormsAsync, _rapierPrefixPortableAnchorsSteps, _rapierProjectStyledRootAsync, _rapierBuildArtifact, _rapierBuildPublishedPage, _rapierProjectStyledRoot, _rapierDocxRenderStyles, _rapierPaintCode, _rapierPrefixPortableAnchors, _rapierDocumentSettingsOf, _rapierDocumentSettingsCss, _rapierExportedPageCsp, _rapierArtifactNonce, _rapierAnnotateExportBoxPolygons, _rapierSharedSourceHash, _rapierSharedSourceForms, _rapierSharedSourceCarrier, _rapierSharedResolve, _rapierReadSharedDocument, _rapierSharedPageFallbackCss, _rapierShareWrapKind, _rapierSharePictureParagraph, _rapierSharedPageLayout, _rapierShareCapLongCodeBlocks, _rapierRequireOfflinePageImages, _rapierCssValueUrls, _rapierBuildSharedPage, _rapierImageSources, _rapierImageDestinations, _rapierScanMarkdownImages, _rapierParseMarkdownImageDestination, _rapierImageOpenRunsList, _rapierArtifactFactoryModules, _rapierProjectArtifactLayout, _rapierArtifactLayoutScript, _rapierArtifactInkScript , render};
 }
 export {createRenderer};