@boxpdf/html-writer 0.1.14 → 0.1.16

package/dist/index.cjs

@@ -81,6 +81,52 @@ function escapeHtml(value) {
   return value.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll('"', "&quot;").replaceAll("'", "&#39;");
 }
 
+// src/visual-font.ts
+function visualFontAliases(pageNumber, fonts) {
+  return new Map(
+    fonts.filter((font) => font.format === "truetype" && !/(?:courier|^TTE)/i.test(font.family ?? "")).map((font) => [font.id, `boxpdf-${pageNumber}-${font.id}`])
+  );
+}
+function visualFontFace(font, aliases) {
+  if (font.format !== "truetype") return "";
+  const alias = aliases.get(font.id);
+  if (!alias) return "";
+  const styles2 = visualFontStyles(font.family, alias).filter(
+    (style) => !style.startsWith("font-family:")
+  );
+  return `@font-face{font-family:${alias};src:url(data:font/ttf;base64,${base64(font.data)}) format("truetype");${styles2.join(";")}}`;
+}
+function visualFontStyles(fontFamily, alias) {
+  const normalized = fontFamily?.toLowerCase() ?? "";
+  const styles2 = [];
+  let fallback;
+  if (/courier|mono|nimbusmono|^cmtt/.test(normalized)) {
+    fallback = "Courier New,Courier,monospace";
+  } else if (/times|minion|serif|baskerville|georgia|nimbusrom|guardian.*egyp|^cm[rs]y?\d/.test(normalized)) {
+    fallback = "Times New Roman,Times,serif";
+  } else if (/helvetica|arial|sans|nimbussan|calibre|myriad|panton|^tte|^mstt/.test(normalized)) {
+    fallback = "Arial,Helvetica,sans-serif";
+  }
+  if (alias || fallback) styles2.push(`font-family:${[alias, fallback].filter(Boolean).join(",")}`);
+  if (/bold|black|semibold|demi|medi|^tte/.test(normalized)) styles2.push("font-weight:700");
+  if (/italic|oblique|slant|ital(?:$|[_-])/.test(normalized)) styles2.push("font-style:italic");
+  return styles2;
+}
+function base64(bytes) {
+  const alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
+  let output = "";
+  for (let index = 0; index < bytes.length; index += 3) {
+    const first = bytes[index] ?? 0;
+    const second = bytes[index + 1] ?? 0;
+    const third = bytes[index + 2] ?? 0;
+    output += alphabet[first >> 2];
+    output += alphabet[(first & 3) << 4 | second >> 4];
+    output += index + 1 < bytes.length ? alphabet[(second & 15) << 2 | third >> 6] : "=";
+    output += index + 2 < bytes.length ? alphabet[third & 63] : "=";
+  }
+  return output;
+}
+
 // src/semantic-media.ts
 function semanticMedia(page) {
   const output = (page.images ?? []).map((image) => rasterMedia(image));
@@ -106,12 +152,51 @@ function vectorMedia(page) {
     ...fills.map(fillBounds)
   ]);
   if (!bounds || bounds.width <= 0 || bounds.height <= 0) return void 0;
