@kensio/colophon 2.14.0 → 2.15.0

package/dist/templates/code/extent.d.ts

@@ -0,0 +1,39 @@
+import type { CodeToken } from "../../highlight/index.js";
+import type { Advance } from "./advance.js";
+/** One token of a line, and how far along the line it starts. */
+export interface PlacedToken {
+    readonly token: CodeToken;
+    readonly x: number;
+}
+/**
+ * One line as plain text, rebuilt by putting each token back at its own
+ * column.
+ *
+ * What sits between two tokens is the snippet's own indentation: the
+ * highlighter drops whitespace-only runs and keeps the column they ended at,
+ * and tabs were expanded to spaces before that, so padding the gaps with
+ * spaces gives the line back exactly.
+ */
+export declare function lineText(tokens: readonly CodeToken[]): string;
+/**
+ * Each token of a line with the width of everything before it, which is where
+ * it has to be drawn.
+ */
+export declare function placeTokens(tokens: readonly CodeToken[], advance: Advance): readonly PlacedToken[];
+/**
+ * How far along a line a character column falls.
+ *
+ * A column past the end of the line is measured as though the line ran on in
+ * spaces, so a mark naming more characters than the line holds still gets the
+ * width it asked for rather than stopping at the last glyph.
+ */
+export declare function columnX(tokens: readonly CodeToken[], column: number, advance: Advance): number;
+/** Width of the ink on one line. */
+export declare function lineWidth(tokens: readonly CodeToken[], advance: Advance): number;
+/**
+ * Width of the widest line, measured from the lines actually being drawn.
+ * Narrower than the snippet's longest line whenever that line was dropped or
+ * clipped, which keeps the panel hugged tight to what is visible.
+ */
+export declare function blockWidth(lines: readonly (readonly CodeToken[])[], advance: Advance): number;
+//# sourceMappingURL=extent.d.ts.map

package/dist/templates/code/extent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"extent.d.ts","sourceRoot":"","sources":["../../../src/templates/code/extent.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAC1D,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAE5C,iEAAiE;AACjE,MAAM,WAAW,WAAW;IAC1B,QAAQ,CAAC,KAAK,EAAE,SAAS,CAAC;IAC1B,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;GAQG;AACH,wBAAgB,QAAQ,CAAC,MAAM,EAAE,SAAS,SAAS,EAAE,GAAG,MAAM,CAQ7D;AAED;;;GAGG;AACH,wBAAgB,WAAW,CACzB,MAAM,EAAE,SAAS,SAAS,EAAE,EAC5B,OAAO,EAAE,OAAO,GACf,SAAS,WAAW,EAAE,CAOxB;AAED;;;;;;GAMG;AACH,wBAAgB,OAAO,CACrB,MAAM,EAAE,SAAS,SAAS,EAAE,EAC5B,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,GACf,MAAM,CAER;AAED,oCAAoC;AACpC,wBAAgB,SAAS,CACvB,MAAM,EAAE,SAAS,SAAS,EAAE,EAC5B,OAAO,EAAE,OAAO,GACf,MAAM,CAER;AAED;;;;GAIG;AACH,wBAAgB,UAAU,CACxB,KAAK,EAAE,SAAS,CAAC,SAAS,SAAS,EAAE,CAAC,EAAE,EACxC,OAAO,EAAE,OAAO,GACf,MAAM,CAQR"}

package/dist/templates/code/extent.js

@@ -0,0 +1,54 @@
+/**
+ * One line as plain text, rebuilt by putting each token back at its own
+ * column.
+ *
+ * What sits between two tokens is the snippet's own indentation: the
+ * highlighter drops whitespace-only runs and keeps the column they ended at,
+ * and tabs were expanded to spaces before that, so padding the gaps with
+ * spaces gives the line back exactly.
+ */
+export function lineText(tokens) {
+    let text = "";
+    for (const token of tokens) {
+        text = text.padEnd(token.column, " ") + token.text;
+    }
+    return text;
+}
+/**
+ * Each token of a line with the width of everything before it, which is where
+ * it has to be drawn.
+ */
+export function placeTokens(tokens, advance) {
+    const text = lineText(tokens);
+    return tokens.map((token) => ({
+        token,
+        x: advance(text.slice(0, token.column)),
+    }));
+}
+/**
+ * How far along a line a character column falls.
+ *
+ * A column past the end of the line is measured as though the line ran on in
+ * spaces, so a mark naming more characters than the line holds still gets the
+ * width it asked for rather than stopping at the last glyph.
+ */
+export function columnX(tokens, column, advance) {
+    return advance(lineText(tokens).padEnd(column, " ").slice(0, column));
+}
+/** Width of the ink on one line. */
+export function lineWidth(tokens, advance) {
+    return advance(lineText(tokens));
+}
+/**
+ * Width of the widest line, measured from the lines actually being drawn.
+ * Narrower than the snippet's longest line whenever that line was dropped or
+ * clipped, which keeps the panel hugged tight to what is visible.
+ */
+export function blockWidth(lines, advance) {
+    let width = 0;
+    for (const tokens of lines) {
+        width = Math.max(width, lineWidth(tokens, advance));
+    }
+    return width;
+}
+//# sourceMappingURL=extent.js.map

package/dist/templates/code/extent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"extent.js","sourceRoot":"","sources":["../../../src/templates/code/extent.ts"],"names":[],"mappings":"AASA;;;;;;;;GAQG;AACH,MAAM,UAAU,QAAQ,CAAC,MAA4B;IACnD,IAAI,IAAI,GAAG,EAAE,CAAC;IAEd,KAAK,MAAM,KAAK,IAAI,MAAM,EAAE,CAAC;QAC3B,IAAI,GAAG,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC;IACrD,CAAC;IAED,OAAO,IAAI,CAAC;AACd,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,WAAW,CACzB,MAA4B,EAC5B,OAAgB;IAEhB,MAAM,IAAI,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAC;IAE9B,OAAO,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;QAC5B,KAAK;QACL,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;KACxC,CAAC,CAAC,CAAC;AACN,CAAC;AAED;;;;;;GAMG;AACH,MAAM,UAAU,OAAO,CACrB,MAA4B,EAC5B,MAAc,EACd,OAAgB;IAEhB,OAAO,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC;AACxE,CAAC;AAED,oCAAoC;AACpC,MAAM,UAAU,SAAS,CACvB,MAA4B,EAC5B,OAAgB;IAEhB,OAAO,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC;AACnC,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,UAAU,CACxB,KAAwC,EACxC,OAAgB;IAEhB,IAAI,KAAK,GAAG,CAAC,CAAC;IAEd,KAAK,MAAM,MAAM,IAAI,KAAK,EAAE,CAAC;QAC3B,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,SAAS,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;IACtD,CAAC;IAED,OAAO,KAAK,CAAC;AACf,CAAC"}

package/dist/templates/code/fit.d.ts

@@ -1,5 +1,13 @@
-import type { CodeToken, HighlightedCode } from "../../highlight/index.js";
+import type { CodeToken } from "../../highlight/index.js";
 import type { Dimensions, ResolvedConfig } from "../../types.js";
+/**
+ * How much room a snippet wants: how many lines it has, and how wide the
+ * widest of them is as a multiple of the font size.
+ */
+export interface SnippetExtent {
+    readonly lines: number;
+    readonly width: number;
+}
 /**
  * Pick the largest font size that fits the snippet in the panel on both axes,
  * clamped to the configured bounds.
@@ -10,13 +18,7 @@ import type { Dimensions, ResolvedConfig } from "../../types.js";
  * let a landscape image render the same snippet at half the size of its square
  * counterpart.
  */
