floating preview, round font metrics descent

- preview area floats/sticky as you scroll so it's visible - Some fonts report many different values for their alphanumberics in actualBoundingBoxDescent. Like a range of numbers between 0 and 1 for letters without obvious hangy downy bits. Other fonts report 0 for a lot of them and then 0.25 or 0.37 or something (depending on the font) for some letters. Since descent is using Math.ceil, in the second case you get a lot of variation where some alphanumberics are zero and some are one and in-game the letters are up and down bouncing all over the place. Now uses Math.round intead of Math.ceil so that 0 actualBoundingBoxDescent is grouped with a bunch of other values?
sqwishy · Aug 4, 2023 · a2008ba · a2008ba
1 parent 8e5da79
commit a2008ba
Showing 1 changed file with 20 additions and 11 deletions.
diff --git a/atlast.html b/atlast.html
@@ -13,14 +13,20 @@
     align-items: center;
     grid-gap: 1em }
 
+.canvas-float
+  { position: sticky; top: 0 }
+.canvas-float label, .canvas-float small
+  { background: var(--pale);
+    outline: 2px solid var(--pale) }
+
 textarea, input
   { font: inherit; color: inherit }
 
 textarea, .option-group input
   { width: 100% }
 
 h1, label
-  { display: block; color: var(--muted) }
+  { color: var(--muted) }
 label
   { font-size: smaller }
 
@@ -74,8 +80,8 @@
 .option-group
   { display: flex; grid-gap: 1.5ch }
 
-.smol
-  { flex-grow: 0 }
+.smol-button-thing
+  { flex-grow: 0; display: flex; align-items: end }
 
 hr
   { border: 0;
@@ -88,10 +94,12 @@
 <body>
 <div>
 
-<p><label>Preview <button id="toggleCanvasBackground" class="help">&#9680</button></label>
-<canvas></canvas>
-<p><small id="preview-details"><b>?</b>x<b>?</b>, row height <b>?</b> px, size <b>?</b> kbytes</small>
-<input id="canvasBackground" type="hidden" />
+<p class="canvas-float">
+	<label>Preview <button id="toggleCanvasBackground" class="help">&#9680</button></label>
+	<small id="preview-details"><b>?</b>x<b>?</b>, row height <b>?</b> px, size <b>?</b> kbytes</small>
+	<input id="canvasBackground" type="hidden" />
+	<canvas></canvas>
+</p>
 
 <p><label for="text">Text</label>
 <textarea id="text" rows="6">!"#$%&amp;'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVW
@@ -140,7 +148,7 @@
 		<p><label for="externalFontUrl">External Font URL<a class="help" target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/FontFace/FontFace">?</a></label>
 		<input id="externalFontUrl" /></input>
 
-		<p class="smol"><label for="loadExternalFont">&nbsp;</label>
+		<p class="smol-button-thing">
 		<button id="loadExternalFont">Load Font</button>
 	</div>
 
@@ -153,7 +161,7 @@
 	<p><label for="saveName">Filename</label>
 	<input id="saveName" value="GameFont.tga"/></input>
 
-	<p class="smol"><label for="save">&nbsp;</label>
+	<p class="smol-button-thing">
 	<a id="save" download="GameFont.tga">Save TGA</a>
 
 </div>
@@ -289,6 +297,7 @@ <h1>About</h1>
 				/* positive for low hanging things like g, negative for high up stuff like ` */
 				actualBoundingBoxDescent: descentf,
 			} = ctx.measureText(s)
+			// if (/[a-zA-Z]/.test(s)) console.log({s, descentf, round: Math.round(descentf + shadowDown)})
 
 			return {
 				s,
@@ -297,15 +306,15 @@ <h1>About</h1>
 				width: Math.ceil(leftf - shadowLeft - trimLeft) + Math.ceil(rightf + shadowRight - trimWidth),
 				/* ascent is the distance from the bottom or baseline to the top of the glyph.
 				 * descent is same distance but to the bottom of the glyph. */
-				height: Math.ceil(ascentf - shadowUp + descentf + shadowDown),
+				height: Math.ceil(ascentf - shadowUp) + Math.round(descentf + shadowDown),
 				/* A positive descent means the character draws below the y passed to
 				 * fillText(). Decrease y so we draw higher as to not rasterize past
 				 * textHeight. Use descent later to draw the cyan descent marker pixel
 				 * in the frame.
 				 *
 				 * A positive shadowY is shadowDown, is added to the descent as it
 				 * increases the hangy-downyness of what is drawn. */
-				descent: Math.max(Math.ceil(descentf + shadowDown), 0),
+				descent: Math.max(Math.round(descentf + shadowDown), 0),
 			}
 		})