-  const content = fills.map(vectorFill).join("") + paths.map((path) => vectorPath(path)).join("");
+  const aliases = visualFontAliases(page.number, page.fonts ?? []);
+  const visualCodeFonts = new Set(
+    (page.fonts ?? []).filter((font) => font.format === "truetype" && font.visualCodeMapping).map((font) => font.id)
+  );
+  const visualSpans = page.visualSpans ?? page.spans;
+  const overlay = visualSpans.filter(
+    (span) => span.fontAssetId && visualCodeFonts.has(span.fontAssetId) && centerInside(span.bounds, bounds)
+  );
+  const consumedSpans = page.spans.filter(
+    (span) => span.fontAssetId && visualCodeFonts.has(span.fontAssetId) && centerInside(span.bounds, bounds)
+  );
+  const fontIds = new Set(overlay.map((span) => span.fontAssetId));
+  const fontFaces = (page.fonts ?? []).filter((font) => fontIds.has(font.id)).map((font) => visualFontFace(font, aliases)).join("");
   return {
     bounds,
-    html: `<svg class="pdf-semantic-media" xmlns="http://www.w3.org/2000/svg" viewBox="${number(bounds.x)} ${number(page.height - bounds.y - bounds.height)} ${number(bounds.width)} ${number(bounds.height)}" style="display:block;max-width:100%;height:auto" aria-hidden="true"><g transform="translate(0 ${number(page.height)}) scale(1 -1)">${content}</g></svg>`
+    html: `<svg class="pdf-semantic-media" xmlns="http://www.w3.org/2000/svg" viewBox="${number(bounds.x)} ${number(page.height - bounds.y - bounds.height)} ${number(bounds.width)} ${number(bounds.height)}" style="display:block;max-width:100%;height:auto" aria-hidden="true">${fontFaces ? `<style>${fontFaces}</style>` : ""}<g transform="translate(0 ${number(page.height)}) scale(1 -1)">${fills.map(vectorFill).join("") + paths.map((path) => vectorPath(path)).join("")}</g>${overlay.map((span) => vectorText(span, page.height, aliases)).join("")}</svg>`,
+    ...consumedSpans.length > 0 ? { consumedSpans } : {}
   };
 }
+function withoutSemanticMediaSpans(page, media) {
+  const consumed = new Set(media.flatMap((item) => item.consumedSpans ?? []));
+  return consumed.size > 0 ? { ...page, spans: page.spans.filter((span) => !consumed.has(span)) } : page;
+}
+function vectorText(span, pageHeight, aliases) {
+  if (span.renderingMode === 3 || span.renderingMode === 7) return "";
+  const styles2 = [
+    cssColor(span.color) ? `fill:${span.color}` : "",
+    unitInterval(span.fillOpacity) ? `fill-opacity:${number(span.fillOpacity)}` : "",
+    ...visualFontStyles(
+      span.fontFamily,
+      span.fontAssetId ? aliases.get(span.fontAssetId) : void 0
+    )
+  ].filter(Boolean).join(";");
+  const anchorY = pageHeight - span.bounds.y;
+  const transform = span.transform;
+  const position = transform ? ` x="0" y="0" transform="matrix(${transform.map(number).join(" ")} ${number(span.bounds.x)} ${number(anchorY)})"` : ` x="${number(span.bounds.x)}" y="${number(anchorY)}"`;
+  const extent = span.direction === "ttb" ? span.bounds.height : span.bounds.width;
+  const length = extent > 0 ? ` textLength="${number(extent)}" lengthAdjust="spacingAndGlyphs"` : "";
+  return `<text${position} font-size="${number(span.fontSize)}"${length}${styles2 ? ` style="${styles2}"` : ""}>${escapeHtml2(span.text)}</text>`;
+}
+function centerInside(inner, outer) {
+  const x = inner.x + inner.width / 2;
+  const y = inner.y + inner.height / 2;
+  return x >= outer.x && x <= outer.x + outer.width && y >= outer.y && y <= outer.y + outer.height;
+}
 function vectorFill(fill) {
   const points = fill.points.map(([x, y]) => `${number(x)},${number(y)}`).join(" ");
   const opacity = unitInterval(fill.opacity) ? ` fill-opacity="${number(fill.opacity)}"` : "";
@@ -197,20 +282,6 @@ function rgbBmp(image) {
   }
   return output;
 }
-function base64(bytes) {
-  const alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
-  let output = "";
-  for (let index = 0; index < bytes.length; index += 3) {
-    const first = bytes[index] ?? 0;
-    const second = bytes[index + 1] ?? 0;
-    const third = bytes[index + 2] ?? 0;
-    output += alphabet[first >> 2];
-    output += alphabet[(first & 3) << 4 | second >> 4];
-    output += index + 1 < bytes.length ? alphabet[(second & 15) << 2 | third >> 6] : "=";
-    output += index + 2 < bytes.length ? alphabet[third & 63] : "=";
-  }
-  return output;
-}
 function safePath(value) {
   return value.length <= 1e6 && /^[\d\s.,+\-eEMmLlCcZz]+$/.test(value);
 }
