rapier-markdown-kit 1.2.31 → 1.2.33

package/dist/kit/render-print.mjs

@@ -3,7 +3,7 @@ import {collectPdfVectors} from './pdf-vectors.mjs';
 import {collectPdfGlyphs} from './pdf-glyphs.mjs';
 import {pdfFontSources, waitForFonts} from './export-fonts.mjs';
 import {apply as applyTypography} from '../layout/typography.mjs';
-import {documentLanguage} from '../spec/document-settings.mjs';
+import {documentLanguage, pageSizeOf} from '../spec/document-settings.mjs';
 import {applyPrintCapitals} from './print-capitals.mjs';
 import {stripOneTerminator as _rapierWillStripOneTerminator} from '../agent/will.mjs';
 import {quotedWillSpan} from '../spec/md-marks.mjs';
@@ -196,14 +196,31 @@ function wrapMasks(main) {
 	}
 }
 
+const REFUSALS = {
+	visual_too_large: 'This document is too large for a PDF. Use Word or HTML, or split it.',
+	visual_resources_unavailable: 'A picture or font could not be read for the PDF.',
+	visual_capture_expired: 'The PDF took too long to draw. Try again, or split the document.',
+	pdf_render_timeout: 'The PDF took too long to draw. Try again, or split the document.',
+	pdf_render_unavailable: 'This browser could not draw the PDF.',
+	pdf_page_geometry_invalid: 'The page size is not one a PDF can use.',
+	pdf_text_glyph_limit: 'The PDF cannot hold this many different letters. Use Word or HTML.',
+	pdf_template_border_unavailable: 'The page border could not be drawn.',
+	document_changed: 'The document changed while the PDF was drawn. Try again.',
+	export_too_large: 'The file is larger than the limit. Split the document.',
+};
+
 async function _rapierWritePrintPdf({root, css, fontCss = '', canonical, bom = false, filename, title, settings, templatePage = null}, {capture, signal, current, maxBytes = 8 * 1024 * 1024, film, ink} = {}) {
 	const refuse = code => { throw Object.assign(new Error(code), {code}); };
+	const spoken = error => {
+		const code = error?.code || error?.message, words = REFUSALS[code];
+		return words && error.message !== words ? Object.assign(new Error(words), {code}) : error;
+	};
 	const check = () => {
 		if (signal?.aborted) refuse('cancelled');
 		if (current?.() === false) refuse('document_changed');
 	};
 	if (!root?.ownerDocument || typeof capture !== 'function') refuse('pdf_render_unavailable');
-	const paper = settings?.papersize || {width: 11906, height: 16838};
+	const paper = settings?.papersize || (templatePage ? pageSizeOf(settings) : {width: 11906, height: 16838});
 	const width = paper.width / 20, height = paper.height / 20;
 	const margins = Object.fromEntries(['top', 'right', 'bottom', 'left'].map(side =>
 		[side, settings?.geometry ? settings.geometry[side] / 20 : (side === 'top' ? 12 : 14) * 72 / 25.4]));
@@ -301,7 +318,7 @@ async function _rapierWritePrintPdf({root, css, fontCss = '', canonical, bom = f
 		nativeGlyphs = await collectPdfGlyphs(main, glyphOptions);
 		const textPages = await _rapierPrintTextPages(main, bodyWidth, count, check, undefined, nativeGlyphs.nodes, nativeGlyphs.markers);
 		const linkPages = _rapierPrintLinkPages(main, bodyWidth, bodyHeight, count);
-		vectors = await collectPdfVectors(main, {width: bodyWidth, height: bodyHeight, count, capture, signal, current, check, maxBytes,
+		vectors = await collectPdfVectors(main, {width: bodyWidth, height: bodyHeight, count, capture, signal, current, check, maxBytes, underlay: true,
 			sanitizeSvg: globalThis.RapierImageAssets?.sanitizeSvgText,
             collectText: root => collectPdfGlyphs(root, {...glyphOptions, origin: main.getBoundingClientRect()})});
         for (const {root, original, text} of vectors.textRoots) {
@@ -322,6 +339,8 @@ async function _rapierWritePrintPdf({root, css, fontCss = '', canonical, bom = f
 		strip.style.width = count * bodyWidth + 'px';
 		strip.style.transform = 'none';
 		if (typeof film !== 'function') refuse('pdf_render_unavailable');
+		const underlay = vectors.pages.some(items => items.some(drawing => drawing.under));
+		if (underlay) surface.style.setProperty('background', 'transparent');
 		let pendingFilm = null, abandonFilm = false;
 		const trackedFilm = Promise.resolve(film({root: surface, signal, current, frame: {width: count * bodyWidth, height: bodyHeight}})).then(session => {
 			if (abandonFilm) session?.close?.();
@@ -340,22 +359,23 @@ async function _rapierWritePrintPdf({root, css, fontCss = '', canonical, bom = f
 		let share = Math.max(1, Math.min(Math.floor(CAPTURE_EDGE / bodyWidth), Math.floor(CAPTURE_PIXELS / (bodyWidth * bodyHeight))));
 		const pages = [];
 		let imageBytes = 0;
-		const pack = async rgb => {
-			const packed = new Uint8Array(await step(new Response(new Blob([rgb]).stream().pipeThrough(new CompressionStream('deflate'))).arrayBuffer()));
+		const deflate = async bytes => {
+			const packed = new Uint8Array(await step(new Response(new Blob([bytes]).stream().pipeThrough(new CompressionStream('deflate'))).arrayBuffer()));
 			imageBytes += packed.byteLength;
 			if (imageBytes > maxBytes) refuse('export_too_large');
-			pages.push({rgb: packed});
+			return packed;
 		};
+		const pack = async (rgb, alpha = null) => pages.push({rgb: await deflate(rgb), ...(alpha && {alpha: await deflate(alpha)})});
 		const tileWidth = Math.min(bodyWidth, CAPTURE_EDGE), tileHeight = Math.min(bodyHeight, CAPTURE_EDGE, Math.floor(CAPTURE_PIXELS / tileWidth));
 		for (let index = 0; tiled && index < count; index++) {
 			const tiles = [];
 			for (let y = 0; y < bodyHeight; y += tileHeight) for (let x = 0; x < bodyWidth; x += tileWidth) {
 				check();
 				const width = Math.min(tileWidth, bodyWidth - x), height = Math.min(tileHeight, bodyHeight - y);
-				const shot = await step(filmSession.raster({x: index * bodyWidth + x, y, width, height}));
-				if (shot?.width !== width || shot?.height !== height || !(shot.rgb instanceof Uint8Array)) refuse('pdf_render_unavailable');
-				await pack(shot.rgb);
-				shot.rgb = null;
+				const shot = await step(filmSession.raster({x: index * bodyWidth + x, y, width, height}, {transparent: underlay}));
+				if (shot?.width !== width || shot?.height !== height || !(shot.rgb instanceof Uint8Array) || underlay && !(shot.alpha instanceof Uint8Array)) refuse('pdf_render_unavailable');
+				await pack(shot.rgb, shot.alpha);
+				shot.rgb = shot.alpha = null;
 				tiles.push({...pages.pop(), x, y, width, height});
 			}
 			pages.push({tiles});
@@ -364,21 +384,22 @@ async function _rapierWritePrintPdf({root, css, fontCss = '', canonical, bom = f
 			check();
 			const span = Math.min(share, count - first);
 			try {
-				const shot = await step(filmSession.raster({x: first * bodyWidth, y: 0, width: span * bodyWidth, height: bodyHeight}));
-				if (shot?.width !== span * bodyWidth || shot?.height !== bodyHeight || !(shot.rgb instanceof Uint8Array)) refuse('pdf_render_unavailable');
-				if (span === 1) await pack(shot.rgb);
+				const shot = await step(filmSession.raster({x: first * bodyWidth, y: 0, width: span * bodyWidth, height: bodyHeight}, {transparent: underlay}));
+				if (shot?.width !== span * bodyWidth || shot?.height !== bodyHeight || !(shot.rgb instanceof Uint8Array) || underlay && !(shot.alpha instanceof Uint8Array)) refuse('pdf_render_unavailable');
+				if (span === 1) await pack(shot.rgb, shot.alpha);
 				else {
 					const row = bodyWidth * 3;
 					for (let offset = 0; offset < span; offset++) {
-						const rgb = new Uint8Array(bodyWidth * bodyHeight * 3);
+						const rgb = new Uint8Array(bodyWidth * bodyHeight * 3), alpha = shot.alpha ? new Uint8Array(bodyWidth * bodyHeight) : null;
 						for (let y = 0; y < bodyHeight; y++) {
 							const from = (y * shot.width + offset * bodyWidth) * 3;
 							rgb.set(shot.rgb.subarray(from, from + row), y * row);
+							if (alpha) alpha.set(shot.alpha.subarray(y * shot.width + offset * bodyWidth, y * shot.width + (offset + 1) * bodyWidth), y * bodyWidth);
 						}
-						await pack(rgb);
+						await pack(rgb, alpha);
 					}
 				}
-				shot.rgb = null;
+				shot.rgb = shot.alpha = null;
 			} catch (error) {
 				if (error?.code === 'visual_too_large' && span > 1) { share = Math.ceil(span / 2); continue; }
 				throw error;
@@ -394,14 +415,15 @@ async function _rapierWritePrintPdf({root, css, fontCss = '', canonical, bom = f
 			holder.append(picture); into.body.append(holder);
 			await step(picture.decode());
 			backdrop = await collectPdfVectors(holder, {width: sheetWidth, height: sheetHeight, count: 1, capture, signal, current, check, maxBytes,
-				sanitizeSvg: globalThis.RapierImageAssets?.sanitizeSvgText});
+				sanitizeSvg: globalThis.RapierImageAssets?.sanitizeSvgText, pictures: true});
 			if (!backdrop.pages[0].length) refuse('pdf_template_border_unavailable');
 		}
 		const bytes = await writeRasterPdf({pages, textPages, linkPages, vectorPages: vectors.pages, canonical, bom, filename, title, font, width, height, margins, backdrop: backdrop?.pages[0] || null,
 			pixelWidth: bodyWidth, pixelHeight: bodyHeight, pageNumbers: settings?.pagestyle === 'plain', maxBytes, check});
 		check();
 		return {bytes, pages: count, painted: nativeGlyphs.painted};
-	} finally { filmSession?.close(); backdrop?.restore(); vectors?.restore(); nativeGlyphs?.restore(); signal?.removeEventListener('abort', abort); frame.remove(); }
+	} catch (error) { throw spoken(error); }
+	finally { filmSession?.close(); backdrop?.restore(); vectors?.restore(); nativeGlyphs?.restore(); signal?.removeEventListener('abort', abort); frame.remove(); }
 }
 
 async function _rapierPrintTextPages(main, pageWidth, count, check, origin = main.getBoundingClientRect(), nativeNodes = null, markerNodes = null) {
@@ -471,14 +493,14 @@ async function _rapierPrintTextPages(main, pageWidth, count, check, origin = mai
                 parts = joined;
             }
 			const last = pages[page].at(-1);
-			if (last && !formula && !last.math && last.block === block && last.carrier === carrier && (last.marker || Math.abs(last.y - y) < Math.max(2, Math.min(last.height, bottom - y) * .2))) {
+			if (last && !formula && !last.math && !last.marker && last.block === block && last.carrier === carrier && Math.abs(last.y - y) < Math.max(2, Math.min(last.height, bottom - y) * .2)) {
 				if (!preserve && last.text.endsWith(' ') && text.startsWith(' ') && parts.length) {
 					const first = parts[0];
 					if (first.text === ' ') parts.shift();
 					else {const advance = first.width / Array.from(first.text).length; first.text = first.text.slice(1); first.x += advance; first.width -= advance;}
 				}
 				last.text = preserve ? last.text + text : (last.text + text).replace(/[ \t\r\n\f]+/g, ' ');
-				last.parts.push(...parts); last.marker = false;
+				last.parts.push(...parts);
 				last.width = Math.max(last.x + last.width, right) - Math.min(last.x, x);
 				last.height = Math.max(last.y + last.height, bottom) - Math.min(last.y, y);
 				last.x = Math.min(last.x, x); last.y = Math.min(last.y, y);
@@ -512,13 +534,29 @@ async function _rapierPrintTextPages(main, pageWidth, count, check, origin = mai
 	}
 	const ROLES = {TABLE: 'Table', TR: 'TR', TD: 'TD', TH: 'TH', UL: 'L', OL: 'L', LI: 'LI', BLOCKQUOTE: 'BlockQuote', P: 'P', PRE: 'Code', FIGCAPTION: 'Caption',
 		H1: 'H1', H2: 'H2', H3: 'H3', H4: 'H4', H5: 'H5', H6: 'H6'};
-	const tags = block => {
+	const bodies = new WeakMap(), labels = new WeakMap();
+	const tags = (block, marker) => {
 		const chain = [];
 		for (let node = block; node && node !== main; node = node.parentElement)
 			if (ROLES[node.tagName] || node === block && node.matches('.rapier-will-carrier')) chain.unshift({node, role: ROLES[node.tagName] || 'P'});
-		return chain;
+		const out = [];
+		chain.forEach((entry, at) => {
+			const note = entry.node.localName === 'li' && entry.node.classList.contains('footnote-item');
+			out.push(note ? {...entry, role: 'Note'} : entry);
+			if (entry.node.localName !== 'li') return;
+			const last = !chain.slice(at + 1).some(inner => inner.node.localName === 'li');
+			if (marker && last) {
+				if (!labels.has(entry.node)) labels.set(entry.node, {});
+				out.push({node: labels.get(entry.node), role: 'Lbl'});
+			}
+			else if (!note) {
+				if (!bodies.has(entry.node)) bodies.set(entry.node, {});
+				out.push({node: bodies.get(entry.node), role: 'LBody'});
+			}
+		});
+		return out;
 	};
-	return pages.map(page => page.map(({block, ...run}) => ({...run, tags: tags(block)})));
+	return pages.map(page => page.map(({block, ...run}) => ({...run, tags: tags(block, run.marker)})));
 }
 
 function _rapierPrintLinkPages(main, width, height, count) {
@@ -595,7 +633,7 @@ async function writeRasterPdf({pages, textPages, linkPages = [], vectorPages = [
 	const hex = value => Array.from({length: value.length}, (_, index) => value.charCodeAt(index).toString(16).padStart(4, '0')).join('');
 	const literal = value => '(' + String(value).replace(/[\\()\r\n]/g, character => ({'\\': '\\\\', '(': '\\(', ')': '\\)', '\r': '\\r', '\n': '\\n'}[character])) + ')';
 	const source = encoder.encode((bom ? '\uFEFF' : '') + canonical);
-	const embedded = stream('/Type /EmbeddedFile /Subtype /text#2Fplain /Params <</Size ' + source.length + '>> /Filter /FlateDecode', await compressed(source));
+	const embedded = stream('/Type /EmbeddedFile /Subtype /text#2Fmarkdown /Params <</Size ' + source.length + '>> /Filter /FlateDecode', await compressed(source));
 	const file = add('<< /Type /Filespec /F ' + literal(String(filename).replace(/[^\x20-\x7e]/g, '_')) + ' /UF <feff' + hex(filename) + '> /AFRelationship /Source /EF << /F ' + embedded + ' 0 R /UF ' + embedded + ' 0 R >> >>');
 	for (const page of textPages) for (const run of page) {
 		let previous = null;
@@ -741,7 +779,9 @@ async function writeRasterPdf({pages, textPages, linkPages = [], vectorPages = [
 		const held = pages[index], flate = !!held?.rgb;
 		const tiles = held?.tiles || [{...(flate ? held : {jpeg: held}), x: 0, y: 0, width: pixelWidth, height: pixelHeight}];
 		const pictures = tiles.map((tile, at) => '/Im0_' + at + ' ' + stream('/Type /XObject /Subtype /Image /Width ' + tile.width + ' /Height ' + tile.height +
-			' /ColorSpace /DeviceRGB /BitsPerComponent 8 /Filter /' + (tile.rgb ? 'FlateDecode' : 'DCTDecode'), tile.rgb || tile.jpeg) + ' 0 R'), states = [];
+			' /ColorSpace /DeviceRGB /BitsPerComponent 8' + (tile.alpha ? ' /SMask ' + stream('/Type /XObject /Subtype /Image /Width ' + tile.width + ' /Height ' + tile.height +
+				' /ColorSpace /DeviceGray /BitsPerComponent 8 /Filter /FlateDecode', tile.alpha) + ' 0 R' : '') +
+			' /Filter /' + (tile.rgb ? 'FlateDecode' : 'DCTDecode'), tile.rgb || tile.jpeg) + ' 0 R'), states = [];
 		pages[index] = null;
 		const emit = (drawing, left, top, clipWidth, clipHeight) => {
 			let out = `q\n.75 0 0 -.75 ${decimal(left)} ${decimal(top)} cm\n0 0 ${clipWidth} ${clipHeight} re W n\n1 0 0 1 ${decimal(drawing.x)} 0 cm\n`;
@@ -770,9 +810,10 @@ async function writeRasterPdf({pages, textPages, linkPages = [], vectorPages = [
 		};
 		let commands = '';
 		for (const drawing of backdrop || []) commands += emit(drawing, 0, height, Math.round(width * 4 / 3), Math.round(height * 4 / 3));
+		for (const drawing of vectorPages[index] || []) if (drawing.under) commands += emit(drawing, margins.left, height - margins.top, pixelWidth, pixelHeight);
 		commands += '/Artifact BMC\n' + tiles.map((tile, at) => 'q\n' + [decimal(tile.width * .75), 0, 0, decimal(tile.height * .75), decimal(margins.left + tile.x * .75),
 			decimal(height - margins.top - (tile.y + tile.height) * .75)].join(' ') + ' cm\n/Im0_' + at + ' Do\nQ\n').join('') + 'EMC\n';
-		for (const drawing of vectorPages[index] || []) commands += emit(drawing, margins.left, height - margins.top, pixelWidth, pixelHeight);
+		for (const drawing of vectorPages[index] || []) if (!drawing.under) commands += emit(drawing, margins.left, height - margins.top, pixelWidth, pixelHeight);
 		const textAlphas = new Map();
 		for (const run of textPages[index]) {
 			if (!run.text && !run.parts?.some(part => part.font)) continue;

package/dist/kit/render.mjs

@@ -4,7 +4,7 @@ import {finish, finishAsync, cloneTree, cleanTree, serializeTree, encodeUtf8Step
 import {fontFamilyCss} 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 {documentLanguage, documentSettingsFonts, pageSizeOf} from '../spec/document-settings.mjs';
 import {createLineMeasurer, linesHeight} from '../layout/model.mjs';
 import {markPrintCapitals, createPrintCapitals, followingPrintProse} from './print-capitals.mjs';
 import {freezePublishedInk} from './render-ink.mjs';
@@ -205,23 +205,26 @@ async function _rapierBuildArtifact(options, providedContext) {
 }
 
 function _rapierTemplatePage(canonical, settings, root, darkPaper = false) {
-	if (!isTemplatePage(canonical) || !settings?.papersize) return null;
+	if (!isTemplatePage(canonical)) return null;
+	const paper = pageSizeOf(settings);
 	let url = '';
 	for (const paragraph of root.querySelectorAll(':scope > p[data-md-layout]')) {
 		const image = paragraph.querySelector('img');
 		const layout = globalThis.RapierMarkdownLayout.parseLayoutAttribute(paragraph.getAttribute('data-md-layout'));
 		const source = image?.getAttribute('src') || '';
-		if (isPageBorderLayout(layout) && /^data:image\/svg\+xml;base64,[A-Za-z0-9+/=]+$/.test(source)) { url = source; paragraph.remove(); break; }
+		if (isPageBorderLayout(layout) && /^data:image\/(?:png|jpeg|webp|gif|svg\+xml|jxl);base64,[A-Za-z0-9+/=]+$/i.test(source)) { url = source; paragraph.remove(); break; }
 	}
 	if (!url) return null;
-	const width = settings.papersize.width / 15, height = settings.papersize.height / 15;
-	const margins = ['top', 'right', 'bottom', 'left'].map(side => (settings.geometry?.[side] ?? 1440) / 15);
+	const width = paper.width / 15, height = paper.height / 15;
+	const margins = ['top', 'right', 'bottom', 'left'].map(side => (settings?.geometry?.[side] ?? 1440) / 15);
 	const padding = margins.map(value => value + 'px').join(' ');
 	const ground = 'background:var(--rapier-template-border) 0 0/100% 100% no-repeat';
-	const shown = darkPaper ? _rapierDarkPaperSvgUrl(url, '#fafafa') : url;
+	const shown = darkPaper && url.startsWith('data:image/svg+xml;base64,') ? _rapierDarkPaperSvgUrl(url, '#fafafa') : url;
 	const css = ':root{--rapier-template-border:url("' + url + '")}\n'
 		+ '@media screen{' + (shown !== url ? ':root{--rapier-template-border:url("' + shown + '")}' : '') + '.rapier-template-border{display:none}body{background:var(--md-color-inset)}.rapier-page{box-sizing:border-box;width:min(100%,' + width + 'px);min-height:' + height + 'px;margin:0 auto;padding:' + padding
 		+ ';background:var(--rapier-template-border) 0 0/100% ' + height + 'px repeat-y,var(--md-color-bg);color:var(--md-color-text)}}\n'
+		+ '@media screen and (max-width:' + width + 'px){.rapier-page{min-height:auto;aspect-ratio:' + width + '/' + height + ';padding:'
+		+ margins.map(value => 'min(' + value + 'px,' + Number((value / width * 100).toFixed(4)) + '%)').join(' ') + ';background-size:100% auto,auto}}\n'
 		+ '@media print{@page{size:' + width + 'px ' + height + 'px;margin:0}html,body{margin:0;-webkit-print-color-adjust:exact;print-color-adjust:exact}'
 		+ '.rapier-page{box-sizing:border-box;width:auto;max-width:none;margin:0;padding:' + padding + '!important;position:relative!important;z-index:1;box-decoration-break:clone;-webkit-box-decoration-break:clone}'
 		+ '.rapier-template-border{display:block;position:fixed;left:0;top:0;width:' + width + 'px;height:' + height + 'px;z-index:0;' + ground + '}}';
@@ -256,11 +259,7 @@ async function _rapierBuildPublishedPage(context) {
 		throw new TypeError('Publishing requires a captured document.');
 	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);
-		},
+		kind: 'standalone', scripts: false,
 		afterFonts: (root, style) => freezePublishedInk(root, {...style, document, work: current.work,
 			spec: globalThis.RapierMarkdownSpec, ink: globalThis.RapierInk, draw: globalThis.RapierInkDraw}),
 	}, current);
@@ -729,6 +728,14 @@ function* _rapierSharedPageLayoutSteps(root) {
 		}
 		image.style.margin = '0';
 		const naturalWidth = Number(image.getAttribute('width')) || 0, naturalHeight = Number(image.getAttribute('height')) || 0;
+		let turned = '';
+		const turnedCorners = (bounds, width, height, rad) => {
+			const cos = Math.cos(rad), sin = Math.sin(rad), round = value => Math.round(value * 100) / 100 + '%';
+			return [[-1, -1], [1, -1], [1, 1], [-1, 1]].map(([x, y]) => {
+				const dx = x * width / 2, dy = y * height / 2;
+				return round(50 + (dx * cos - dy * sin) / bounds.width * 100) + ' ' + round(50 + (dx * sin + dy * cos) / bounds.height * 100);
+			}).join(', ');
+		};
 		if (layout.rotate && naturalWidth > 0 && naturalHeight > 0) {
 			const rad = layout.rotate * Math.PI / 180, aspect = naturalHeight / naturalWidth;
 			image.style.maxWidth = 'none';
@@ -741,6 +748,7 @@ function* _rapierSharedPageLayoutSteps(root) {
 					height *= scale;
 					bounds = globalThis.RapierImageLayout.rotatedBoundsRad(width, height, rad);
 				}
+				turned = turnedCorners(bounds, width, height, rad);
 				paragraph.style.width = bounds.width + '%';
 				paragraph.style.paddingTop = ((bounds.height - height) / 2) + '%';
 				paragraph.style.paddingBottom = ((bounds.height - height) / 2) + '%';
@@ -748,6 +756,7 @@ function* _rapierSharedPageLayoutSteps(root) {
 				image.style.marginLeft = image.style.marginRight = (((bounds.width - width) / 2) / bounds.width * 100) + '%';
 			} else {
 				const bounds = globalThis.RapierImageLayout.rotatedBoundsRad(naturalWidth, naturalHeight, rad);
+				turned = turnedCorners(bounds, naturalWidth, naturalHeight, rad);
 				paragraph.style.width = bounds.width + 'px';
 				paragraph.style.paddingTop = ((bounds.height - naturalHeight) / 2) + 'px';
 				paragraph.style.paddingBottom = ((bounds.height - naturalHeight) / 2) + 'px';
@@ -763,6 +772,7 @@ function* _rapierSharedPageLayoutSteps(root) {
 			if (layout.width != null || image.getAttribute('width')) image.style.width = '100%';
 		}
 		if (layout.rotate) { image.style.transform = 'rotate(' + layout.rotate + 'deg)'; image.style.transformOrigin = '50% 50%'; }
+		if (turned) paragraph.style.setProperty('shape-outside', 'polygon(' + turned + ') padding-box');
 		if (layout.wrap === 'around' && !layout.rotate && !layout.y && layout.width == null && !image.dataset.rapierContour?.endsWith('-box')) {
 			const src = image.getAttribute('src');
 			if (src) {
@@ -779,15 +789,16 @@ function* _rapierSharedPageLayoutSteps(root) {
 		const layout = globalThis.RapierMarkdownLayout.parseLayoutAttribute(image.getAttribute('data-rapier-image-layout'));
 		if (layout?.wrap !== 'behind' && layout?.wrap !== 'front') continue;
 		const paragraph = _rapierSharePictureParagraph(image);
-		if (paragraph) positionedAssignments.push({image, paragraph, layout});
+		if (paragraph) positionedAssignments.push({image, paragraph, layout, owner: globalThis.RapierMarkdownLayout.wrapNeighbour(paragraph, _rapierShareWrapKind)});
 	}
-	for (const {image, paragraph, layout} of positionedAssignments) {
+	for (const {image, paragraph, layout, owner} of positionedAssignments) {
 		yield;
 		paragraph.style.cssText = 'position:relative;height:0;margin:0;padding:0;line-height:0';
 		const x = layout.x, naturalWidth = Number(image.getAttribute('width')) || 0;
-		if (layout.width != null) image.style.width = layout.width + '%';
+		if (layout.lines != null) { image.style.width = 'auto'; image.style.height = globalThis.RapierMarkdownLayout.linesHeightCss(layout.lines); }
+		else if (layout.width != null) image.style.width = layout.width + '%';
 		else if (naturalWidth > 0) image.style.width = naturalWidth + 'px';
-		image.style.left = x == null ? '0' : layout.width != null ? (x - layout.width / 2) + '%'
+		image.style.left = x == null ? '0' : layout.width != null ? Math.max(0, Math.min(100 - layout.width, x - layout.width / 2)) + '%'
 			: naturalWidth > 0 ? 'calc(' + x + '% - ' + (naturalWidth / 2) + 'px)' : x + '%';
 		image.style.position = 'absolute';
 		image.style.top = (layout.y || 0) + 'em';
@@ -795,6 +806,7 @@ function* _rapierSharedPageLayoutSteps(root) {
 		if (layout.rotate) { image.style.transform = 'rotate(' + layout.rotate + 'deg)'; image.style.transformOrigin = '50% 50%'; }
 		if (layout.wrap === 'behind') image.style.zIndex = '-1';
 		paragraph.classList.add('rapier-positioned-picture');
+		if (owner && owner !== paragraph.nextElementSibling) owner.before(paragraph);
 	}
 	const positioned = new Set([...assignments, ...positionedAssignments].map(row => row.image));
 	for (const image of root.querySelectorAll('img[data-rapier-image-layout]')) {
@@ -807,11 +819,13 @@ function* _rapierSharedPageLayoutSteps(root) {
 		const naturalWidth = Number(image.getAttribute('width')) || 0, naturalHeight = Number(image.getAttribute('height')) || 0;
 		if (naturalWidth > 0 && naturalHeight > 0) {
 			const rad = layout.rotate * Math.PI / 180;
-			const boundWidth = naturalWidth * Math.abs(Math.cos(rad)) + naturalHeight * Math.abs(Math.sin(rad));
-			const boundHeight = naturalWidth * Math.abs(Math.sin(rad)) + naturalHeight * Math.abs(Math.cos(rad));
+			const width = layout.width != null && !layout.lines ? layout.width : naturalWidth, height = layout.width != null && !layout.lines ? layout.width * naturalHeight / naturalWidth : naturalHeight;
+			const unit = layout.width != null && !layout.lines ? '%' : 'px';
+			const boundWidth = width * Math.abs(Math.cos(rad)) + height * Math.abs(Math.sin(rad));
+			const boundHeight = width * Math.abs(Math.sin(rad)) + height * Math.abs(Math.cos(rad));
 			image.style.display = 'block';
-			image.style.marginLeft = image.style.marginRight = ((boundWidth - naturalWidth) / 2) + 'px';
-			image.style.marginTop = image.style.marginBottom = ((boundHeight - naturalHeight) / 2) + 'px';
+			image.style.marginLeft = image.style.marginRight = ((boundWidth - width) / 2) + unit;
+			image.style.marginTop = image.style.marginBottom = ((boundHeight - height) / 2) + unit;
 		}
 	}
 }
@@ -1349,6 +1363,7 @@ function _rapierProjectArtifactLayout(root, metadata, geometry, preparation) {
       balance: 0};
   }
 
+  let inkIds = 0;
   function fragmentNode(record, fragment, idsKept) {
     const run = record.runs[fragment.itemIndex], mapped = geometry.mapFragment(run, fragment, {whiteSpace: record.whiteSpace});
     if (!mapped) return null;
@@ -1374,6 +1389,8 @@ function _rapierProjectArtifactLayout(root, metadata, geometry, preparation) {
     if (!plan) return false;
     const output = doc.createDocumentFragment();
     const idsKept = new Set();
+    for (const run of record.runs) for (const parent of run.parents)
+      if (parent.matches?.('span.rapier-ink-mark[data-rapier-ink]') && !parent.hasAttribute('data-rapier-ink-id')) parent.setAttribute('data-rapier-ink-id', String(++inkIds));
     let previous = null;
     for (const line of plan.lines) {
       const element = doc.createElement('span');

package/dist/layout/hyphenation.mjs

@@ -1,11 +1,23 @@
 // SPDX-License-Identifier: MIT
 import {next, weight, exceptions, maximum} from '../agent/vendor/hyphen-en-us/patterns.js';
 
-function englishCuts(word) {
-  if (!/^[A-Z]?[a-z]+$/.test(word)) return null;
+export function englishCuts(word) {
+  if (!/^[A-Za-z]+$/.test(word)) return null;
+  if (word.length < 6) return [];
+  const cuts = [];
+  let offset = 0, before = 0;
+  for (const part of word.match(/[A-Z]+(?![a-z])|[A-Z]?[a-z]+/g)) {
+    if (before >= 3 && part.length >= 3) cuts.push(offset);
+    for (const at of partCuts(part)) cuts.push(offset+at);
+    offset += part.length; before = part.length;
+  }
+  return cuts.filter(at => at >= 3 && at <= word.length-3).sort((a, b) => a-b).filter((at, index, all) => at !== all[index-1]);
+}
+
+function partCuts(word) {
   if (word.length < 6) return [];
   const lower = word.toLowerCase(), known = exceptions[lower];
-  if (Array.isArray(known)) return known.filter(at => at >= 3 && at <= word.length-3);
+  if (Array.isArray(known)) return known;
   const source = '.'+lower+'.', weights = new Uint8Array(source.length+1);
   for (let start = 0; start < source.length; start++) {
     let node = 0;

package/dist/layout/model.mjs

@@ -12,7 +12,8 @@ export function mapFragment(run, fragment, {whiteSpace = 'normal'} = {}) {
   const raw = typeof run === 'string' ? run : run?.raw;
   if (run?.break === 'never') whiteSpace = 'normal';
   const start = fragment?.sourceStart, end = fragment?.sourceEnd;
-  if (typeof raw !== 'string' || typeof fragment?.text !== 'string' ||
+  const derived = fragment?.derive === true;
+  if (typeof raw !== 'string' || !derived && typeof fragment?.text !== 'string' ||
       !Number.isInteger(start) || !Number.isInteger(end) || start < 0 || end < start || end > raw.length ||
       whiteSpace !== 'normal' && whiteSpace !== 'pre-wrap') return null;
   const pieces = [], offsets = [start];
@@ -33,6 +34,13 @@ export function mapFragment(run, fragment, {whiteSpace = 'normal'} = {}) {
     }
   }
   let text = pieces.join('');
+  if (derived) {
+    if (fragment.glyph) {
+      if (lastSoftHyphen === end - 1) offsets[offsets.length - 1] = lastSoftHyphen;
+      offsets.push(end); text += fragment.glyph;
+    }
+    return {text, offsets, start, end};
+  }
   if (lastSoftHyphen === end - 1 && fragment.text === text + '-') {
     offsets[offsets.length - 1] = lastSoftHyphen;
     offsets.push(end); text += '-';

package/dist/layout/paragraph-fit.mjs

@@ -22,7 +22,7 @@ export function createParagraphFitter() {
     return handle;
   }
 
-  function* solveSteps(handle, width, {indent = 0, left = 0, right = 0, widths = null} = {}, known) {
+  function* solveSteps(handle, width, {indent = 0, left = 0, right = 0, widths = null, shrink = .4, stretch = .8} = {}, known) {
     const prepared = indexes.get(handle);
     if (!prepared || ![width, indent, left, right].every(Number.isFinite) || width <= 0) return null;
     const measures = Array.isArray(widths) && widths.every(value => Number.isFinite(value) && value > 0) ? widths : [];
@@ -44,7 +44,7 @@ export function createParagraphFitter() {
       const closing = Math.min(Math.max(0, right), words.at(-1).closing);
       const target = measure(base) - (segmentIndex === 0 ? indent : 0) + opening + closing;
       const count = words.length - 1;
-      const delta = !count ? 0 : Math.max(-smallest * .4, Math.min(0, (target - natural) / count));
+      const delta = !count ? 0 : Math.max(-smallest * shrink, Math.min(0, (target - natural) / count));
       const overflow = natural + delta * count - target;
       const cost = 1 + 100 * Math.max(0, overflow / target) ** 2;
       if (Number.isFinite(natural) && target > 0 && cost < 2 && minimum[words.length - 1] - minimum[Math.min(words.length - 1, 1)] <= ceiling + .02 &&
@@ -111,7 +111,7 @@ export function createParagraphFitter() {
             const target = measure(base + lineClass) - (segmentIndex === 0 && startIndex === 0 ? indent : 0) + opening + closing;
             if (target <= 0) continue;
             const remaining = target - natural;
-            const delta = !count ? 0 : Math.max(-smallest * .4, Math.min(final ? 0 : smallest * .8, remaining / count));
+            const delta = !count ? 0 : Math.max(-smallest * shrink, Math.min(final ? 0 : smallest * stretch, remaining / count));
             const overflow = natural + delta * count - target;
             if (overflow > .02 && (count || start.cut || end.cut || words[lastWord].breaks.length)) continue;
             const residual = Math.max(0, remaining - delta * count);