-export declare function fitFontSize(highlighted: HighlightedCode, area: Dimensions, imageWidth: number, config: ResolvedConfig, charWidthRatio: number): number;
-/**
- * Width of the laid-out block in characters, measured from the lines actually
- * being drawn. Narrower than the snippet's longest line whenever that line was
- * dropped or clipped, which keeps the panel hugged tight to what is visible.
- */
-export declare function blockColumns(lines: readonly (readonly CodeToken[])[]): number;
+export declare function fitFontSize(extent: SnippetExtent, area: Dimensions, imageWidth: number, config: ResolvedConfig): number;
 /**
  * Drop lines that cannot fit at the chosen font size, marking the truncation
  * with an ellipsis line so the image never silently misrepresents the snippet.

package/dist/templates/code/fit.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"fit.d.ts","sourceRoot":"","sources":["../../../src/templates/code/fit.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAC3E,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAGjE;;;;;;;;;GASG;AACH,wBAAgB,WAAW,CACzB,WAAW,EAAE,eAAe,EAC5B,IAAI,EAAE,UAAU,EAChB,UAAU,EAAE,MAAM,EAClB,MAAM,EAAE,cAAc,EACtB,cAAc,EAAE,MAAM,GACrB,MAAM,CAUR;AAED;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,SAAS,CAAC,SAAS,SAAS,EAAE,CAAC,EAAE,GAAG,MAAM,CAY7E;AAaD;;;;;GAKG;AACH,wBAAgB,QAAQ,CACtB,KAAK,EAAE,SAAS,CAAC,SAAS,SAAS,EAAE,CAAC,EAAE,EACxC,UAAU,EAAE,MAAM,EAClB,IAAI,EAAE,MAAM,GACX,SAAS,CAAC,SAAS,SAAS,EAAE,CAAC,EAAE,CAWnC"}
+{"version":3,"file":"fit.d.ts","sourceRoot":"","sources":["../../../src/templates/code/fit.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAC1D,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAGjE;;;GAGG;AACH,MAAM,WAAW,aAAa;IAC5B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;;;GASG;AACH,wBAAgB,WAAW,CACzB,MAAM,EAAE,aAAa,EACrB,IAAI,EAAE,UAAU,EAChB,UAAU,EAAE,MAAM,EAClB,MAAM,EAAE,cAAc,GACrB,MAAM,CAUR;AAaD;;;;;GAKG;AACH,wBAAgB,QAAQ,CACtB,KAAK,EAAE,SAAS,CAAC,SAAS,SAAS,EAAE,CAAC,EAAE,EACxC,UAAU,EAAE,MAAM,EAClB,IAAI,EAAE,MAAM,GACX,SAAS,CAAC,SAAS,SAAS,EAAE,CAAC,EAAE,CAWnC"}

package/dist/templates/code/fit.js

@@ -9,28 +9,15 @@ import { ellipsis } from "../../text/ellipsis.js";
  * let a landscape image render the same snippet at half the size of its square
  * counterpart.
  */