@@ -226,6 +297,9 @@ function unitInterval(value) {
 function number(value) {
   return Number.isFinite(value) ? String(Math.round(value * 1e3) / 1e3) : "0";
 }
+function escapeHtml2(value) {
+  return value.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll('"', "&quot;").replaceAll("'", "&#39;");
+}
 
 // src/semantic-document.ts
 async function writeSemanticDocument(pages, write, lookaheadPages) {
@@ -352,13 +426,13 @@ async function writeSemanticDocument(pages, write, lookaheadPages) {
       if (block.type === "paragraph") {
         if (isTitledRecord(block)) {
           const [institution, ...details] = block.lines;
-          if (institution) await write(`<h3>${escapeHtml2(institution.text)}</h3>`);
-          for (const detail of details) await write(`<p>${escapeHtml2(detail.text)}</p>`);
+          if (institution) await write(`<h3>${escapeHtml3(institution.text)}</h3>`);
+          for (const detail of details) await write(`<p>${escapeHtml3(detail.text)}</p>`);
           continue;
         }
         if (isUnmarkedList(block)) {
           await write(
-            `<ul>${block.lines.map((line) => `<li>${escapeHtml2(line.text)}</li>`).join("")}</ul>`
+            `<ul>${block.lines.map((line) => `<li>${escapeHtml3(line.text)}</li>`).join("")}</ul>`
           );
           continue;
         }
@@ -367,7 +441,7 @@ async function writeSemanticDocument(pages, write, lookaheadPages) {
       }
       if (block.type === "employment") {
         await write(
-          `<section><h3>${escapeHtml2(block.role)}</h3><p>${escapeHtml2(block.organization)}</p><p>${escapeHtml2(block.date)}</p>`
+          `<section><h3>${escapeHtml3(block.role)}</h3><p>${escapeHtml3(block.organization)}</p><p>${escapeHtml3(block.date)}</p>`
         );
         employmentOpen = true;
         continue;
@@ -384,8 +458,9 @@ async function writeSemanticDocument(pages, write, lookaheadPages) {
     for (const signature of marginSignatures(page)) seenFurniture.add(signature);
   };
   for await (const page of pages) {
-    const structured = (0, import_structure.structurePage)(page);
-    buffer.push({ width: page.width, height: page.height, structured, media: semanticMedia(page) });
+    const media = semanticMedia(page);
+    const structured = (0, import_structure.structurePage)(withoutSemanticMediaSpans(page, media));
+    buffer.push({ width: page.width, height: page.height, structured, media });
     stats.pagesProcessed += 1;
     stats.peakBufferedPages = Math.max(stats.peakBufferedPages, buffer.length);
     stats.peakBufferedLines = Math.max(
@@ -498,7 +573,7 @@ function sameRow(left, right) {
 }
 function tableRow(row, header) {
   const cell = header ? "th" : "td";
-  return `<tr>${row.map((value) => `<${cell}>${escapeHtml2(value)}</${cell}>`).join("")}</tr>`;
+  return `<tr>${row.map((value) => `<${cell}>${escapeHtml3(value)}</${cell}>`).join("")}</tr>`;
 }
 function isFinancialSummary(block) {
   return block.entries.length > 0 && block.entries.every((entry) => isNumericValue(entry.description)) && block.entries.some((entry) => /\p{Sc}|%/u.test(entry.description));
@@ -508,22 +583,22 @@ function isNumericValue(value) {
 }
 function financialSummaryRow(entry, columns) {
   const colspan = columns > 2 ? ` colspan="${columns - 1}"` : "";
-  return `<tr><th scope="row"${colspan}>${escapeHtml2(entry.term)}</th><td>${escapeHtml2(entry.description)}</td></tr>`;
+  return `<tr><th scope="row"${colspan}>${escapeHtml3(entry.term)}</th><td>${escapeHtml3(entry.description)}</td></tr>`;
 }
 function semanticBlockHtml(block, defaultColor = "#000000") {
   if (block.type === "heading")
     return `<h${block.level}>${semanticTextHtml(block.text, block.lines, defaultColor)}</h${block.level}>`;
   if (block.type === "paragraph")
     return `<p>${semanticTextHtml(block.text, block.lines, defaultColor)}</p>`;
-  if (block.type === "preformatted") return `<pre>${escapeHtml2(block.text)}</pre>`;
+  if (block.type === "preformatted") return `<pre>${escapeHtml3(block.text)}</pre>`;
   if (block.type === "definitionList") {
     if (block.entries.length <= 3 && block.entries.some((entry) => entry.description.trim().split(/\s+/).length >= 5) && block.entries.every((entry) => /^[A-Z][A-Z\s/-]*$/.test(entry.term.trim()))) {
       return block.entries.map(
-        (entry) => `<section><h2>${escapeHtml2(titleCase(entry.term))}</h2><p>${escapeHtml2(entry.description)}</p></section>`
+        (entry) => `<section><h2>${escapeHtml3(titleCase(entry.term))}</h2><p>${escapeHtml3(entry.description)}</p></section>`
       ).join("");
     }
     const list = `<dl>${block.entries.map(
-      (entry) => `<div><dt>${escapeHtml2(entry.term)}</dt><dd>${escapeHtml2(entry.description)}</dd></div>`
+      (entry) => `<div><dt>${escapeHtml3(entry.term)}</dt><dd>${escapeHtml3(entry.description)}</dd></div>`
     ).join("")}</dl>`;
     return isFinancialSummary(block) ? `<section>${list}</section>` : list;
   }
@@ -534,10 +609,10 @@ function semanticBlockHtml(block, defaultColor = "#000000") {
     return block.items.map(labeledSectionHtml).join("");
   }
   if (block.type === "employment") {
-    return `<section><h3>${escapeHtml2(block.role)}</h3><p>${escapeHtml2(block.organization)}</p><p>${escapeHtml2(block.date)}</p></section>`;
+    return `<section><h3>${escapeHtml3(block.role)}</h3><p>${escapeHtml3(block.organization)}</p><p>${escapeHtml3(block.date)}</p></section>`;
   }
   const tag = block.ordered ? "ol" : "ul";
-  return `<${tag}>${block.items.map((item) => `<li>${escapeHtml2(item.text)}</li>`).join("")}</${tag}>`;
+  return `<${tag}>${block.items.map((item) => `<li>${escapeHtml3(item.text)}</li>`).join("")}</${tag}>`;
 }
 function semanticBlockY(block) {
   const lines = block.type === "list" ? block.items.flatMap((item) => item.lines) : block.lines;
@@ -547,28 +622,28 @@ function cardTableRow(item) {
   const trailing = item.details.at(-1) ?? "";
   const match = /^\s*[×x]\s*(\d+)\s+(.+)$/u.exec(trailing);
   const description = item.details.slice(0, -1).join(" ");
-  const detail = description ? `<br><span>${escapeHtml2(description)}</span>` : "";
+  const detail = description ? `<br><span>${escapeHtml3(description)}</span>` : "";
   const quantity = match?.[1] ?? "";
   const amount = match?.[2] ?? trailing;
-  return `<tr><th scope="row">${escapeHtml2(item.title)}${detail}</th><td>${escapeHtml2(quantity)}</td><td>${escapeHtml2(amount)}</td></tr>`;
+  return `<tr><th scope="row">${escapeHtml3(item.title)}${detail}</th><td>${escapeHtml3(quantity)}</td><td>${escapeHtml3(amount)}</td></tr>`;
 }
 function labeledSectionHtml(item) {
   const heading = titleCase(item.label);
   const postal = /\b(?:ship|deliver|mail)(?:ed)?\b/i.test(item.label);
   if (postal) {
     const [name, ...address] = item.content;
-    const content = [name ? `<strong>${escapeHtml2(name)}</strong>` : "", ...address.map(escapeHtml2)].filter(Boolean).join("<br>");
-    return `<section><h2>${escapeHtml2(heading)}</h2><address>${content}</address></section>`;
+    const content = [name ? `<strong>${escapeHtml3(name)}</strong>` : "", ...address.map(escapeHtml3)].filter(Boolean).join("<br>");
+    return `<section><h2>${escapeHtml3(heading)}</h2><address>${content}</address></section>`;
   }
-  return `<section><h2>${escapeHtml2(heading)}</h2>${item.content.map(
-    (content, index) => `<p>${index === 0 ? `<strong>${escapeHtml2(content)}</strong>` : escapeHtml2(content)}</p>`
+  return `<section><h2>${escapeHtml3(heading)}</h2>${item.content.map(
+    (content, index) => `<p>${index === 0 ? `<strong>${escapeHtml3(content)}</strong>` : escapeHtml3(content)}</p>`
   ).join("")}</section>`;
 }
 function titleCase(value) {
   const normalized = value.trim().toLocaleLowerCase("en");
   return normalized.replace(/^\p{L}/u, (letter) => letter.toLocaleUpperCase("en"));
 }
-function escapeHtml2(value) {
+function escapeHtml3(value) {
   return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
 }
 
@@ -582,7 +657,7 @@ async function writeHtmlDocument(pages, write, options = {}) {
       ` lang="${escapeAttribute(options.language ?? "en")}"><head><meta charset="utf-8">`
     );
     await write('<meta name="viewport" content="width=device-width,initial-scale=1">');
-    await write(`<title>${escapeHtml3(options.title ?? "PDF document")}</title>`);
+    await write(`<title>${escapeHtml4(options.title ?? "PDF document")}</title>`);
     if (options.includeStyles ?? true) await write(`<style>${styles}</style>`);
     await write("</head><body>");
   }
@@ -628,14 +703,14 @@ async function writePositionedPage(page, write, options) {
   await write(
     `<section class="pdf-page pdf-page--visual pdf-page--positioned" data-page="${page.number}" data-rotate="${page.rotate}" style="width:${number2(displayWidth)}pt;height:${number2(displayHeight)}pt">`
   );
-  const fontAliases = new Map(
-    (page.fonts ?? []).filter((font) => font.format === "truetype" && !/(?:courier|^TTE)/i.test(font.family ?? "")).map((font) => [font.id, `boxpdf-${page.number}-${font.id}`])
-  );
+  const fontAliases = visualFontAliases(page.number, page.fonts ?? []);
   const type3Fonts = new Map(
     (page.fonts ?? []).filter((font) => font.format === "type3").map((font) => [font.id, font])
   );
   if ((options.includeStyles ?? true) && page.fonts?.length) {
-    await write(`<style>${page.fonts.map((font) => fontFace(font, fontAliases)).join("")}</style>`);
+    await write(
+      `<style>${page.fonts.map((font) => visualFontFace(font, fontAliases)).join("")}</style>`
+    );
   }
   await write(
     `<div class="pdf-page-content pdf-page-content--${page.rotate}" style="width:${number2(page.width)}pt;height:${number2(page.height)}pt${rotationTransform(page)}">`
@@ -709,7 +784,7 @@ function visualImage(image, pageHeight, pageNumber, imageIndex) {
   const opacity = isUnitInterval(image.opacity) ? ` opacity="${number2(image.opacity)}"` : "";
   const mime = image.format === "jpeg" ? "image/jpeg" : "image/bmp";
   const data = image.format === "jpeg" ? image.data : rgbBmp2(image);
-  let output = `<image width="1" height="1" preserveAspectRatio="none" transform="matrix(${transform})" href="data:${mime};base64,${base642(data)}"${opacity}/>`;
+  let output = `<image width="1" height="1" preserveAspectRatio="none" transform="matrix(${transform})" href="data:${mime};base64,${base64(data)}"${opacity}/>`;
   for (let index = (image.clips?.length ?? 0) - 1; index >= 0; index -= 1) {
     output = `<g clip-path="url(#${imageClipId(pageNumber, imageIndex, index)})">${output}</g>`;
   }
@@ -786,17 +861,17 @@ function positionedSpan(span, fontAliases) {
     `font-size:${number2(span.fontSize)}pt`,
     ...isCssHexColor(span.color) ? [`color:${span.color}`] : [],
     ...isUnitInterval(span.fillOpacity) ? [`opacity:${number2(span.fillOpacity)}`] : [],
-    ...fontStyles(
+    ...visualFontStyles(
       span.fontFamily,
       span.fontAssetId ? fontAliases.get(span.fontAssetId) : void 0
     )
   ].join(";");
-  return `<span class="pdf-span"${direction} style="${style}">${escapeHtml3(span.text)}</span>`;
+  return `<span class="pdf-span"${direction} style="${style}">${escapeHtml4(span.text)}</span>`;
 }
 async function writeFlowPage(page, write) {
-  const structured = (0, import_structure2.structurePage)(page);
-  const defaultColor = dominantTextColor(structured.lines);
   const media = semanticMedia(page);
+  const structured = (0, import_structure2.structurePage)(withoutSemanticMediaSpans(page, media));
+  const defaultColor = dominantTextColor(structured.lines);
   let mediaIndex = 0;
   await write(
     `<section class="pdf-page pdf-page--semantic pdf-page--flow" data-page="${page.number}">`
@@ -817,39 +892,39 @@ async function writeFlowPage(page, write) {
         `<p${directionAttribute(block.lines.flatMap((line) => line.spans))}>${semanticTextHtml(block.text, block.lines, defaultColor)}</p>`
       );
     } else if (block.type === "preformatted") {
-      await write(`<pre>${escapeHtml3(block.text)}</pre>`);
+      await write(`<pre>${escapeHtml4(block.text)}</pre>`);
     } else if (block.type === "definitionList") {
       await write("<dl>");
       for (const entry of block.entries) {
         await write(
-          `<div><dt>${escapeHtml3(entry.term)}</dt><dd>${escapeHtml3(entry.description)}</dd></div>`
+          `<div><dt>${escapeHtml4(entry.term)}</dt><dd>${escapeHtml4(entry.description)}</dd></div>`
         );
       }
       await write("</dl>");
     } else if (block.type === "cardList") {
       await write('<div class="pdf-semantic-cards">');
       for (const item of block.items) {
-        await write(`<article><h3>${escapeHtml3(item.title)}</h3>`);
-        for (const detail of item.details) await write(`<p>${escapeHtml3(detail)}</p>`);
+        await write(`<article><h3>${escapeHtml4(item.title)}</h3>`);
+        for (const detail of item.details) await write(`<p>${escapeHtml4(detail)}</p>`);
         await write("</article>");
       }
       await write("</div>");
     } else if (block.type === "sectionGroup") {
       await write('<div class="pdf-semantic-sections">');
       for (const item of block.items) {
-        await write(`<section><h3>${escapeHtml3(item.label)}</h3>`);
-        for (const content of item.content) await write(`<p>${escapeHtml3(content)}</p>`);
+        await write(`<section><h3>${escapeHtml4(item.label)}</h3>`);
+        for (const content of item.content) await write(`<p>${escapeHtml4(content)}</p>`);
         await write("</section>");
       }
       await write("</div>");
     } else if (block.type === "employment") {
       await write(
-        `<section><h3>${escapeHtml3(block.role)}</h3><p>${escapeHtml3(block.organization)}</p><p>${escapeHtml3(block.date)}</p></section>`
+        `<section><h3>${escapeHtml4(block.role)}</h3><p>${escapeHtml4(block.organization)}</p><p>${escapeHtml4(block.date)}</p></section>`
       );
     } else {
       const tag = block.ordered ? "ol" : "ul";
       await write(`<${tag}>`);
-      for (const item of block.items) await write(`<li>${escapeHtml3(item.text)}</li>`);
+      for (const item of block.items) await write(`<li>${escapeHtml4(item.text)}</li>`);
       await write(`</${tag}>`);
     }
   }
@@ -867,7 +942,7 @@ function visualText(span, pageHeight, fontAliases, counterRotateReflectedText =
   if (span.renderingMode === 3 || span.renderingMode === 7) return "";
   if (!span.fontAssetId && isAdobeCjkFont(span.fontFamily)) return "";
   const direction = directionAttribute([span]);
-  const font = fontStyles(
+  const font = visualFontStyles(
     span.fontFamily,
     span.fontAssetId ? fontAliases.get(span.fontAssetId) : void 0
   ).join(";");
@@ -901,7 +976,7 @@ function visualText(span, pageHeight, fontAliases, counterRotateReflectedText =
   const anchorX = span.bounds.x + basisX * rtlOffset;
   const anchorY = pageHeight - span.bounds.y + basisY * rtlOffset;
   const position = transformed ? ` x="0" y="0" transform="matrix(${transform?.map(number2).join(" ")} ${number2(anchorX)} ${number2(anchorY)})"` : ` x="${number2(anchorX)}" y="${number2(anchorY)}"`;
-  return `<text${direction}${position} font-size="${number2(span.fontSize)}"${textLength}${style ? ` style="${style}"` : ""}>${escapeHtml3(span.text)}</text>`;
+  return `<text${direction}${position} font-size="${number2(span.fontSize)}"${textLength}${style ? ` style="${style}"` : ""}>${escapeHtml4(span.text)}</text>`;
 }
 function isAdobeCjkFont(fontFamily) {
   return /^Adobe(?:Heiti|Song|Kaiti|Ming|Gothic|Mincho)Std-/i.test(fontFamily ?? "");
@@ -919,7 +994,7 @@ function visualType3Text(span, font, pageHeight) {
   let content = "";
   for (const glyph of sequence) {
     if (!glyph) continue;
-    content += `<g transform="translate(${number2(offset)} 0)">${type3Glyph(glyph)}</g>`;
+    content += `<g transform="translate(${number2(offset)} 0)">${type3Glyph(glyph, span.color)}</g>`;
     offset += glyph.advance;
   }
   return `<g transform="${outer}"><g transform="scale(${number2(xScale)} ${number2(-span.fontSize)})">${content}</g></g>`;
@@ -930,18 +1005,19 @@ function isHebrewPaintOrder(span) {
 function usesSpacingAdjustment(span) {
   return !span.fontAssetId && /arial/i.test(span.fontFamily ?? "");
 }
-function type3Glyph(glyph) {
+function type3Glyph(glyph, textColor) {
   let output = "";
   for (const fill of glyph.fills ?? []) {
-    if (!isCssHexColor(fill.color)) continue;
+    const color = glyph.usesTextColor && isCssHexColor(textColor) ? textColor : fill.color;
+    if (!isCssHexColor(color)) continue;
     const points = fill.points.map(([x, y]) => `${number2(x)},${number2(y)}`).join(" ");
     const opacity = isUnitInterval(fill.opacity) ? ` fill-opacity="${number2(fill.opacity)}"` : "";
-    output += `<polygon points="${points}" fill="${fill.color}"${opacity}/>`;
+    output += `<polygon points="${points}" fill="${color}"${opacity}/>`;
   }
   for (const path of glyph.paths ?? []) {
     if (!isSvgPath(path.d)) continue;
-    const fill = isCssHexColor(path.fill) ? path.fill : "none";
-    const stroke = isCssHexColor(path.stroke) ? path.stroke : "none";
+    const fill = glyph.usesTextColor && isCssHexColor(textColor) ? textColor : isCssHexColor(path.fill) ? path.fill : "none";
+    const stroke = glyph.usesTextColor && isCssHexColor(textColor) && path.stroke ? textColor : isCssHexColor(path.stroke) ? path.stroke : "none";
     const width = path.strokeWidth !== void 0 && Number.isFinite(path.strokeWidth) && path.strokeWidth >= 0 ? ` stroke-width="${number2(path.strokeWidth)}"` : "";
     output += `<path d="${path.d}" fill="${fill}" stroke="${stroke}"${width}/>`;
   }
@@ -956,24 +1032,6 @@ function isUnitInterval(value) {
 function isSvgPath(value) {
   return value.length <= 1e6 && /^[\d\s.,+\-eEMmLlCcZz]+$/.test(value);
 }
-function fontStyles(fontFamily, alias) {
-  const normalized = fontFamily?.toLowerCase() ?? "";
-  const styles2 = [];
-  let fallback;
-  if (/courier|mono|nimbusmono|^cmtt/.test(normalized)) {
-    fallback = "Courier New,Courier,monospace";
-  } else if (/times|minion|serif|baskerville|georgia|nimbusrom|guardian.*egyp|^cm[rs]y?\d/.test(normalized)) {
-    fallback = "Times New Roman,Times,serif";
-  } else if (/helvetica|arial|sans|nimbussan|calibre|myriad|panton|^tte/.test(normalized)) {
-    fallback = "Arial,Helvetica,sans-serif";
-  } else if (/^mstt/.test(normalized)) {
-    fallback = "Arial,Helvetica,sans-serif";
-  }
-  if (alias || fallback) styles2.push(`font-family:${[alias, fallback].filter(Boolean).join(",")}`);
-  if (/bold|black|semibold|demi|medi|^tte/.test(normalized)) styles2.push("font-weight:700");
-  if (/italic|oblique|slant|ital(?:$|[_-])/.test(normalized)) styles2.push("font-style:italic");
-  return styles2;
-}
 function isMonospace(fontFamily) {
   return /courier|mono/i.test(fontFamily ?? "");
 }
@@ -985,29 +1043,6 @@ function hasNonIdentityTransform(transform) {
   const identity = [1, 0, 0, 1];
   return transform.some((value, index) => Math.abs(value - (identity[index] ?? 0)) > 1e-6);
 }
-function fontFace(font, aliases) {
-  if (font.format !== "truetype") return "";
-  const alias = aliases.get(font.id);
-  if (!alias) return "";
-  const styles2 = fontStyles(font.family, alias).filter(
-    (style) => !style.startsWith("font-family:")
-  );
-  return `@font-face{font-family:${alias};src:url(data:font/ttf;base64,${base642(font.data)}) format("truetype");${styles2.join(";")}}`;
-}
-function base642(bytes) {
-  const alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
-  let output = "";
-  for (let index = 0; index < bytes.length; index += 3) {
-    const first = bytes[index] ?? 0;
-    const second = bytes[index + 1] ?? 0;
-    const third = bytes[index + 2] ?? 0;
-    output += alphabet[first >> 2];
-    output += alphabet[(first & 3) << 4 | second >> 4];
-    output += index + 1 < bytes.length ? alphabet[(second & 15) << 2 | third >> 6] : "=";
-    output += index + 2 < bytes.length ? alphabet[third & 63] : "=";
-  }
-  return output;
-}
 function directionAttribute(spans) {
   const rtl = spans.filter((span) => span.direction === "rtl").length;
   const vertical = spans.filter((span) => span.direction === "ttb").length;
@@ -1018,9 +1053,9 @@ function number2(value) {
   return Number.isFinite(value) ? String(Math.round(value * 1e3) / 1e3) : "0";
 }
 function escapeAttribute(value) {
-  return escapeHtml3(value).replaceAll("`", "&#96;");
+  return escapeHtml4(value).replaceAll("`", "&#96;");
 }
-function escapeHtml3(value) {
+function escapeHtml4(value) {
   return [...value].map((character) => {
     const codePoint = character.codePointAt(0) ?? 0;
     if (codePoint === 13) return "\n";