@simple-mark/canvas 0.3.1 → 0.3.3

package/index.d.ts

@@ -39,6 +39,11 @@ interface TextRun {
   height: number;
   textTop: number;
   font: string;
+  /**
+   * The line's own font (without inline styles). Its metrics give the baseline every run on the
+   * line sits on, as in a browser, where inline code in another font shares the line's baseline.
+   */
+  lineFont: string;
   fontSize: number;
   color: string;
   /** Behind this text only (inline code). */

package/index.js

@@ -85,6 +85,7 @@ function layoutMarkdown(source, options) {
 		const lineHeight = style.lineHeight * style.fontSize * scale;
 		const textTop = (lineHeight - style.fontSize * scale) / 2;
 		const indent = lineLook.borderLeft ? EM.quoteIndent * style.fontSize : 0;
+		const lineFont = fontOf(resolveLook(styles, [], theme), style, theme, scale);
 		const table = styles.includes("table");
 		const available = wrapWidth - indent;
 		const pieces = [];
@@ -176,6 +177,7 @@ function layoutMarkdown(source, options) {
 						height: lineHeight,
 						textTop: y + textTop,
 						font,
+						lineFont,
 						fontSize: style.fontSize * scale,
 						color: look.color ?? style.color,
 						...look.background ? { background: look.background } : {},
@@ -361,10 +363,12 @@ function createMathImages(onReady) {
 const PLACEHOLDER = "rgba(129, 139, 152, 0.15)";
 /**
 * Where text sits in its line, as a browser places it: the line's extra height (half-leading)
-* split above and below the font's ascent + descent, the glyphs on the baseline. Falls back to
-* the layout's estimate where a browser doesn't give font metrics.
+* split above and below the ascent + descent of the line's font, every run on that baseline.
+* Falls back to the layout's estimate where a browser doesn't give font metrics.
 */
 function baseline(ctx, run) {
+	ctx.textBaseline = "alphabetic";
+	ctx.font = run.lineFont;
 	const metrics = ctx.measureText("x");
 	const ascent = metrics.fontBoundingBoxAscent;
 	const descent = metrics.fontBoundingBoxDescent;
@@ -391,8 +395,8 @@ function paintMarkdown(ctx, layout, sources = {}, color = "#1f2328") {
 		}
 	}
 	for (const run of layout.runs) {
-		ctx.font = run.font;
 		const { y, alphabetic } = baseline(ctx, run);
+		ctx.font = run.font;
 		ctx.textBaseline = alphabetic ? "alphabetic" : "top";
 		if (run.background) {
 			ctx.fillStyle = run.background;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simple-mark/canvas",
-  "version": "0.3.1",
+  "version": "0.3.3",
   "description": "Draws Markdown on a <canvas> without hiding its syntax: layout (no DOM) and Canvas 2D painting.",
   "license": "MIT",
   "type": "module",
@@ -23,7 +23,7 @@
     }
   },
   "dependencies": {
-    "@simple-mark/math": "^0.3.1",
-    "@simple-mark/model": "^0.3.1"
+    "@simple-mark/math": "^0.3.3",
+    "@simple-mark/model": "^0.3.3"
   }
 }