-export function fitFontSize(highlighted, area, imageWidth, config, charWidthRatio) {
+export function fitFontSize(extent, area, imageWidth, config) {
     const { lineHeight, maxFontScale, minFontScale } = config.code;
-    const byWidth = area.width / (Math.max(1, highlighted.longestLine) * charWidthRatio);
-    const byHeight = area.height / (Math.max(1, highlighted.lines.length) * lineHeight);
+    // A snippet with nothing in it puts no bound on the width, and the clamp
+    // below is what then decides the size.
+    const byWidth = extent.width > 0 ? area.width / extent.width : Infinity;
+    const byHeight = area.height / (Math.max(1, extent.lines) * lineHeight);
     const fitted = Math.min(byWidth, byHeight, imageWidth * maxFontScale);
     return Math.max(1, Math.floor(Math.max(fitted, imageWidth * minFontScale)));
 }
-/**
- * Width of the laid-out block in characters, measured from the lines actually
- * being drawn. Narrower than the snippet's longest line whenever that line was
- * dropped or clipped, which keeps the panel hugged tight to what is visible.
- */
-export function blockColumns(lines) {
-    let columns = 0;
-    for (const tokens of lines) {
-        const last = tokens.at(-1);
-        if (last !== undefined) {
-            columns = Math.max(columns, last.column + last.text.length);
-        }
-    }
-    return columns;
-}
 function ellipsisToken(column) {
     return {
         text: ellipsis,

package/dist/templates/code/fit.js.map

@@ -1 +1 @@
-{"version":3,"file":"fit.js","sourceRoot":"","sources":["../../../src/templates/code/fit.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAElD;;;;;;;;;GASG;AACH,MAAM,UAAU,WAAW,CACzB,WAA4B,EAC5B,IAAgB,EAChB,UAAkB,EAClB,MAAsB,EACtB,cAAsB;IAEtB,MAAM,EAAE,UAAU,EAAE,YAAY,EAAE,YAAY,EAAE,GAAG,MAAM,CAAC,IAAI,CAAC;IAE/D,MAAM,OAAO,GACX,IAAI,CAAC,KAAK,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,WAAW,CAAC,WAAW,CAAC,GAAG,cAAc,CAAC,CAAC;IACvE,MAAM,QAAQ,GACZ,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,WAAW,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,UAAU,CAAC,CAAC;IAErE,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE,QAAQ,EAAE,UAAU,GAAG,YAAY,CAAC,CAAC;IACtE,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,MAAM,EAAE,UAAU,GAAG,YAAY,CAAC,CAAC,CAAC,CAAC;AAC9E,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,YAAY,CAAC,KAAwC;IACnE,IAAI,OAAO,GAAG,CAAC,CAAC;IAEhB,KAAK,MAAM,MAAM,IAAI,KAAK,EAAE,CAAC;QAC3B,MAAM,IAAI,GAAG,MAAM,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;QAE3B,IAAI,IAAI,KAAK,SAAS,EAAE,CAAC;YACvB,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAC9D,CAAC;IACH,CAAC;IAED,OAAO,OAAO,CAAC;AACjB,CAAC;AAED,SAAS,aAAa,CAAC,MAAc;IACnC,OAAO;QACL,IAAI,EAAE,QAAQ;QACd,MAAM;QACN,KAAK,EAAE,SAAS;QAChB,OAAO,EAAE,GAAG;QACZ,IAAI,EAAE,KAAK;QACX,MAAM,EAAE,KAAK;KACd,CAAC;AACJ,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,QAAQ,CACtB,KAAwC,EACxC,UAAkB,EAClB,IAAY;IAEZ,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,IAAI,CAAC,CAAC,CAAC;IAE5D,IAAI,KAAK,CAAC,MAAM,IAAI,QAAQ,EAAE,CAAC;QAC7B,OAAO,KAAK,CAAC;IACf,CAAC;IAED,MAAM,IAAI,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,QAAQ,GAAG,CAAC,CAAC,CAAC;IAC1C,MAAM,OAAO,GAAG,KAAK,CAAC,KAAK,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;IAE1E,OAAO,CAAC,GAAG,IAAI,EAAE,CAAC,aAAa,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,EAAE,MAAM,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;AAC/D,CAAC"}
+{"version":3,"file":"fit.js","sourceRoot":"","sources":["../../../src/templates/code/fit.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAWlD;;;;;;;;;GASG;AACH,MAAM,UAAU,WAAW,CACzB,MAAqB,EACrB,IAAgB,EAChB,UAAkB,EAClB,MAAsB;IAEtB,MAAM,EAAE,UAAU,EAAE,YAAY,EAAE,YAAY,EAAE,GAAG,MAAM,CAAC,IAAI,CAAC;IAE/D,yEAAyE;IACzE,uCAAuC;IACvC,MAAM,OAAO,GAAG,MAAM,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC;IACxE,MAAM,QAAQ,GAAG,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,MAAM,CAAC,KAAK,CAAC,GAAG,UAAU,CAAC,CAAC;IAExE,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE,QAAQ,EAAE,UAAU,GAAG,YAAY,CAAC,CAAC;IACtE,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,MAAM,EAAE,UAAU,GAAG,YAAY,CAAC,CAAC,CAAC,CAAC;AAC9E,CAAC;AAED,SAAS,aAAa,CAAC,MAAc;IACnC,OAAO;QACL,IAAI,EAAE,QAAQ;QACd,MAAM;QACN,KAAK,EAAE,SAAS;QAChB,OAAO,EAAE,GAAG;QACZ,IAAI,EAAE,KAAK;QACX,MAAM,EAAE,KAAK;KACd,CAAC;AACJ,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,QAAQ,CACtB,KAAwC,EACxC,UAAkB,EAClB,IAAY;IAEZ,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,IAAI,CAAC,CAAC,CAAC;IAE5D,IAAI,KAAK,CAAC,MAAM,IAAI,QAAQ,EAAE,CAAC;QAC7B,OAAO,KAAK,CAAC;IACf,CAAC;IAED,MAAM,IAAI,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,QAAQ,GAAG,CAAC,CAAC,CAAC;IAC1C,MAAM,OAAO,GAAG,KAAK,CAAC,KAAK,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;IAE1E,OAAO,CAAC,GAAG,IAAI,EAAE,CAAC,aAAa,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,EAAE,MAAM,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;AAC/D,CAAC"}

package/dist/templates/code/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/templates/code/index.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAe/C;;;;;;;;GAQG;AACH,eAAO,MAAM,YAAY,EAAE,QA8G1B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/templates/code/index.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAe/C;;;;;;;;GAQG;AACH,eAAO,MAAM,YAAY,EAAE,QAgH1B,CAAC"}

package/dist/templates/code/index.js

@@ -1,9 +1,10 @@
 import { highlightCode } from "../../highlight/index.js";
 import { footerFontSize, hasFooter } from "../footer.js";
 import { optionalString } from "../../props.js";
+import { codeAdvance } from "./advance.js";
 import { barRoom, windowBar } from "./bar.js";
 import { codeFooter, codeHeading } from "./chrome.js";
-import { blockColumns } from "./fit.js";
+import { blockWidth } from "./extent.js";
 import { gutterColumns, numberLines } from "./gutter.js";
 import { codeMarks } from "./mark/index.js";
 import { fitSnippet } from "./layout.js";
@@ -11,7 +12,6 @@ import { layoutPanel, titleBand } from "./panel.js";
 import { hugPanel, panelSvg } from "./plate.js";
 import { codeBody } from "./spans.js";
 import { warnIfTruncated } from "./warn.js";
-import { charWidthRatio } from "./width.js";
 /**
  * Syntax-highlighted code snippet on a rounded panel over the configured
  * background. Reads `code` and `language` from the props (as the original
@@ -36,7 +36,8 @@ export const codeTemplate = {
         const available = layoutPanel(dimensions, config, titleFs, footerFs, title !== undefined && title !== "", hasFooter(config));
         const bar = barRoom(config, available.width);
         const gutter = gutterColumns(config, highlighted.lines.length);
-        const fitted = fitSnippet(highlighted, { ...available, y: available.y + bar, height: available.height - bar }, width, config, charWidthRatio(measure, config.code.fontFamily), gutter);
+        const advance = codeAdvance(measure, config.code.fontFamily);
+        const fitted = fitSnippet(highlighted, { ...available, y: available.y + bar, height: available.height - bar }, width, config, advance, gutter);
         const dropped = highlighted.lines.length - fitted.lines.length;
         warnIfTruncated(config, dimensions, { dropped, clipped: fitted.clipped }, highlighted.lines.length);
         const lines = numberLines(fitted.lines, gutter, dropped);
@@ -45,7 +46,7 @@ export const codeTemplate = {
         // block leaves the code marooned off to one side.
         const bodyHeight = fitted.lines.length * fitted.step;
         const panel = hugPanel(available, {
-            width: blockColumns(lines) * fitted.charWidth + fitted.padding * 2,
+            width: blockWidth(lines, advance) * fitted.fontSize + fitted.padding * 2,
             height: bar + bodyHeight + fitted.padding * 2,
         });
         // Code reads from the left edge, as it does in an editor. Indentation is
@@ -56,7 +57,7 @@ export const codeTemplate = {
             originX,
             originY,
             fontSize: fitted.fontSize,
-            charWidth: fitted.charWidth,
+            advance,
             step: fitted.step,
             fontFamily: config.code.fontFamily,
             foreground: highlighted.foreground,
@@ -70,7 +71,7 @@ export const codeTemplate = {
             fontSize: fitted.fontSize,
             step: fitted.step,
             band: { x: originX, width: panel.width - fitted.padding * 2 },
-        }, config);
+        }, config, advance);
         const shadowOffset = Math.round(Math.min(width, height) * 0.01);
         const plate = panelSvg(panel, highlighted.background, Math.max(1, shadowOffset), config);
         return (codeHeading(title, titleBand(panel, dimensions, titleFs), titleFs, config) +

package/dist/templates/code/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/templates/code/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/templates/code/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEzD,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzD,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACzC,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAE5C;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,YAAY,GAAa;IACpC,IAAI,EAAE,MAAM;IACZ,KAAK,CAAC,MAAM,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE;QACjD,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,UAAU,CAAC;QACrC,MAAM,KAAK,GAAG,cAAc,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QAC1C,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,KAAK,CAAC,CAAC;QAC3C,MAAM,QAAQ,GAAG,cAAc,CAAC,UAAU,CAAC,CAAC;QAE5C,MAAM,WAAW,GAAG,MAAM,aAAa,CACrC,cAAc,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EACnC;YACE,QAAQ,EAAE,cAAc,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,IAAI,MAAM;YACrD,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,KAAK;YAC1D,OAAO,EAAE,MAAM,CAAC,IAAI,CAAC,OAAO;SAC7B,CACF,CAAC;QAEF,MAAM,SAAS,GAAG,WAAW,CAC3B,UAAU,EACV,MAAM,EACN,OAAO,EACP,QAAQ,EACR,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,EAAE,EACnC,SAAS,CAAC,MAAM,CAAC,CAClB,CAAC;QACF,MAAM,GAAG,GAAG,OAAO,CAAC,MAAM,EAAE,SAAS,CAAC,KAAK,CAAC,CAAC;QAC7C,MAAM,MAAM,GAAG,aAAa,CAAC,MAAM,EAAE,WAAW,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;QAC/D,MAAM,OAAO,GAAG,WAAW,CAAC,OAAO,EAAE,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QAE7D,MAAM,MAAM,GAAG,UAAU,CACvB,WAAW,EACX,EAAE,GAAG,SAAS,EAAE,CAAC,EAAE,SAAS,CAAC,CAAC,GAAG,GAAG,EAAE,MAAM,EAAE,SAAS,CAAC,MAAM,GAAG,GAAG,EAAE,EACtE,KAAK,EACL,MAAM,EACN,OAAO,EACP,MAAM,CACP,CAAC;QAEF,MAAM,OAAO,GAAG,WAAW,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC;QAE/D,eAAe,CACb,MAAM,EACN,UAAU,EACV,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,CAAC,OAAO,EAAE,EACpC,WAAW,CAAC,KAAK,CAAC,MAAM,CACzB,CAAC;QAEF,MAAM,KAAK,GAAG,WAAW,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,CAAC,CAAC;QAEzD,2EAA2E;QAC3E,wEAAwE;QACxE,kDAAkD;QAClD,MAAM,UAAU,GAAG,MAAM,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,IAAI,CAAC;QACrD,MAAM,KAAK,GAAG,QAAQ,CAAC,SAAS,EAAE;YAChC,KAAK,EAAE,UAAU,CAAC,KAAK,EAAE,OAAO,CAAC,GAAG,MAAM,CAAC,QAAQ,GAAG,MAAM,CAAC,OAAO,GAAG,CAAC;YACxE,MAAM,EAAE,GAAG,GAAG,UAAU,GAAG,MAAM,CAAC,OAAO,GAAG,CAAC;SAC9C,CAAC,CAAC;QAEH,yEAAyE;QACzE,kEAAkE;QAClE,MAAM,OAAO,GAAG,KAAK,CAAC,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC;QACzC,MAAM,OAAO,GAAG,KAAK,CAAC,CAAC,GAAG,GAAG,GAAG,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,GAAG,UAAU,CAAC,GAAG,CAAC,CAAC;QAEtE,MAAM,IAAI,GAAG,QAAQ,CAAC,KAAK,EAAE;YAC3B,OAAO;YACP,OAAO;YACP,QAAQ,EAAE,MAAM,CAAC,QAAQ;YACzB,OAAO;YACP,IAAI,EAAE,MAAM,CAAC,IAAI;YACjB,UAAU,EAAE,MAAM,CAAC,IAAI,CAAC,UAAU;YAClC,UAAU,EAAE,WAAW,CAAC,UAAU;SACnC,CAAC,CAAC;QAEH,MAAM,KAAK,GAAG,SAAS,CACrB,KAAK,EACL,MAAM,CAAC,KAAK,EACZ;YACE,sEAAsE;YACtE,yCAAyC;YACzC,OAAO,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC,SAAS;YAC5C,OAAO;YACP,SAAS,EAAE,MAAM,CAAC,SAAS;YAC3B,QAAQ,EAAE,MAAM,CAAC,QAAQ;YACzB,IAAI,EAAE,MAAM,CAAC,IAAI;YACjB,IAAI,EAAE,EAAE,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,GAAG,MAAM,CAAC,OAAO,GAAG,CAAC,EAAE;SAC9D,EACD,MAAM,EACN,OAAO,CACR,CAAC;QAEF,MAAM,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,MAAM,CAAC,GAAG,IAAI,CAAC,CAAC;QAChE,MAAM,KAAK,GAAG,QAAQ,CACpB,KAAK,EACL,WAAW,CAAC,UAAU,EACtB,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,YAAY,CAAC,EACzB,MAAM,CACP,CAAC;QAEF,OAAO,CACL,WAAW,CACT,KAAK,EACL,SAAS,CAAC,KAAK,EAAE,UAAU,EAAE,OAAO,CAAC,EACrC,OAAO,EACP,MAAM,CACP;YACD,KAAK;YACL,SAAS,CAAC,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,CAAC;YAC7C,KAAK;YACL,IAAI;YACJ,UAAU,CAAC,UAAU,EAAE,QAAQ,EAAE,MAAM,CAAC,CACzC,CAAC;IACJ,CAAC;CACF,CAAC"}

package/dist/templates/code/layout.d.ts

@@ -1,5 +1,6 @@
 import type { CodeToken, HighlightedCode } from "../../highlight/index.js";
 import type { ResolvedConfig } from "../../types.js";
+import type { Advance } from "./advance.js";
 import type { Panel } from "./panel.js";
 /**
  * A snippet sized to the space it has: the lines that survived, the grid they
@@ -9,6 +10,7 @@ export interface FittedCode {
     readonly lines: readonly (readonly CodeToken[])[];
     readonly clipped: number;
     readonly fontSize: number;
+    /** One cell of the monospace grid, in pixels, for the parts that are one. */
     readonly charWidth: number;
     readonly step: number;
     readonly padding: number;
@@ -19,8 +21,9 @@ export interface FittedCode {
  *
  * `gutter` is columns reserved to the left of the code, for line numbers. It
  * is counted in characters rather than pixels because that is what it is: the
- * numbers sit on the same monospace grid, so the space they take follows
- * whatever font size the fitting settles on.
+ * numbers are digits in a monospace face, so the space they take follows
+ * whatever font size the fitting settles on. Everything to the right of them
+ * is measured instead, since the code is text and not necessarily a grid.
  */
-export declare function fitSnippet(highlighted: HighlightedCode, available: Panel, imageWidth: number, config: ResolvedConfig, charWidthRatio: number, gutter?: number): FittedCode;
+export declare function fitSnippet(highlighted: HighlightedCode, available: Panel, imageWidth: number, config: ResolvedConfig, advance: Advance, gutter?: number): FittedCode;
 //# sourceMappingURL=layout.d.ts.map

package/dist/templates/code/layout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../../../src/templates/code/layout.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAC3E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAGrD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAExC;;;GAGG;AACH,MAAM,WAAW,UAAU;IACzB,QAAQ,CAAC,KAAK,EAAE,SAAS,CAAC,SAAS,SAAS,EAAE,CAAC,EAAE,CAAC;IAClD,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;CAC1B;AAED;;;;;;;;GAQG;AACH,wBAAgB,UAAU,CACxB,WAAW,EAAE,eAAe,EAC5B,SAAS,EAAE,KAAK,EAChB,UAAU,EAAE,MAAM,EAClB,MAAM,EAAE,cAAc,EACtB,cAAc,EAAE,MAAM,EACtB,MAAM,SAAI,GACT,UAAU,CA6BZ"}
+{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../../../src/templates/code/layout.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAC3E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AACrD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAK5C,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAExC;;;GAGG;AACH,MAAM,WAAW,UAAU;IACzB,QAAQ,CAAC,KAAK,EAAE,SAAS,CAAC,SAAS,SAAS,EAAE,CAAC,EAAE,CAAC;IAClD,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,6EAA6E;IAC7E,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;CAC1B;AAED;;;;;;;;;GASG;AACH,wBAAgB,UAAU,CACxB,WAAW,EAAE,eAAe,EAC5B,SAAS,EAAE,KAAK,EAChB,UAAU,EAAE,MAAM,EAClB,MAAM,EAAE,cAAc,EACtB,OAAO,EAAE,OAAO,EAChB,MAAM,SAAI,GACT,UAAU,CAuCZ"}

package/dist/templates/code/layout.js

@@ -1,4 +1,6 @@
+import { cellWidth } from "./advance.js";
 import { clipLines } from "./clip.js";
+import { blockWidth } from "./extent.js";
 import { fitFontSize, fitLines } from "./fit.js";
 /**
  * Fit a highlighted snippet into the panel it has been allotted: choose the
@@ -6,21 +8,32 @@ import { fitFontSize, fitLines } from "./fit.js";
  *
  * `gutter` is columns reserved to the left of the code, for line numbers. It
  * is counted in characters rather than pixels because that is what it is: the
- * numbers sit on the same monospace grid, so the space they take follows
- * whatever font size the fitting settles on.
+ * numbers are digits in a monospace face, so the space they take follows
+ * whatever font size the fitting settles on. Everything to the right of them
+ * is measured instead, since the code is text and not necessarily a grid.
  */
-export function fitSnippet(highlighted, available, imageWidth, config, charWidthRatio, gutter = 0) {
+export function fitSnippet(highlighted, available, imageWidth, config, advance, gutter = 0) {
     const inner = Math.round(Math.min(available.width, available.height) * 0.07);
     const codeWidth = Math.max(1, available.width - inner * 2);
     const codeHeight = Math.max(1, available.height - inner * 2);
-    const fontSize = fitFontSize({ ...highlighted, longestLine: highlighted.longestLine + gutter }, { width: codeWidth, height: codeHeight }, imageWidth, config, charWidthRatio);
-    const charWidth = fontSize * charWidthRatio;
+    const cell = cellWidth(advance);
+    const fontSize = fitFontSize({
+        lines: highlighted.lines.length,
+        width: blockWidth(highlighted.lines, advance) + gutter * cell,
+    }, { width: codeWidth, height: codeHeight }, imageWidth, config);
     const step = fontSize * config.code.lineHeight;
-    const { lines, clipped } = clipLines(fitLines(highlighted.lines, codeHeight, step), Math.max(1, Math.floor(codeWidth / charWidth) - gutter));
+    const { lines, clipped } = clipLines(fitLines(highlighted.lines, codeHeight, step), Math.max(cell, codeWidth / fontSize - gutter * cell), advance);
     // Padding reads best proportional to the text rather than the panel, since a
     // snippet fitted down to a small size wants tighter margins. Only ever
     // shrink, so the code area the font was fitted against stays valid.
     const padding = Math.max(Math.min(inner, Math.round(fontSize * 1.6)), Math.round(inner * 0.35));
-    return { lines, clipped, fontSize, charWidth, step, padding };
+    return {
+        lines,
+        clipped,
+        fontSize,
+        charWidth: fontSize * cell,
+        step,
+        padding,
+    };
 }
 //# sourceMappingURL=layout.js.map

package/dist/templates/code/layout.js.map

@@ -1 +1 @@
-{"version":3,"file":"layout.js","sourceRoot":"","sources":["../../../src/templates/code/layout.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AACtC,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAgBjD;;;;;;;;GAQG;AACH,MAAM,UAAU,UAAU,CACxB,WAA4B,EAC5B,SAAgB,EAChB,UAAkB,EAClB,MAAsB,EACtB,cAAsB,EACtB,MAAM,GAAG,CAAC;IAEV,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC,KAAK,EAAE,SAAS,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,CAAC;IAC7E,MAAM,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,SAAS,CAAC,KAAK,GAAG,KAAK,GAAG,CAAC,CAAC,CAAC;IAC3D,MAAM,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,SAAS,CAAC,MAAM,GAAG,KAAK,GAAG,CAAC,CAAC,CAAC;IAE7D,MAAM,QAAQ,GAAG,WAAW,CAC1B,EAAE,GAAG,WAAW,EAAE,WAAW,EAAE,WAAW,CAAC,WAAW,GAAG,MAAM,EAAE,EACjE,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,UAAU,EAAE,EACxC,UAAU,EACV,MAAM,EACN,cAAc,CACf,CAAC;IACF,MAAM,SAAS,GAAG,QAAQ,GAAG,cAAc,CAAC;IAC5C,MAAM,IAAI,GAAG,QAAQ,GAAG,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC;IAE/C,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,SAAS,CAClC,QAAQ,CAAC,WAAW,CAAC,KAAK,EAAE,UAAU,EAAE,IAAI,CAAC,EAC7C,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,SAAS,CAAC,GAAG,MAAM,CAAC,CACxD,CAAC;IAEF,6EAA6E;IAC7E,uEAAuE;IACvE,oEAAoE;IACpE,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CACtB,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,GAAG,CAAC,CAAC,EAC3C,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,CACzB,CAAC;IAEF,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;AAChE,CAAC"}
+{"version":3,"file":"layout.js","sourceRoot":"","sources":["../../../src/templates/code/layout.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AACtC,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAiBjD;;;;;;;;;GASG;AACH,MAAM,UAAU,UAAU,CACxB,WAA4B,EAC5B,SAAgB,EAChB,UAAkB,EAClB,MAAsB,EACtB,OAAgB,EAChB,MAAM,GAAG,CAAC;IAEV,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC,KAAK,EAAE,SAAS,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,CAAC;IAC7E,MAAM,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,SAAS,CAAC,KAAK,GAAG,KAAK,GAAG,CAAC,CAAC,CAAC;IAC3D,MAAM,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,SAAS,CAAC,MAAM,GAAG,KAAK,GAAG,CAAC,CAAC,CAAC;IAC7D,MAAM,IAAI,GAAG,SAAS,CAAC,OAAO,CAAC,CAAC;IAEhC,MAAM,QAAQ,GAAG,WAAW,CAC1B;QACE,KAAK,EAAE,WAAW,CAAC,KAAK,CAAC,MAAM;QAC/B,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,EAAE,OAAO,CAAC,GAAG,MAAM,GAAG,IAAI;KAC9D,EACD,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,UAAU,EAAE,EACxC,UAAU,EACV,MAAM,CACP,CAAC;IACF,MAAM,IAAI,GAAG,QAAQ,GAAG,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC;IAE/C,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,SAAS,CAClC,QAAQ,CAAC,WAAW,CAAC,KAAK,EAAE,UAAU,EAAE,IAAI,CAAC,EAC7C,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,IAAI,CAAC,EACpD,OAAO,CACR,CAAC;IAEF,6EAA6E;IAC7E,uEAAuE;IACvE,oEAAoE;IACpE,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CACtB,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,GAAG,CAAC,CAAC,EAC3C,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,CACzB,CAAC;IAEF,OAAO;QACL,KAAK;QACL,OAAO;QACP,QAAQ;QACR,SAAS,EAAE,QAAQ,GAAG,IAAI;QAC1B,IAAI;QACJ,OAAO;KACR,CAAC;AACJ,CAAC"}

package/dist/templates/code/mark/draw.d.ts

@@ -4,6 +4,7 @@ export interface MarkMetrics {
     /** Where column zero of the code is, past the gutter. */
     readonly originX: number;
     readonly originY: number;
+    /** One cell of the monospace grid, which is what the padding is keyed to. */
     readonly charWidth: number;
     readonly fontSize: number;
     readonly step: number;

package/dist/templates/code/mark/draw.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"draw.d.ts","sourceRoot":"","sources":["../../../../src/templates/code/mark/draw.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAE5C,2EAA2E;AAC3E,MAAM,WAAW,WAAW;IAC1B,yDAAyD;IACzD,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,4EAA4E;IAC5E,QAAQ,CAAC,IAAI,EAAE;QAAE,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;CAC/D;AAmBD;;;;;;;;GAQG;AACH,wBAAgB,OAAO,CACrB,IAAI,EAAE,QAAQ,EACd,OAAO,EAAE,WAAW,EACpB,KAAK,EAAE,MAAM,GACZ,MAAM,CA2BR"}
+{"version":3,"file":"draw.d.ts","sourceRoot":"","sources":["../../../../src/templates/code/mark/draw.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAE5C,2EAA2E;AAC3E,MAAM,WAAW,WAAW;IAC1B,yDAAyD;IACzD,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,6EAA6E;IAC7E,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,4EAA4E;IAC5E,QAAQ,CAAC,IAAI,EAAE;QAAE,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;CAC/D;AAmBD;;;;;;;;GAQG;AACH,wBAAgB,OAAO,CACrB,IAAI,EAAE,QAAQ,EACd,OAAO,EAAE,WAAW,EACpB,KAAK,EAAE,MAAM,GACZ,MAAM,CA2BR"}

package/dist/templates/code/mark/draw.js

@@ -23,14 +23,14 @@ export function markSvg(span, metrics, color) {
     const { originX, charWidth, fontSize } = metrics;
     const { y, height } = lineRect(span, metrics);
     const fill = span.color ?? color;
-    if (span.length === undefined) {
+    if (span.width === undefined) {
         return box({ x: metrics.band.x, y, width: metrics.band.width, height }, { radius: Math.round(fontSize * 0.2), fill, fillOpacity: 0.16 });
     }
     const pad = charWidth * padScale;
     return box({
-        x: Math.round(originX + span.column * charWidth - pad),
+        x: Math.round(originX + span.x * fontSize - pad),
         y,
-        width: Math.round(span.length * charWidth + pad * 2),
+        width: Math.round(span.width * fontSize + pad * 2),
         height,
     }, {
         radius: Math.round(fontSize * 0.2),

package/dist/templates/code/mark/draw.js.map

@@ -1 +1 @@
-{"version":3,"file":"draw.js","sourceRoot":"","sources":["../../../../src/templates/code/mark/draw.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,0BAA0B,CAAC;AAe/C,2EAA2E;AAC3E,MAAM,QAAQ,GAAG,IAAI,CAAC;AAEtB,4EAA4E;AAC5E,SAAS,QAAQ,CACf,IAAc,EACd,OAAoB;IAEpB,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,OAAO,CAAC;IAC5C,MAAM,GAAG,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAEhC,OAAO;QACL,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,IAAI,GAAG,IAAI,GAAG,CAAC,IAAI,GAAG,QAAQ,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC;QACvE,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,GAAG,GAAG,CAAC,CAAC;KACvC,CAAC;AACJ,CAAC;AAED;;;;;;;;GAQG;AACH,MAAM,UAAU,OAAO,CACrB,IAAc,EACd,OAAoB,EACpB,KAAa;IAEb,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,OAAO,CAAC;IACjD,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,GAAG,QAAQ,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;IAC9C,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC;IAEjC,IAAI,IAAI,CAAC,MAAM,KAAK,SAAS,EAAE,CAAC;QAC9B,OAAO,GAAG,CACR,EAAE,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,EAC3D,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,GAAG,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,CAChE,CAAC;IACJ,CAAC;IAED,MAAM,GAAG,GAAG,SAAS,GAAG,QAAQ,CAAC;IAEjC,OAAO,GAAG,CACR;QACE,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,MAAM,GAAG,SAAS,GAAG,GAAG,CAAC;QACtD,CAAC;QACD,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,GAAG,SAAS,GAAG,GAAG,GAAG,CAAC,CAAC;QACpD,MAAM;KACP,EACD;QACE,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,GAAG,CAAC;QAClC,MAAM,EAAE,IAAI;QACZ,WAAW,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,IAAI,CAAC,CAAC;KACtD,CACF,CAAC;AACJ,CAAC"}
+{"version":3,"file":"draw.js","sourceRoot":"","sources":["../../../../src/templates/code/mark/draw.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,0BAA0B,CAAC;AAgB/C,2EAA2E;AAC3E,MAAM,QAAQ,GAAG,IAAI,CAAC;AAEtB,4EAA4E;AAC5E,SAAS,QAAQ,CACf,IAAc,EACd,OAAoB;IAEpB,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,OAAO,CAAC;IAC5C,MAAM,GAAG,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAEhC,OAAO;QACL,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,IAAI,GAAG,IAAI,GAAG,CAAC,IAAI,GAAG,QAAQ,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC;QACvE,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,GAAG,GAAG,CAAC,CAAC;KACvC,CAAC;AACJ,CAAC;AAED;;;;;;;;GAQG;AACH,MAAM,UAAU,OAAO,CACrB,IAAc,EACd,OAAoB,EACpB,KAAa;IAEb,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,OAAO,CAAC;IACjD,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,GAAG,QAAQ,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;IAC9C,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC;IAEjC,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,EAAE,CAAC;QAC7B,OAAO,GAAG,CACR,EAAE,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,EAC3D,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,GAAG,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,CAChE,CAAC;IACJ,CAAC;IAED,MAAM,GAAG,GAAG,SAAS,GAAG,QAAQ,CAAC;IAEjC,OAAO,GAAG,CACR;QACE,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,CAAC,GAAG,QAAQ,GAAG,GAAG,CAAC;QAChD,CAAC;QACD,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,GAAG,QAAQ,GAAG,GAAG,GAAG,CAAC,CAAC;QAClD,MAAM;KACP,EACD;QACE,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,GAAG,CAAC;QAClC,MAAM,EAAE,IAAI;QACZ,WAAW,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,IAAI,CAAC,CAAC;KACtD,CACF,CAAC;AACJ,CAAC"}

package/dist/templates/code/mark/index.d.ts

@@ -1,5 +1,6 @@
 import type { CodeToken } from "../../../highlight/index.js";
 import type { MetaImageProps, ResolvedConfig } from "../../../types.js";
+import type { Advance } from "../advance.js";
 import type { MarkMetrics } from "./draw.js";
 export type { MarkMetrics } from "./draw.js";
 /**
@@ -12,5 +13,5 @@ export type { MarkMetrics } from "./draw.js";
  * marks were not found, and the truncation warning beside it says whether
  * there was room for them.
  */
-export declare function codeMarks(props: MetaImageProps, lines: readonly (readonly CodeToken[])[], metrics: MarkMetrics, config: ResolvedConfig): string;
+export declare function codeMarks(props: MetaImageProps, lines: readonly (readonly CodeToken[])[], metrics: MarkMetrics, config: ResolvedConfig, advance: Advance): string;
 //# sourceMappingURL=index.d.ts.map

package/dist/templates/code/mark/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/templates/code/mark/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAC7D,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAExE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAI7C,YAAY,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAE7C;;;;;;;;;GASG;AACH,wBAAgB,SAAS,CACvB,KAAK,EAAE,cAAc,EACrB,KAAK,EAAE,SAAS,CAAC,SAAS,SAAS,EAAE,CAAC,EAAE,EACxC,OAAO,EAAE,WAAW,EACpB,MAAM,EAAE,cAAc,GACrB,MAAM,CA0BR"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/templates/code/mark/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAC7D,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACxE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAE7C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAI7C,YAAY,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAE7C;;;;;;;;;GASG;AACH,wBAAgB,SAAS,CACvB,KAAK,EAAE,cAAc,EACrB,KAAK,EAAE,SAAS,CAAC,SAAS,SAAS,EAAE,CAAC,EAAE,EACxC,OAAO,EAAE,WAAW,EACpB,MAAM,EAAE,cAAc,EACtB,OAAO,EAAE,OAAO,GACf,MAAM,CA0BR"}

package/dist/templates/code/mark/index.js

@@ -11,14 +11,14 @@ import { readMarks } from "./read.js";
  * marks were not found, and the truncation warning beside it says whether
  * there was room for them.
  */
-export function codeMarks(props, lines, metrics, config) {
+export function codeMarks(props, lines, metrics, config, advance) {
     // Widened because this arrives from a post's frontmatter: the declared type
     // is what a project means to write, not what the file holds.
     const declared = props["mark"];
     const missing = [];
     let drawn = "";
     for (const mark of readMarks(declared, config)) {
-        const span = locateMark(mark, lines);
+        const span = locateMark(mark, lines, advance);
         if (span === undefined) {
             missing.push(mark.text ?? `line ${String(mark.line ?? 0)}`);
             continue;

package/dist/templates/code/mark/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/templates/code/mark/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAEpC,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAItC;;;;;;;;;GASG;AACH,MAAM,UAAU,SAAS,CACvB,KAAqB,EACrB,KAAwC,EACxC,OAAoB,EACpB,MAAsB;IAEtB,4EAA4E;IAC5E,6DAA6D;IAC7D,MAAM,QAAQ,GAAY,KAAK,CAAC,MAAM,CAAC,CAAC;IACxC,MAAM,OAAO,GAAa,EAAE,CAAC;IAC7B,IAAI,KAAK,GAAG,EAAE,CAAC;IAEf,KAAK,MAAM,IAAI,IAAI,SAAS,CAAC,QAAQ,EAAE,MAAM,CAAC,EAAE,CAAC;QAC/C,MAAM,IAAI,GAAG,UAAU,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;QAErC,IAAI,IAAI,KAAK,SAAS,EAAE,CAAC;YACvB,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,QAAQ,MAAM,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC;YAC5D,SAAS;QACX,CAAC;QAED,KAAK,IAAI,OAAO,CAAC,IAAI,EAAE,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;IAC3D,CAAC;IAED,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;QACvB,MAAM,CAAC,SAAS,CACd,aAAa,OAAO,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE;YACnE,qCAAqC,CACxC,CAAC;IACJ,CAAC;IAED,OAAO,KAAK,CAAC;AACf,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/templates/code/mark/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAEpC,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAItC;;;;;;;;;GASG;AACH,MAAM,UAAU,SAAS,CACvB,KAAqB,EACrB,KAAwC,EACxC,OAAoB,EACpB,MAAsB,EACtB,OAAgB;IAEhB,4EAA4E;IAC5E,6DAA6D;IAC7D,MAAM,QAAQ,GAAY,KAAK,CAAC,MAAM,CAAC,CAAC;IACxC,MAAM,OAAO,GAAa,EAAE,CAAC;IAC7B,IAAI,KAAK,GAAG,EAAE,CAAC;IAEf,KAAK,MAAM,IAAI,IAAI,SAAS,CAAC,QAAQ,EAAE,MAAM,CAAC,EAAE,CAAC;QAC/C,MAAM,IAAI,GAAG,UAAU,CAAC,IAAI,EAAE,KAAK,EAAE,OAAO,CAAC,CAAC;QAE9C,IAAI,IAAI,KAAK,SAAS,EAAE,CAAC;YACvB,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,QAAQ,MAAM,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC;YAC5D,SAAS;QACX,CAAC;QAED,KAAK,IAAI,OAAO,CAAC,IAAI,EAAE,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;IAC3D,CAAC;IAED,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;QACvB,MAAM,CAAC,SAAS,CACd,aAAa,OAAO,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE;YACnE,qCAAqC,CACxC,CAAC;IACJ,CAAC;IAED,OAAO,KAAK,CAAC;AACf,CAAC"}

package/dist/templates/code/mark/locate.d.ts

@@ -1,20 +1,22 @@
 import type { CodeToken } from "../../../highlight/index.js";
+import type { Advance } from "../advance.js";
 import type { CodeMark } from "./read.js";
-/** Where a mark landed on the character grid, once it was found. */
+/** Where a mark landed on the drawn snippet, once it was found. */
 export interface MarkSpan {
     /** Zero-based, into the lines being drawn. */
     readonly line: number;
-    readonly column: number;
-    /** Characters, or `undefined` for the whole line. */
-    readonly length: number | undefined;
+    /** How far along the line the mark starts, as a multiple of the size. */
+    readonly x: number;
+    /** How much of the line it covers, or `undefined` for the whole of it. */
+    readonly width: number | undefined;
     readonly color: string | undefined;
 }
 /**
- * Turn a declared mark into grid coordinates, or nothing where it names
- * something the image does not show.
+ * Turn a declared mark into coordinates on the drawn snippet, or nothing where
+ * it names something the image does not show.
  *
  * A mark naming a line and no column is the whole line, which is the band an
  * editor draws rather than a box around a word.
  */
-export declare function locateMark(mark: CodeMark, lines: readonly (readonly CodeToken[])[]): MarkSpan | undefined;
+export declare function locateMark(mark: CodeMark, lines: readonly (readonly CodeToken[])[], advance: Advance): MarkSpan | undefined;
 //# sourceMappingURL=locate.d.ts.map

package/dist/templates/code/mark/locate.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"locate.d.ts","sourceRoot":"","sources":["../../../../src/templates/code/mark/locate.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAC7D,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAE1C,oEAAoE;AACpE,MAAM,WAAW,QAAQ;IACvB,8CAA8C;IAC9C,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,qDAAqD;IACrD,QAAQ,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC;IACpC,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;CACpC;AAsCD;;;;;;GAMG;AACH,wBAAgB,UAAU,CACxB,IAAI,EAAE,QAAQ,EACd,KAAK,EAAE,SAAS,CAAC,SAAS,SAAS,EAAE,CAAC,EAAE,GACvC,QAAQ,GAAG,SAAS,CAyBtB"}
+{"version":3,"file":"locate.d.ts","sourceRoot":"","sources":["../../../../src/templates/code/mark/locate.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAC7D,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAE7C,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAE1C,mEAAmE;AACnE,MAAM,WAAW,QAAQ;IACvB,8CAA8C;IAC9C,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,yEAAyE;IACzE,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAC;IACnB,0EAA0E;IAC1E,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IACnC,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;CACpC;AAiDD;;;;;;GAMG;AACH,wBAAgB,UAAU,CACxB,IAAI,EAAE,QAAQ,EACd,KAAK,EAAE,SAAS,CAAC,SAAS,SAAS,EAAE,CAAC,EAAE,EACxC,OAAO,EAAE,OAAO,GACf,QAAQ,GAAG,SAAS,CA0BtB"}

package/dist/templates/code/mark/locate.js

@@ -1,21 +1,13 @@
+import { columnX, lineText } from "../extent.js";
 /**
- * One line as plain text, rebuilt from the tokens by putting each back at its
- * own column.
+ * The first line holding the text, and which character of it it starts at.
  *
- * The tokens are what survived highlighting, fitting and clipping, so this is
- * the line as it will be drawn rather than as it was written. Searching what
- * is drawn is the point: a mark on a line that was dropped has nowhere to go,
- * and finding it in the original snippet would only mean drawing a box in the
- * wrong place.
+ * The tokens are what survived highlighting, fitting and clipping, so this
+ * searches the line as it will be drawn rather than as it was written.
+ * Searching what is drawn is the point: a mark on a line that was dropped has
+ * nowhere to go, and finding it in the original snippet would only mean
+ * drawing a box in the wrong place.
  */
-function lineText(tokens) {
-    let text = "";
-    for (const token of tokens) {
-        text = text.padEnd(token.column, " ") + token.text;
-    }
-    return text;
-}
-/** The first line holding the text, and where on it. */
 function findText(text, lines) {
     for (const [line, tokens] of lines.entries()) {
         const column = lineText(tokens).indexOf(text);
@@ -26,31 +18,41 @@ function findText(text, lines) {
     return undefined;
 }
 /**
- * Turn a declared mark into grid coordinates, or nothing where it names
- * something the image does not show.
+ * A run of characters on one line, measured. A mark is declared in characters,
+ * since that is how somebody reads a snippet, and drawn at whatever width the
+ * face gives them.
+ */
+function spanOf(found, length, lines, advance, color) {
+    const tokens = lines[found.line] ?? [];
+    const x = columnX(tokens, found.column, advance);
+    return {
+        line: found.line,
+        x,
+        width: columnX(tokens, found.column + length, advance) - x,
+        color,
+    };
+}
+/**
+ * Turn a declared mark into coordinates on the drawn snippet, or nothing where
+ * it names something the image does not show.
  *
  * A mark naming a line and no column is the whole line, which is the band an
  * editor draws rather than a box around a word.
  */
-export function locateMark(mark, lines) {
+export function locateMark(mark, lines, advance) {
     const color = mark.color;
     if (mark.text !== undefined) {
         const found = findText(mark.text, lines);
         return found === undefined
             ? undefined
-            : { ...found, length: mark.length ?? mark.text.length, color };
+            : spanOf(found, mark.length ?? mark.text.length, lines, advance, color);
     }
     const line = (mark.line ?? 0) - 1;
     if (line < 0 || line >= lines.length) {
         return undefined;
     }
     return mark.column === undefined
-        ? { line, column: 0, length: undefined, color }
-        : {
-            line,
-            column: mark.column - 1,
-            length: mark.length ?? 1,
-            color,
-        };
+        ? { line, x: 0, width: undefined, color }
+        : spanOf({ line, column: mark.column - 1 }, mark.length ?? 1, lines, advance, color);
 }
 //# sourceMappingURL=locate.js.map

package/dist/templates/code/mark/locate.js.map

@@ -1 +1 @@
-{"version":3,"file":"locate.js","sourceRoot":"","sources":["../../../../src/templates/code/mark/locate.ts"],"names":[],"mappings":"AAaA;;;;;;;;;GASG;AACH,SAAS,QAAQ,CAAC,MAA4B;IAC5C,IAAI,IAAI,GAAG,EAAE,CAAC;IAEd,KAAK,MAAM,KAAK,IAAI,MAAM,EAAE,CAAC;QAC3B,IAAI,GAAG,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC;IACrD,CAAC;IAED,OAAO,IAAI,CAAC;AACd,CAAC;AAED,wDAAwD;AACxD,SAAS,QAAQ,CACf,IAAY,EACZ,KAAwC;IAExC,KAAK,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,IAAI,KAAK,CAAC,OAAO,EAAE,EAAE,CAAC;QAC7C,MAAM,MAAM,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;QAE9C,IAAI,MAAM,KAAK,CAAC,CAAC,EAAE,CAAC;YAClB,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;QAC1B,CAAC;IACH,CAAC;IAED,OAAO,SAAS,CAAC;AACnB,CAAC;AAED;;;;;;GAMG;AACH,MAAM,UAAU,UAAU,CACxB,IAAc,EACd,KAAwC;IAExC,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;IAEzB,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS,EAAE,CAAC;QAC5B,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;QAEzC,OAAO,KAAK,KAAK,SAAS;YACxB,CAAC,CAAC,SAAS;YACX,CAAC,CAAC,EAAE,GAAG,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,CAAC;IACnE,CAAC;IAED,MAAM,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC;IAElC,IAAI,IAAI,GAAG,CAAC,IAAI,IAAI,IAAI,KAAK,CAAC,MAAM,EAAE,CAAC;QACrC,OAAO,SAAS,CAAC;IACnB,CAAC;IAED,OAAO,IAAI,CAAC,MAAM,KAAK,SAAS;QAC9B,CAAC,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE;QAC/C,CAAC,CAAC;YACE,IAAI;YACJ,MAAM,EAAE,IAAI,CAAC,MAAM,GAAG,CAAC;YACvB,MAAM,EAAE,IAAI,CAAC,MAAM,IAAI,CAAC;YACxB,KAAK;SACN,CAAC;AACR,CAAC"}
+{"version":3,"file":"locate.js","sourceRoot":"","sources":["../../../../src/templates/code/mark/locate.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAcjD;;;;;;;;GAQG;AACH,SAAS,QAAQ,CACf,IAAY,EACZ,KAAwC;IAExC,KAAK,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,IAAI,KAAK,CAAC,OAAO,EAAE,EAAE,CAAC;QAC7C,MAAM,MAAM,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;QAE9C,IAAI,MAAM,KAAK,CAAC,CAAC,EAAE,CAAC;YAClB,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;QAC1B,CAAC;IACH,CAAC;IAED,OAAO,SAAS,CAAC;AACnB,CAAC;AAED;;;;GAIG;AACH,SAAS,MAAM,CACb,KAAuC,EACvC,MAAc,EACd,KAAwC,EACxC,OAAgB,EAChB,KAAyB;IAEzB,MAAM,MAAM,GAAG,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;IACvC,MAAM,CAAC,GAAG,OAAO,CAAC,MAAM,EAAE,KAAK,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAEjD,OAAO;QACL,IAAI,EAAE,KAAK,CAAC,IAAI;QAChB,CAAC;QACD,KAAK,EAAE,OAAO,CAAC,MAAM,EAAE,KAAK,CAAC,MAAM,GAAG,MAAM,EAAE,OAAO,CAAC,GAAG,CAAC;QAC1D,KAAK;KACN,CAAC;AACJ,CAAC;AAED;;;;;;GAMG;AACH,MAAM,UAAU,UAAU,CACxB,IAAc,EACd,KAAwC,EACxC,OAAgB;IAEhB,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;IAEzB,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS,EAAE,CAAC;QAC5B,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;QAEzC,OAAO,KAAK,KAAK,SAAS;YACxB,CAAC,CAAC,SAAS;YACX,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,CAAC,CAAC;IAC5E,CAAC;IAED,MAAM,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC;IAElC,IAAI,IAAI,GAAG,CAAC,IAAI,IAAI,IAAI,KAAK,CAAC,MAAM,EAAE,CAAC;QACrC,OAAO,SAAS,CAAC;IACnB,CAAC;IAED,OAAO,IAAI,CAAC,MAAM,KAAK,SAAS;QAC9B,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE;QACzC,CAAC,CAAC,MAAM,CACJ,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE,EACjC,IAAI,CAAC,MAAM,IAAI,CAAC,EAChB,KAAK,EACL,OAAO,EACP,KAAK,CACN,CAAC;AACR,CAAC"}