@simple-mark/canvas 0.2.0 → 0.3.1

package/index.js

@@ -359,9 +359,26 @@ function createMathImages(onReady) {
 //#endregion
 //#region packages/canvas/src/paint.ts
 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.
+*/
+function baseline(ctx, run) {
+	const metrics = ctx.measureText("x");
+	const ascent = metrics.fontBoundingBoxAscent;
+	const descent = metrics.fontBoundingBoxDescent;
+	if (!(ascent > 0) || !(descent >= 0)) return {
+		y: run.textTop,
+		alphabetic: false
+	};
+	return {
+		y: run.top + (run.height - (ascent + descent)) / 2 + ascent,
+		alphabetic: true
+	};
+}
 function paintMarkdown(ctx, layout, sources = {}, color = "#1f2328") {
 	ctx.save();
-	ctx.textBaseline = "top";
 	ctx.textAlign = "left";
 	for (const line of layout.lines) {
 		if (line.background) {
@@ -375,6 +392,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.textBaseline = alphabetic ? "alphabetic" : "top";
 		if (run.background) {
 			ctx.fillStyle = run.background;
 			ctx.fillRect(run.x, run.textTop - run.fontSize * .1, run.width, run.fontSize * 1.2);
@@ -384,18 +403,21 @@ function paintMarkdown(ctx, layout, sources = {}, color = "#1f2328") {
 			let x = run.x;
 			for (const ch of run.text) {
 				const cell = charWidth(ch.codePointAt(0)) * run.column;
-				ctx.fillText(ch, x + (cell - ctx.measureText(ch).width) / 2, run.textTop);
+				ctx.fillText(ch, x + (cell - ctx.measureText(ch).width) / 2, y);
 				x += cell;
 			}
-		} else ctx.fillText(run.text, run.x, run.textTop);
+		} else ctx.fillText(run.text, run.x, y);
 		if (run.strike || run.underline) {
 			ctx.fillStyle = run.color;
 			const thickness = Math.max(run.fontSize / 15, .5);
-			if (run.strike) ctx.fillRect(run.x, run.textTop + run.fontSize * .55, run.width, thickness);
-			if (run.underline) ctx.fillRect(run.x, run.textTop + run.fontSize * 1.02, run.width, thickness);
+			const strikeY = alphabetic ? y - run.fontSize * .3 : run.textTop + run.fontSize * .55;
+			const underlineY = alphabetic ? y + run.fontSize * .12 : run.textTop + run.fontSize * 1.02;
+			if (run.strike) ctx.fillRect(run.x, strikeY, run.width, thickness);
+			if (run.underline) ctx.fillRect(run.x, underlineY, run.width, thickness);
 		}
 	}
 	const message = (text, x, y, fill) => {
+		ctx.textBaseline = "top";
 		ctx.font = layout.message.font;
 		ctx.fillStyle = fill;
 		ctx.fillText(text, x, y);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simple-mark/canvas",
-  "version": "0.2.0",
+  "version": "0.3.1",
   "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.2.0",
-    "@simple-mark/model": "^0.2.0"
+    "@simple-mark/math": "^0.3.1",
+    "@simple-mark/model": "^0.3.1"
   }
 }