reamkit 1.21.0 → 1.23.0

package/dist/esm/layout/styled-layout.js

@@ -1,4 +1,5 @@
-import { resolveFamilyKey } from "../core/fonts/remote-fonts.js";
+import { resolveFamilyStyle } from "../core/fonts/remote-fonts.js";
+import { scriptForCodepoint } from "../core/fonts/scripts.js";
 import { shapeText } from "../core/font/opentype-layout.js";
 import { createFontMeasure } from "../core/font/measure.js";
 import { halfPtToPt, pt } from "../core/ir/units.js";
@@ -948,10 +949,11 @@ function layoutBodyElement(el, options, fontResources, imageResources, contentWi
 	if (el.kind === "paragraph") return layoutParagraphBlock(el.paragraph, options, fontResources, imageResources, contentWidth);
 	if (el.kind === "table") return layoutTableBlock(el.table, options, fontResources, imageResources, contentWidth);
 	if (el.kind === "image") {
-		const meta = el.image.resource ? imageResources?.get(el.image.resource)?.metafile : void 0;
-		return meta ? layoutMetafileBlock(el.image, meta, options, fontResources, contentWidth, maxHeight, box) : layoutImageBlock(el.image, imageResources, contentWidth, maxHeight, box);
+		const res = el.image.resource ? imageResources?.get(el.image.resource) : void 0;
+		const meta = res?.metafile;
+		return meta ? layoutMetafileBlock(el.image, meta, res.metafileImages, options, fontResources, contentWidth, maxHeight, box) : layoutImageBlock(el.image, imageResources, contentWidth, maxHeight, box);
 	}
-	if (el.kind === "chart") return layoutChartBlock(el.chart, options, fontResources, contentWidth, maxHeight);
+	if (el.kind === "chart") return layoutChartBlock(el.chart, options, fontResources, contentWidth, maxHeight, imageResources);
 	return layoutShapeBlock(el.shape, options, fontResources, imageResources, contentWidth, maxHeight, box);
 }
 function layoutImageBlock(image, imageResources, contentWidth, maxHeight, box) {
@@ -999,6 +1001,7 @@ function layoutImageBlock(image, imageResources, contentWidth, maxHeight, box) {
 		resourceName: res?.resourceName ?? "",
 		...image.outline ? { outline: image.outline } : {},
 		...image.wash ? { wash: image.wash } : {},
+		...image.alpha !== void 0 && image.alpha < 1 ? { alpha: image.alpha } : {},
 		...image.crop ? { crop: image.crop } : {},
 		...image.rotation60k ? { rotationDeg: image.rotation60k / 6e4 } : {},
 		...image.flipH ? { flipH: true } : {},
@@ -1026,9 +1029,9 @@ function layoutShapeBlock(shape, options, fontResources, imageResources, content
 	const fillGradient = shape.fill.kind === "gradient" ? shape.fill.gradient : void 0;
 	const fillImage = shape.fill.kind === "picture" && shape.fill.imageResource !== void 0 ? imageResources?.get(shape.fill.imageResource) : void 0;
 	const fillImageResourceName = fillImage?.resourceName;
-	const fillImageTile = shape.fill.kind === "picture" && shape.fill.tiled === true && fillImage?.prepared ? {
-		widthPt: fillImage.prepared.widthPx * 72 / 96,
-		heightPt: fillImage.prepared.heightPx * 72 / 96
+	const fillImageTile = shape.fill.kind === "picture" && shape.fill.tiled === true && fillImage?.prepared ? shape.fill.tileSizePt ?? {
+		widthPt: fillImage.prepared.widthPx * 72 / 96 * (shape.fill.tileScale?.sx ?? 1),
+		heightPt: fillImage.prepared.heightPx * 72 / 96 * (shape.fill.tileScale?.sy ?? 1)
 	} : void 0;
 	const fillColorHex = shape.fill.kind === "solid" ? shape.fill.colorHex : fillGradient ? gradientToSolid(fillGradient) : void 0;
 	const stroke = buildStroke(shape.line);
@@ -1073,7 +1076,7 @@ function layoutShapeBlock(shape, options, fontResources, imageResources, content
 				continue;
 			}
 			if (el.kind === "chart") {
-				const laid = layoutChartBlock(el.chart, options, fontResources, innerWidth);
+				const laid = layoutChartBlock(el.chart, options, fontResources, innerWidth, void 0, imageResources);
 				const line = {
 					tokens: [],
 					contentWidthPt: laid.widthPt,
@@ -1185,6 +1188,8 @@ function layoutShapeBlock(shape, options, fontResources, imageResources, content
 		...fillImageResourceName ? { fillImageResourceName } : {},
 		...fillImageTile ? { fillImageTile } : {},
 		...fillImageResourceName && shape.fill.imageCrop ? { fillImageCrop: shape.fill.imageCrop } : {},
+		...fillImageResourceName && shape.fill.imageFillRect ? { fillImageRect: shape.fill.imageFillRect } : {},
+		...fillImageResourceName && shape.fill.duotone ? { fillImageDuotone: shape.fill.duotone } : {},
 		...fillColorHex ? { fillColorHex } : {},
 		...fillGradient ? { fillGradient } : {},
 		...shape.fill.alpha !== void 0 && shape.fill.alpha < 1 ? { fillAlpha: shape.fill.alpha } : {},
@@ -1222,11 +1227,11 @@ function layoutShapeBlock(shape, options, fontResources, imageResources, content
 * frame. So one is turned into the other rather than growing a block kind, a
 * pagination arm and an emitter of its own.
 */
-function layoutMetafileBlock(image, pic, options, fontResources, contentWidth, maxHeight, box) {
+function layoutMetafileBlock(image, pic, blitted, options, fontResources, contentWidth, maxHeight, box) {
 	const placed = layoutImageBlock(image, void 0, contentWidth, maxHeight, box);
 	const widthPt = placed.widthPt;
 	const heightPt = placed.heightPt;
-	const layout = rotateDrawing(metafileDrawing(pic, widthPt, heightPt, options, fontResources), (image.rotation60k ?? 0) / 6e4, widthPt / 2, heightPt / 2);
+	const layout = rotateDrawing(metafileDrawing(pic, widthPt, heightPt, options, fontResources, image.colorChange, blitted), (image.rotation60k ?? 0) / 6e4, widthPt / 2, heightPt / 2);
 	const pp = image.paragraphProperties;
 	return {
 		kind: "chart",
@@ -1253,6 +1258,7 @@ function rotateDrawing(layout, deg, cx, cy) {
 	});
 	return {
 		shapes: layout.shapes.map((sh) => ({
+			...sh.seq !== void 0 ? { seq: sh.seq } : {},
 			...sh,
 			paths: sh.paths.map((path) => ({
 				...path,
@@ -1289,7 +1295,16 @@ function rotateDrawing(layout, deg, cx, cy) {
 				y: p.y,
 				rotationDeg: (t.rotationDeg ?? 0) - deg
 			};
-		})
+		}),
+		...layout.images ? { images: layout.images.map((img) => {
+			const c = at(img.x + img.width / 2, img.y + img.height / 2);
+			return {
+				...img,
+				x: c.x - img.width / 2,
+				y: c.y - img.height / 2,
+				rotationDeg: (img.rotationDeg ?? 0) + deg
+			};
+		}) } : {}
 	};
 }
 /**
@@ -1297,16 +1312,47 @@ function rotateDrawing(layout, deg, cx, cy) {
 * `heightPt` one and turned y-up about its bottom-left corner — the frame both
 * a chart block and an inline picture token are drawn in.
 */
-function metafileDrawing(pic, widthPt, heightPt, options, fontResources) {
+function metafileDrawing(pic, widthPt, heightPt, options, fontResources, colorChange, blitted) {
+	const recolour = (hex) => {
+		if (hex === void 0 || colorChange === void 0) return hex;
+		if (hex.toUpperCase() !== colorChange.fromHex.toUpperCase()) return hex;
+		return colorChange.transparent ? null : colorChange.toHex;
+	};
 	const sx = widthPt / pic.width;
 	const sy = heightPt / pic.height;
 	const mapX = (x) => (x - pic.left) * sx;
 	const mapY = (y) => heightPt - (y - pic.top) * sy;
 	const shapes = [];
 	const texts = [];
+	const images = [];
+	let seq = 0;
+	let blit = 0;
 	for (const prim of pic.prims) {
+		if (prim.kind === "image") {
+			const resourceName = blitted?.[blit++] ?? "";
+			if (resourceName === "") {
+				seq++;
+				continue;
+			}
+			images.push({
+				seq: seq++,
+				resourceName,
+				x: mapX(prim.x),
+				y: mapY(prim.y + prim.height),
+				width: prim.width * sx,
+				height: prim.height * sy
+			});
+			continue;
+		}
 		if (prim.kind === "path") {
+			const fill = recolour(prim.fillColorHex);
+			const strokeHex = recolour(prim.stroke?.colorHex);
+			if (fill === null && (prim.stroke === void 0 || strokeHex === null)) {
+				seq++;
+				continue;
+			}
 			shapes.push({
+				seq: seq++,
 				paths: prim.paths.map((path) => ({
 					...path,
 					segments: path.segments.map((seg) => seg.op === "close" ? seg : seg.op === "cubic" ? {
@@ -1323,23 +1369,29 @@ function metafileDrawing(pic, widthPt, heightPt, options, fontResources) {
 						y: mapY(seg.y)
 					})
 				})),
-				...prim.fillColorHex !== void 0 ? { fillColorHex: prim.fillColorHex } : {},
-				...prim.stroke ? { stroke: {
+				...fill !== void 0 && fill !== null ? { fillColorHex: fill } : {},
+				...prim.stroke && strokeHex !== null ? { stroke: {
 					...prim.stroke,
+					...strokeHex !== void 0 ? { colorHex: strokeHex } : {},
 					widthPt: Math.max(.25, prim.stroke.widthPt * sx)
 				} } : {}
 			});
 			continue;
 		}
-		if (prim.kind !== "text") continue;
 		const { variant } = options.registry.resolveByStyle(prim.bold === true, prim.italic === true);
 		const font = fontResources.get(variant);
 		if (!font) continue;
 		const sizePt = Math.max(1, prim.sizeLu * sy);
-		const line = makeChartLabelLine(prim.text, font, sizePt, prim.colorHex);
+		const textHex = recolour(prim.colorHex);
+		if (textHex === null) {
+			seq++;
+			continue;
+		}
+		const line = makeChartLabelLine(prim.text, font, sizePt, textHex ?? prim.colorHex);
 		const shift = prim.alignH === "center" ? -line.contentWidthPt / 2 : prim.alignH === "right" ? -line.contentWidthPt : 0;
 		const baselineY = mapY(prim.y) - (prim.alignBaseline ? 0 : sizePt * .8);
 		texts.push({
+			seq: seq++,
 			line,
 			x: mapX(prim.x) + shift,
 			y: baselineY,
@@ -1348,10 +1400,11 @@ function metafileDrawing(pic, widthPt, heightPt, options, fontResources) {
 	}
 	return {
 		shapes,
-		texts
+		texts,
+		...images.length > 0 ? { images } : {}
 	};
 }
-function layoutChartBlock(block, options, fontResources, contentWidth, maxHeight) {
+function layoutChartBlock(block, options, fontResources, contentWidth, maxHeight, imageResources) {
 	let widthPt = block.width;
 	let heightPt = block.height;
 	if (widthPt > contentWidth && widthPt > 0) {
@@ -1373,11 +1426,20 @@ function layoutChartBlock(block, options, fontResources, contentWidth, maxHeight
 	};
 	const pp = block.paragraphProperties;
 	const altText = block.altText ?? chart?.title;
+	const bgRes = chart?.frameFillImage ? imageResources?.get(chart.frameFillImage.resource) : void 0;
+	const bgTile = chart?.frameFillImage?.tiled === true && bgRes?.prepared ? {
+		widthPt: bgRes.prepared.widthPx * 72 / 96,
+		heightPt: bgRes.prepared.heightPx * 72 / 96
+	} : void 0;
 	return {
 		kind: "chart",
 		widthPt,
 		heightPt,
 		layout,
+		...bgRes ? { background: {
+			resourceName: bgRes.resourceName,
+			...bgTile ? { tile: bgTile } : {}
+		} } : {},
 		resolvedAlignment: pp.alignment ?? "left",
 		spacingBeforePt: pp.spacingBefore ?? 0,
 		spacingAfterPt: pp.spacingAfter ?? 0,
@@ -1653,6 +1715,7 @@ function collectImageResources(body, headersFooters, options) {
 		}
 	};
 	visit(body);
+	for (const chart of options.charts?.values() ?? []) if (chart.frameFillImage) seen.add(chart.frameFillImage.resource);
 	if (options.pageBackgroundFill?.imageResource !== void 0) seen.add(options.pageBackgroundFill.imageResource);
 	for (const hf of headersFooters.values()) visit(hf);
 	for (const note of options.footnotes?.values() ?? []) visit(note);
@@ -1665,9 +1728,29 @@ function collectImageResources(body, headersFooters, options) {
 		if (!bytes) continue;
 		if (isEmf(bytes) || isWmf(bytes)) {
 			try {
+				const metafile = isEmf(bytes) ? readEmf(bytes) : readWmf(bytes);
+				const metafileImages = [];
+				for (const prim of metafile.prims) {
+					if (prim.kind !== "image") continue;
+					let blitted;
+					try {
+						blitted = prepareImage(prim.png, { flattenAlpha });
+					} catch {
+						metafileImages.push("");
+						continue;
+					}
+					counter++;
+					const name = `Im${counter}`;
+					metafileImages.push(name);
+					out.set(`${resourceId}#${String(metafileImages.length)}`, {
+						resourceName: name,
+						prepared: blitted
+					});
+				}
 				out.set(resourceId, {
 					resourceName: "",
-					metafile: isEmf(bytes) ? readEmf(bytes) : readWmf(bytes)
+					metafile,
+					...metafileImages.length > 0 ? { metafileImages } : {}
 				});
 			} catch {}
 			continue;
@@ -1688,8 +1771,47 @@ function collectImageResources(body, headersFooters, options) {
 }
 function chartPageItems(laid, x, bottomYUp, pageHeight, structId) {
 	const fig = structId !== void 0 ? { structId } : {};
-	const out = [];
-	for (const sh of laid.layout.shapes) out.push({
+	const ordered = laid.layout.shapes.some((sh) => sh.seq !== void 0) || (laid.layout.images?.length ?? 0) > 0;
+	const picture = ordered ? { pictureId: nextPictureId++ } : {};
+	const backdrop = [];
+	if (laid.background) {
+		const box = {
+			x,
+			y: pageHeight - (bottomYUp + laid.heightPt),
+			width: laid.widthPt,
+			height: laid.heightPt
+		};
+		const tile = laid.background.tile;
+		const clip = {
+			paths: [rectPath(laid.widthPt, laid.heightPt)],
+			transform: flipTransform([
+				1,
+				0,
+				0,
+				1,
+				x,
+				bottomYUp
+			], pageHeight)
+		};
+		const items = tile ? PageAssembler.tileItems(laid.background.resourceName, tile, box) : [{
+			type: "image",
+			x: pt(box.x),
+			y: pt(box.y),
+			width: pt(box.width),
+			height: pt(box.height),
+			imageResourceName: laid.background.resourceName
+		}];
+		for (const item of items) {
+			if (item.type !== "image") continue;
+			backdrop.push({
+				...item,
+				clip,
+				...fig,
+				...picture
+			});
+		}
+	}
+	const shapes = laid.layout.shapes.map((sh) => ({
 		type: "shape",
 		shape: {
 			paths: sh.paths,
@@ -1704,18 +1826,41 @@ function chartPageItems(laid, x, bottomYUp, pageHeight, structId) {
 				bottomYUp
 			], pageHeight)
 		},
-		...fig
-	});
-	for (const t of laid.layout.texts) out.push({
+		...fig,
+		...picture,
+		seq: sh.seq ?? 0
+	}));
+	const texts = laid.layout.texts.map((t) => ({
 		type: "line",
 		line: t.line,
 		originX: pt(x + t.x),
 		baselineY: pt(pageHeight - (bottomYUp + t.y)),
 		...t.rotationDeg ? { rotationDeg: t.rotationDeg } : {},
-		...fig
-	});
-	return out;
-}
+		...fig,
+		...picture,
+		seq: t.seq ?? Number.MAX_SAFE_INTEGER
+	}));
+	const blits = (laid.layout.images ?? []).map((img) => ({
+		type: "image",
+		x: pt(x + img.x),
+		y: pt(pageHeight - (bottomYUp + img.y + img.height)),
+		width: pt(img.width),
+		height: pt(img.height),
+		imageResourceName: img.resourceName,
+		...img.rotationDeg ? { rotationDeg: img.rotationDeg } : {},
+		...fig,
+		...picture,
+		seq: img.seq ?? 0
+	}));
+	const all = [
+		...shapes,
+		...texts,
+		...blits
+	];
+	if (ordered) all.sort((a, b) => a.seq - b.seq);
+	return [...backdrop, ...all.map(({ seq: _seq, ...item }) => item)];
+}
+var nextPictureId = 1;
 function emitShapeText(sh, x, bottomYUp, sink, pageHeight, figId) {
 	if (sh.textLines.length === 0) return;
 	if (sh.vertical) {
@@ -1767,10 +1912,11 @@ function emitShapeText(sh, x, bottomYUp, sink, pageHeight, figId) {
 			}
 			return;
 		}
+		const indentLeft = line.resolved.indentLeft + (line.firstLine ? line.resolved.indentFirstLine : 0);
 		sink.push({
 			type: "line",
 			line,
-			originX: pt(x + sh.insetLeftPt + lineOffset),
+			originX: pt(x + sh.insetLeftPt + indentLeft + lineOffset),
 			baselineY: pt(pageHeight - (textY + lineBaselineOffset(line, line.resolved))),
 			...figId !== void 0 ? { structId: figId } : {}
 		});
@@ -1806,6 +1952,7 @@ function emitCellFloat(cf, ctx, frame) {
 			imageResourceName: cf.block.resourceName,
 			...cf.block.crop ? { crop: cf.block.crop } : {},
 			...cf.block.wash ? { wash: cf.block.wash } : {},
+			...cf.block.alpha !== void 0 ? { alpha: cf.block.alpha } : {},
 			...cf.block.rotationDeg ? { rotationDeg: cf.block.rotationDeg } : {},
 			...cf.block.flipH ? { flipH: true } : {},
 			...cf.block.flipV ? { flipV: true } : {}
@@ -1832,20 +1979,30 @@ function emitShapeItems(sh, x, bottomYUp, sink, pageHeight, figId) {
 			sink.push({
 				...item,
 				clip,
+				...fig,
+				...sh.fillAlpha !== void 0 ? { alpha: sh.fillAlpha } : {}
+			});
+		}
+		else {
+			const r = sh.fillImageRect;
+			const boxX = x + (r ? r.left * sh.widthPt : 0);
+			const boxW = sh.widthPt * (r ? 1 - r.left - r.right : 1);
+			const boxH = sh.heightPt * (r ? 1 - r.top - r.bottom : 1);
+			const boxTop = pageHeight - (bottomYUp + sh.heightPt) + (r ? r.top * sh.heightPt : 0);
+			sink.push({
+				type: "image",
+				x: pt(boxX),
+				y: pt(boxTop),
+				width: pt(boxW),
+				height: pt(boxH),
+				imageResourceName: sh.fillImageResourceName,
+				...sh.fillImageCrop ? { crop: sh.fillImageCrop } : {},
+				...sh.fillAlpha !== void 0 ? { alpha: sh.fillAlpha } : {},
+				...sh.fillImageDuotone ? { duotone: sh.fillImageDuotone } : {},
+				clip,
 				...fig
 			});
 		}
-		else sink.push({
-			type: "image",
-			x: pt(x),
-			y: pt(pageHeight - (bottomYUp + sh.heightPt)),
-			width: pt(sh.widthPt),
-			height: pt(sh.heightPt),
-			imageResourceName: sh.fillImageResourceName,
-			...sh.fillImageCrop ? { crop: sh.fillImageCrop } : {},
-			clip,
-			...fig
-		});
 	}
 	if (sh.markerPaths && sh.stroke) sink.push({
 		type: "shape",
@@ -1982,6 +2139,7 @@ function drawBlocksSequentially(blocks, startX, startY, pageHeight, contentWidth
 				imageResourceName: block.resourceName,
 				...block.crop ? { crop: block.crop } : {},
 				...block.wash ? { wash: block.wash } : {},
+				...block.alpha !== void 0 ? { alpha: block.alpha } : {},
 				...block.rotationDeg ? { rotationDeg: block.rotationDeg } : {},
 				...block.flipH ? { flipH: true } : {},
 				...block.flipV ? { flipV: true } : {}
@@ -2080,24 +2238,197 @@ function runFontKeyAndParsed(options, ascii, bold, italic) {
 	}
 	const byFamily = options.registriesByFamily;
 	if (byFamily && byFamily.size > 0) {
-		let key = resolveFamilyKey(ascii);
+		const named = resolveFamilyStyle(ascii);
+		let key = named.key;
 		let reg = byFamily.get(key);
 		if (!reg) {
 			key = byFamily.keys().next().value;
 			reg = byFamily.get(key);
 		}
-		const { variant, parsed } = reg.resolveByStyle(bold, italic);
+		const wantBold = bold || named.bold === true;
+		const wantItalic = italic || named.italic === true;
+		const { variant, parsed } = reg.resolveByStyle(wantBold, wantItalic);
 		return {
 			fontKey: `${key}:${variant}`,
-			parsed
+			parsed,
+			...syntheticFace(variant, wantBold, wantItalic, named.widthScale)
 		};
 	}
 	const { variant, parsed } = options.registry.resolveByStyle(bold, italic);
 	return {
 		fontKey: variant,
-		parsed
+		parsed,
+		...syntheticFace(variant, bold, italic, resolveFamilyStyle(ascii).widthScale)
+	};
+}
+/**
+* The face a CHARACTER falls back to when the run's own has no glyph for it.
+*
+* The curated substitutes are Latin families: Han, Kana, Hangul, Arabic, Thai
+* and the geometric symbols are a notdef box in every one of them, and 2145
+* characters of the corpus are exactly those. A face for the character's
+* writing system is fetched when the document holds one (see `addScriptFonts`),
+* and this is where a run reaches it — followed by every other family already
+* loaded, because a glyph one of them happens to carry is still better than a
+* box.
+*
+* Called from BOTH walks that need it — the glyph-subset collection and the
+* tokenizer — so the face a character is measured, subset and drawn with is one
+* decision made once.
+*
+* @param options The render options (the loaded registries).
+* @param cp      The code point with no glyph in the run's own face.
+* @param bold    Whether the run is bold…
+* @param italic  …and whether it is italic.
+* @returns The face to draw it with, or `undefined` when nobody has it.
+*/
+function fallbackFaceKey(options, cp, bold, italic) {
+	const byFamily = options.registriesByFamily;
+	if (!byFamily || byFamily.size === 0) return void 0;
+	const script = scriptForCodepoint(cp, byFamily.has("jp") ? "jp" : byFamily.has("kr") ? "kr" : "sc");
+	const order = script ? [script] : [];
+	for (const key of byFamily.keys()) if (key !== script) order.push(key);
+	for (const key of order) {
+		const reg = byFamily.get(key);
+		if (!reg) continue;
+		const { variant, parsed } = reg.resolveByStyle(bold, italic);
+		if (parsed.glyphForCodepoint(cp) !== 0) return {
+			fontKey: `${key}:${variant}`,
+			parsed
+		};
+	}
+}
+/**
+* §9.2.2 — the face a request had to settle for, and what is left to draw.
+*
+* A registry may hold one face and be asked for four: `FontBytesByVariant`
+* requires only `regular`, so a caller who supplies a single file (or a script
+* fallback with no bold cut) had every heading drawn plain. What the file does
+* not carry, the page draws: a stroke around the glyphs for weight, a shear for
+* slant — the same two tricks a word processor calls faux bold and faux italic.
+*
+* @param variant    The face the registry actually gave.
+* @param bold       Whether bold was asked for.
+* @param italic     Whether italic was.
+* @param widthScale The squeeze a condensed NAME asks for, when it does.
+* @returns `{ synthetic }` when something is missing, `{}` when nothing is.
+*/
+function syntheticFace(variant, bold, italic, widthScale) {
+	const missingBold = bold && variant !== "bold" && variant !== "boldItalic";
+	const missingItalic = italic && variant !== "italic" && variant !== "boldItalic";
+	if (!missingBold && !missingItalic && widthScale === void 0) return {};
+	return { synthetic: {
+		...missingBold ? { bold: true } : {},
+		...missingItalic ? { italic: true } : {},
+		...widthScale !== void 0 ? { widthScale } : {}
+	} };
+}
+/**
+* `text` cut into the stretches ONE face draws — the whole string as a single
+* piece when the run's own face covers it, which is nearly always.
+*
+* @param plan The run being tokenized.
+* @param text The stretch of it to cut.
+*/
+function splitByFace(plan, text) {
+	const first = faceOf(plan, text.codePointAt(0) ?? 0);
+	if (!plan.faceFor || plan.faceFor.size === 0) return [{
+		text,
+		face: first
+	}];
+	const out = [];
+	let buf = "";
+	let face = first;
+	for (const ch of text) {
+		const next = faceOf(plan, ch.codePointAt(0));
+		if (buf !== "" && next.font !== face.font) {
+			out.push({
+				text: buf,
+				face
+			});
+			buf = "";
+		}
+		face = next;
+		buf += ch;
+	}
+	if (buf !== "") out.push({
+		text: buf,
+		face
+	});
+	return out;
+}
+/**
+* The face a character of a run is drawn with — its own, unless the run carries
+* a fallback for that code point (see {@link facesForRun}).
+*/
+function faceOf(plan, cp) {
+	return plan.faceFor?.get(cp) ?? {
+		font: plan.font,
+		...plan.synthetic ? { synthetic: plan.synthetic } : {}
 	};
 }
+/**
+* `text` cut into the stretches ONE face draws, by the same decision the
+* tokenizer makes — the whole string as a single span when the run's own face
+* covers it, which is nearly always.
+*
+* @param options  The render options (the loaded registries).
+* @param primary  The run's own face.
+* @param resolved Its resolved properties (weight and slant).
+* @param text     The run's text.
+*/
+function faceSpans(options, primary, resolved, text) {
+	const out = [];
+	let cur = primary;
+	let buf = "";
+	for (const ch of text) {
+		const cp = ch.codePointAt(0);
+		const face = primary.parsed.glyphForCodepoint(cp) !== 0 ? primary : fallbackFaceKey(options, cp, resolved.bold, resolved.italic) ?? primary;
+		if (buf !== "" && face.fontKey !== cur.fontKey) {
+			out.push({
+				...cur,
+				text: buf
+			});
+			buf = "";
+		}
+		cur = face;
+		buf += ch;
+	}
+	if (buf !== "") out.push({
+		...cur,
+		text: buf
+	});
+	return out;
+}
+/**
+* The face for every character of `text` the run's own cannot draw.
+*
+* @param options       The render options (the loaded registries).
+* @param fontResources The faces the document embeds, by key.
+* @param primary       The run's own face.
+* @param resolved      Its resolved properties (weight and slant).
+* @param text          The run's text.
+* @returns A map from code point to face, or `undefined` when the run's own
+*          face draws all of it.
+*/
+function facesForRun(options, fontResources, primary, resolved, text) {
+	let out;
+	for (const ch of text) {
+		const cp = ch.codePointAt(0);
+		if (out?.has(cp) === true || primary.glyphForCodepoint(cp) !== 0) continue;
+		const fallback = fallbackFaceKey(options, cp, resolved.bold, resolved.italic);
+		if (!fallback) continue;
+		const font = fontResources.get(fallback.fontKey);
+		if (!font) continue;
+		out ??= /* @__PURE__ */ new Map();
+		const { variant } = { variant: fallback.fontKey.split(":")[1] ?? "" };
+		out.set(cp, {
+			font,
+			...syntheticFace(variant === "bold" || variant === "boldItalic" || variant === "italic" ? variant : "regular", resolved.bold, resolved.italic)
+		});
+	}
+	return out;
+}
 function lookupFont(resources, fontKey) {
 	return resources.get(fontKey) ?? resources.values().next().value;
 }
@@ -2114,8 +2445,22 @@ function collectFontResources(body, headersFooters, options, imageResources) {
 			};
 			used.set(fontKey, bucket);
 		}
-		const shaped = shapeText(run.text, parsed.glyphForCodepoint, parsed.advanceWidths, parsed.ligatures, parsed.kerning, parsed.joiningForms);
-		for (const g of shaped.gids) bucket.gids.add(g);
+		const text = run.listMarker === true ? markerText(run.text, parsed) : run.text;
+		for (const span of faceSpans(options, {
+			fontKey,
+			parsed
+		}, resolved, text)) {
+			let sink = used.get(span.fontKey);
+			if (!sink) {
+				sink = {
+					parsed: span.parsed,
+					gids: /* @__PURE__ */ new Set()
+				};
+				used.set(span.fontKey, sink);
+			}
+			const shaped = shapeText(span.text, span.parsed.glyphForCodepoint, span.parsed.advanceWidths, span.parsed.ligatures, span.parsed.kerning, span.parsed.joiningForms);
+			for (const g of shaped.gids) sink.gids.add(g);
+		}
 		if (run.text.includes("	")) for (const stop of resolveParagraphProperties(para.properties, options.styles).tabs) {
 			const ch = stop.leader === void 0 ? void 0 : TAB_LEADER_CHARS.get(stop.leader);
 			if (ch !== void 0) bucket.gids.add(parsed.glyphForCodepoint(ch.codePointAt(0)));
@@ -2485,7 +2830,7 @@ function tokenizeParagraph(paragraph, options, fontResources, imageResources, co
 				imageWidthPt: widthPt,
 				imageHeightPt: heightPt,
 				imageResourceName: res?.resourceName ?? "",
-				...res?.metafile ? { imageMetafile: metafileDrawing(res.metafile, drawBox?.widthPt ?? widthPt, drawBox?.heightPt ?? heightPt, options, fontResources) } : {},
+				...res?.metafile ? { imageMetafile: metafileDrawing(res.metafile, drawBox?.widthPt ?? widthPt, drawBox?.heightPt ?? heightPt, options, fontResources, void 0, res.metafileImages) } : {},
 				...run.inlineImage.outline ? { imageOutline: run.inlineImage.outline } : {},
 				...run.inlineImage.shadow ? { imageShadow: run.inlineImage.shadow } : {},
 				...run.inlineImage.wash ? { imageWash: run.inlineImage.wash } : {},
@@ -2525,12 +2870,16 @@ function tokenizeParagraph(paragraph, options, fontResources, imageResources, co
 			};
 		}
 		const resolvedRun = resolveRunProperties(run.properties, paragraph.properties, options.styles);
-		const { fontKey } = runFontKeyAndParsed(options, resolvedRun.fontFamily.ascii, resolvedRun.bold, resolvedRun.italic);
+		const { fontKey, synthetic } = runFontKeyAndParsed(options, resolvedRun.fontFamily.ascii, resolvedRun.bold, resolvedRun.italic);
 		const script = SCRIPT_OFFSET[resolvedRun.verticalAlign] ?? 0;
+		const own = lookupFont(fontResources, fontKey);
+		const faceFor = facesForRun(options, fontResources, own.parsed, resolvedRun, run.text);
 		return {
 			run,
 			resolvedRun,
-			font: lookupFont(fontResources, fontKey),
+			font: own,
+			...faceFor ? { faceFor } : {},
+			...synthetic ? { synthetic } : {},
 			fontSizePt: script === 0 ? resolvedRun.fontSizePt : resolvedRun.fontSizePt * SCRIPT_SCALE,
 			...script === 0 ? {} : { risePt: resolvedRun.fontSizePt * script },
 			isImage: false,
@@ -2597,28 +2946,56 @@ function tokenizePlansLtr(plans) {
 			continue;
 		}
 		const highlight = (plan.run.commentRangeRefs?.length ?? 0) > 0;
-		for (const t of tokenizeText(plan.run.text)) tokens.push({
-			kind: "text",
-			text: t.text,
-			isSpace: t.isSpace,
-			...t.tab ? { tab: true } : {},
-			...plan.run.href !== void 0 ? { href: plan.run.href } : {},
-			...plan.run.footnoteRef !== void 0 ? { footnoteRef: plan.run.footnoteRef } : {},
-			...plan.run.anchor !== void 0 ? { anchor: plan.run.anchor } : {},
-			...plan.run.listMarker ? { listMarker: true } : {},
-			...plan.run.columnBreak ? { columnBreak: true } : {},
-			...highlight ? { highlight: true } : {},
-			resolvedRun: plan.resolvedRun,
-			font: plan.font,
-			fontSizePt: plan.fontSizePt,
-			...plan.risePt !== void 0 ? { risePt: plan.risePt } : {},
-			widthPt: measureRunText(plan, t.text),
-			bidiLevel: 0
-		});
+		for (const t of tokenizeText(plan.run.text)) for (const piece of splitByFace(plan, t.text)) {
+			const text = plan.run.listMarker === true ? markerText(piece.text, plan.font.parsed) : piece.text;
+			tokens.push({
+				kind: "text",
+				text,
+				isSpace: t.isSpace,
+				...t.tab ? { tab: true } : {},
+				...plan.run.href !== void 0 ? { href: plan.run.href } : {},
+				...plan.run.footnoteRef !== void 0 ? { footnoteRef: plan.run.footnoteRef } : {},
+				...plan.run.anchor !== void 0 ? { anchor: plan.run.anchor } : {},
+				...plan.run.listMarker ? { listMarker: true } : {},
+				...plan.run.columnBreak ? { columnBreak: true } : {},
+				...highlight ? { highlight: true } : {},
+				resolvedRun: plan.resolvedRun,
+				font: piece.face.font,
+				...piece.face.synthetic ? { synthetic: piece.face.synthetic } : {},
+				fontSizePt: plan.fontSizePt,
+				...plan.risePt !== void 0 ? { risePt: plan.risePt } : {},
+				widthPt: measureRunText(plan, text, piece.face),
+				bidiLevel: 0
+			});
+		}
 	}
 	return tokens;
 }
 /**
+* A LIST MARKER the font has no glyph for, swapped for the dot every text font
+* carries.
+*
+* §21.1.2.4.5 — a bullet is stated in a face of its own, and the symbol faces
+* are not alphabets: Wingdings `l` is a filled circle, U+25CF once translated.
+* The font a document is RENDERED with may have no such character — Roboto does
+* not — and a missing glyph is a box: 45541_Header wore a row of them down
+* eleven slides. The marker is the one place where the shape matters more than
+* the code point, so it takes the nearest thing the font can draw.
+*
+* @param text The marker's text.
+* @param font The font it is set in.
+* @returns The text to draw.
+*/
+function markerText(text, parsed) {
+	let out = "";
+	for (const ch of text) {
+		const cp = ch.codePointAt(0) ?? 0;
+		const missing = cp > 127 && parsed.glyphForCodepoint(cp) === 0;
+		out += missing && parsed.glyphForCodepoint(8226) !== 0 ? "•" : ch;
+	}
+	return out;
+}
+/**
 * §17.3.2.35 — a run's text measured with the space it puts between its
 * characters. PDF adds the same amount per glyph through `Tc`, so the width the
 * line is broken at and the width the page draws agree.
@@ -2627,8 +3004,12 @@ function tokenizePlansLtr(plans) {
 * @param text The token's text.
 * @returns The advance width in points.
 */
-function measureRunText(plan, text) {
-	const base = plan.font.measure.textWidthPt(text, plan.fontSizePt);
+function measureRunText(plan, text, face) {
+	const drawn = face ?? {
+		font: plan.font,
+		...plan.synthetic ? { synthetic: plan.synthetic } : {}
+	};
+	const base = drawn.font.measure.textWidthPt(text, plan.fontSizePt) * (drawn.synthetic?.widthScale ?? 1);
 	const extra = plan.resolvedRun.letterSpacingPt;
 	return extra === void 0 || extra === 0 ? base : base + extra * [...text].length;
 }
@@ -2675,9 +3056,11 @@ function tokenizePlansBidi(plans, realLevels) {
 		let bufStart = 0;
 		let curSpace = false;
 		let curLevel = -1;
+		let curFace = { font: plan.font };
 		const flush = (endExclusive) => {
 			if (endExclusive <= bufStart) return;
-			const text = chars.slice(bufStart, endExclusive).join("");
+			const raw = chars.slice(bufStart, endExclusive).join("");
+			const text = plan.run.listMarker === true ? markerText(raw, plan.font.parsed) : raw;
 			tokens.push({
 				kind: "text",
 				text,
@@ -2689,10 +3072,11 @@ function tokenizePlansBidi(plans, realLevels) {
 				...plan.run.columnBreak ? { columnBreak: true } : {},
 				...(plan.run.commentRangeRefs?.length ?? 0) > 0 ? { highlight: true } : {},
 				resolvedRun: plan.resolvedRun,
-				font: plan.font,
+				font: curFace.font,
+				...curFace.synthetic ? { synthetic: curFace.synthetic } : {},
 				fontSizePt: plan.fontSizePt,
 				...plan.risePt !== void 0 ? { risePt: plan.risePt } : {},
-				widthPt: measureRunText(plan, text),
+				widthPt: measureRunText(plan, text, curFace),
 				bidiLevel: curLevel
 			});
 		};
@@ -2700,14 +3084,17 @@ function tokenizePlansBidi(plans, realLevels) {
 			const ch = chars[c];
 			const isSpace = /\s/.test(ch);
 			const level = realLevels[realIdx] ?? 0;
+			const face = faceOf(plan, ch.codePointAt(0));
 			if (c === 0) {
 				curSpace = isSpace;
 				curLevel = level;
-			} else if (isSpace !== curSpace || level !== curLevel) {
+				curFace = face;
+			} else if (isSpace !== curSpace || level !== curLevel || face.font !== curFace.font) {
 				flush(c);
 				bufStart = c;
 				curSpace = isSpace;
 				curLevel = level;
+				curFace = face;
 			}
 			realIdx++;
 		}
@@ -3535,10 +3922,10 @@ function measureSingleLine(paragraph, options, fontResources) {
 	let total = 0;
 	for (const run of paragraph.runs) {
 		const resolved = resolveRunProperties(run.properties, paragraph.properties, options.styles);
-		const { fontKey } = runFontKeyAndParsed(options, resolved.fontFamily.ascii, resolved.bold, resolved.italic);
+		const { fontKey, synthetic } = runFontKeyAndParsed(options, resolved.fontFamily.ascii, resolved.bold, resolved.italic);
 		const font = lookupFont(fontResources, fontKey);
 		const fontSizePt = resolved.fontSizePt;
-		total += font.measure.textWidthPt(run.text, fontSizePt);
+		total += font.measure.textWidthPt(run.text, fontSizePt) * (synthetic?.widthScale ?? 1);
 	}
 	return total;
 }
@@ -4328,7 +4715,10 @@ var PageAssembler = class PageAssembler {
 				...this.pageBorderItems(),
 				...this.columnSeparatorItems(),
 				...header.commands,
-				...PageAssembler.byZ(this.floatsBehind),
+				...PageAssembler.byZ(this.floatsBehind).map((item) => ({
+					...item,
+					behind: true
+				})),
 				...this.current,
 				...PageAssembler.byZ(this.floatsFront),
 				...this.renderNotesBand(),
@@ -4701,6 +5091,7 @@ function paginateSections(blocks, sectionCtxs, builder, defaultLang = "en-US", n
 					imageResourceName: block.resourceName,
 					...block.crop ? { crop: block.crop } : {},
 					...block.wash ? { wash: block.wash } : {},
+					...block.alpha !== void 0 ? { alpha: block.alpha } : {},
 					...block.rotationDeg ? { rotationDeg: block.rotationDeg } : {},
 					...block.flipH ? { flipH: true } : {},
 					...block.flipV ? { flipV: true } : {},